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:

<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>

Actionable modifiers

In some elements we use special modifiers to active it. The syntax for this type of modifiers is:

.with-<element>

For example, for displaying the dropdown when the user movers the cursor over the dropdown parent element, you should add the with-dropdown class to the dropdown parent element:

<div class="with-dropdown">
    <button>Hover me</button>
    <div class="dropdown">
        <!-- Dropdown content -->
    </div>
</div>