introduction
Getting startedNaming methodologyResponsive
customization
elements
helpers
packages
guides
recipes
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 four 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)
widescreenApplied to screen sizes from 1504px.@media (min-width: 1504px)

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="has-radius-md has-bg-white has-p-6 is-flex has-direction-column-mobile">
    <div class="has-radius-md has-bg-primary has-p-6 has-w-64-tablet is-flex has-justify-center">
        <i class="icon-image has-text-white has-size-9"></i>
    </div>
    <div class="has-p-6 has-px-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, built and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.