introduction
Getting startedNaming methodologyResponsive
customization
modules
elements
helpers
presets
packages
guides
Responsive

The siimple toolkit has been designed to be fully responsive, so you can design an fully adaptative user interface.

Some helpers and elements modifiers can be conditionally applied at different breakpoints, so you can customize how the user interface will be presented on different screen sizes.

By default, we provide three screen breakpoints:

PrefixDescriptionCSS media query
mobileApplied to screen sizes up to 639px.@media (max-width: 639px)
tabletApplied to screen sizes from 640px.@media (min-width: 640px)
desktopApplied to screen sizes from 1264px.@media (min-width: 1264px)

The following example uses these responsive variants to customize how the card will be displayed for different screen sizes:

Hello world!
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="is-rounded has-bg-white has-p-6 is-flex has-direction-column-mobile">
    <div class="is-rounded has-bg-primary has-p-6 has-w-64-tablet is-flex has-justify-center">
        <i class="si-image has-text-white has-size-9"></i>
    </div>
    <div class="has-p-6 has-pl-none-mobile has-pr-none-mobile">
        <div class="title is-4">Hello world!</div>
        <div class="paragraph has-mb-none">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
            incididunt ut labore et dolore magna aliqua.
        </div>
    </div>
</div>
Designed and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.
Currently v4.2.0