siimple 3.2.0 siimple.xyz
Layout
A collection of CSS classes for laying your project.
Box
A simple layout component to highlight something
As its name suggests, it's just a simple box. It can contain up to three different elements: a title, a subtitle and a detail. To create a basic box, add to a div the class siimple-box:
<div class="siimple-box"></div>
To use any of the three elements that box posesses just create a div for each one and apply the corresponding class: siimple-box-title, siimple-box-subtitle and siimple-box-detail:
Box title
This is the box subtitle
This is the box detail text
<div class="siimple-box">
    <div class="siimple-box-title">Box title</div>
    <div class="siimple-box-subtitle">This is the box subtitle</div>
    <div class="siimple-box-detail">This is the box detail text</div>
</div>
Colored box
You can change the color of the box adding the class siimple-box--[COLOR] to the box you've already created. Check available colors in the theming section.
Box title
This is the box subtitle
This is the box detail text
<div class="siimple-box siimple-box--primary">
    <div class="siimple-box-title">Box title</div>
    <div class="siimple-box-subtitle">This is the box subtitle</div>
    <div class="siimple-box-detail">This is the box detail text</div>
</div>
Legacy colors for the box component will be removed in a future major release of siimple. Consider upgrading to the new colors API.
Box title
This is the box subtitle
This is the box detail text
<div class="siimple-box siimple-box--orange">
    <div class="siimple-box-title">Box title</div>
    <div class="siimple-box-subtitle">This is the box subtitle</div>
    <div class="siimple-box-detail">This is the box detail text</div>
</div>
Found a mistake or want to help improve this documentation? Suggest changes.