introduction
Getting startedNaming methodologyResponsive
customization
elements
helpers
packages
guides
recipes
Naming methodology

The siimple toolkit uses a simplified version of the SMACSS methodology for naming classnames, as described on this section.

Elements

We use the following syntax for naming elements in siimple:

.<prefix><element>
  • <prefix>: is the elements prefix that can be customized in the prefix section of the configuration. The default prefix applied in siimple is an empty string.
  • <element> is the element name, for example button or card.

Example:

<div class="button">...</div>
Modifiers

Modifiers are a collection of low-level classnames that can be used in any element to modify some CSS properties. Modifiers always follows this syntax:

.has-<shortcut>-<name>
.is-<name>

Example:

<div class="is-block has-bg-primary has-text-white">
    ...
</div>
Responsive modifiers

Some modifiers can be applied conditionally at different breakpoints, for building adaptative and responsive interfaces. Responsive modifiers uses the following syntax:

.has-<shortcut>-<name>-<breakpoint>
.is-<name>-<breakpoint>

Example:

<div class="is-hidden-mobile is-flex-tablet has-items-center-tablet">
    ...
</div>
Status modifiers

Similar to responsive modifiers, you can apply some modifiers only in response to an specific status of the element. The classnames syntax in this case is very similar to the responsive modifiers:

.has-<shortcut>-<name>-<state>
.is-<name>-<state>
Hover status

Use the hover status to apply the modifier only on hover:

Hoverable button
<div class="button has-text-white has-bg-secondary-hover">
    Hoverable button
</div>
Variant modifiers

Variant modifiers are special modifiers used to change the default style of an element. Variant modifiers always use the following syntax:

.is-<variant-name>

Some elements, like buttons or bages will generate a variant modifier class for each additional variant specified in your configuration.

The following example shows how to use the secondary variant of a button:

<button class="button is-secondary">
    Secondary button
</button>
Designed, built and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.