candy.css

Documentation

Introduction

This page demonstrates some of the ways candy.css can be used, as well as code for its examples.

Basics

All CSS classes from candy.css start with candy-. This way you'll always know when you're using candy.css.

Change the custom properties to try different values. Refresh the page to reset it.

Edit CSS custom properties

Buttons

The class candy-button can turn any element into a button visually. Intended for button tags, it will work on a tags too.

Primary buttons use the class candy-primary in addition to candy-button.

Text inputs

The candy-input class should be used for text inputs and text area elements. The candy-field class should be used for wrapping input with a label.

Selects

The class candy-select should be put on select elements.

Checkboxes & radio buttons

Checkboxes & radio buttons are collectively called choice items, and their container is called a choice.

For proper accessibility and appearance, wrap all choice items inside a label with the class candy-choice. If you prefer using a separate label with HTML id and for attributes, you can do that instead, but using a label wrapper is easier to implement and provides a larger clickable area.

Tables

A table with row headers: th elements inside the tbody.

A table with a footer: a tfoot element including th and td children.

Cards

Cards should be used for grouping contents. They are not meant to be accessible as clickable elements. Use buttons and links for that. You're on your own if you want to make a clickable card.

Wells

Wells are used for grouping contents. Whereas cards appear elevated, wells appear sunken.

Boxes

Boxes are used to draw borders around items. Tables in particular require the use of candy-box in order to have a border.

Fieldsets & legends

Fieldsets can be used to group any elements within a form, but are especially useful when grouping checkboxes or radio buttons.

Inline SVG

Using the CSS class candy-svg will set the fill property to currentcolor, causing inline SVGs to automatically match your candy.css theme.

Textures

Textures are meant to be used in your own containers. Textures can be applied to nav bars, sidebars, or content areas. Use the class candy-texture- followed by the texture name in lowercase.

The striped texture is best reserved for highly decorative elements, like the main nav bar on a page, or a page hero element. You can also nest a box inside a container using the stripe texture in order to make the content more readable.

Shadows

Shadows are still in development. Some elements currently have shadows, but they need some fine tuning. I want to eventually provide a few different shadow classes and properties that can be reused, but the directionality and size of shadows makes this tough.

Scrollbars

Chrome and Firefox support scrollbar-color to customize the color of scrollbars.

Dividers

Code

The class candy-code can be used for multiline code blocks.

Text styles

The class candy-link can be used for styling anchor tags. The class candy-bright can be used to apply the brighter text color to an element.

The class candy-prose can be used as a wrapper which will cause many HTML elements to automatically receive certain styles:

  • h1, h2, h3, h4, h5, h6, b, i, em, strong, and code tags not directly inside of pre tags will all behave as if they have the class candy-bright applied to them.

  • a tags will behave as if they have the class candy-link applied to them.

  • hr tags will behave as if they have the class candy-divider applied to them.

  • pre tags will behave as if they have the class candy-code applied to them.

Focus

Apply a focus ring to a custom component or scrollable area.