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:
| Prefix | Description | CSS media query |
|---|---|---|
| mobile | Applied to screen sizes up to 639px. | @media (max-width: 639px) |
| tablet | Applied to screen sizes from 640px. | @media (min-width: 640px) |
| desktop | Applied 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:
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"> <h4>Hello world!</h4> <p class="has-mb-none"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p> </div> </div>
Designed and maintained with by @jmjuanes.
Code is licensed under MIT, documentation under Creative Commons Attribution 4.0.