Here you find the atoms that defines the smallest parts of the design system.
Atoms are the smallest building blocks and components of the design system. If you like to create your own organisms and molecules.
Explore
To create a card, just add class st-card to a div. This creates the white box with a light shadow.
The minimal card has to contain a child div with tha classes of st-card--content st-card--section. This ads logic to the more complex cards and ads padding to the content.
<div class="st-card">
<div class="st-card--content st-card--section">
CONTENT GOES HERE
</div>
</div>
To create a header to your card, add following code at the top of your class st-card.
<div class="st-card--content st-card--header">
<div class="st-card--header__Title">
<h5>TITLE GOES HERE</h5>
</div>
</div>
To devide content in a card, add a div with class st-card--divider. This creates a thin line that marks the separation of content. Make sure to add the divider outside st-card--container to not be effected by the padding.
<div class="st-card--divider"></div>
To add some nice actions in at a card, add a div with the class st-card--header__Actions inside the header. This actions should be a link element.
<div class="st-card--content st-card--header">
<div class="st-card--header__Actions">
<a>link</a>
</div>
</div>
As in normal bootstrap, start your button with class .btn,
followed by the shape you want. The buttons that is uniqe from bootstrap is .btn-basic and .btn-rounded. Try it out!
<button type="button" class="btn btn-basic">Normal</button>
<button type="button" class="btn btn-primary">Normal</button>
<button type="button" class="btn btn-danger">Normal</button>
<button type="button" class="btn btn-transparent">Normal</button>
<button type="button" class="btn btn-link">Normal</button>
class="btn btn-primary btn-rounded"
Add .btn-lg or .btn-sm.
If it's still not enough, add .btn-block to your .btn-lg.
As in buttons, start your <span> with class .badge
followed by the type you want: .badge-primary, .badge-secondary or .badge-info.
<span class="badge badge-primary">Primary</span>
Use the same classes as in bootstrap. All the custom styling is adjusted on the original classes.
As atoms, we display the different items that a div with the class of .form-group could contain.
<label for="exampleInputEmail1">This is a label</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<select class="form-control"><option>option</option></select>
<textarea class="form-control" rows="5" placeholder="textarea"></textarea>
<small> with the classes form-text text-muted
We'll never share your email with anyone else.
<small class="form-text text-muted">We'll never share your email with anyone else.</small>
.form-control for all inputs. Wrap label, input and optional descripton in a <div> with class .form-group
<input type="range" class="custom-range" id="customRange1">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="ex">
<label class="form-check-label" for="ex">
Default checkbox
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" value="" id="ex2">
<label class="form-check-label" for="ex2">
Default radio
</label>
</div>
Please feel free to visit bootstraps form components. We have just created a new face for the components, the classes are the same.
Just as in bootstrap - a alert is a div with class class="alert" that indicates the alert, followed by a indicator of alert type. For example alert-primary.
Collapse let's you hide and show content with a simple click.
<a data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
toggle collased content
</a>
<p class="collapse" id="collapseExample">
------ CONTENT GOES HERE ------
</p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate condimentum interdum. In luctus non odio vitae sagittis. Aenean luctus purus id nulla cursus tincidunt. Vestibulum vitae tellus et urna egestas congue ut sit amet velit. Duis dignissim convallis ex, in iaculis nibh dapibus id. Vivamus posuere orci a diam feugiat porttitor. Maecenas malesuada enim a laoreet consectetur. Suspendisse fermentum dui eu augue suscipit, in laoreet lorem convallis. Aenean erat enim, consequat id sapien quis, sagittis dapibus leo. Fusce arcu ligula, hendrerit eu facilisis eget, efficitur id erat. Integer tempus ac elit ac molestie. Proin commodo et magna at vulputate. Aliquam placerat nunc urna, vitae tempor massa dapibus a. Praesent nunc urna, varius ac facilisis nec, placerat vitae metus. Nulla auctor magna vitae dictum pretium.
Sometimes you need to guide the user right, maybe explain a buttons effect, without writing it as a description. Just add some sweet attributes to your element: data-toggle="tooltip" data-placement="top" title="Tooltip on top". Then place your text as following attribute. title="I'm the content that will guide you more". And psst, don't forget to init the tooltip() in your js file.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
The same as in bootstrap, give your unordered list a class of list-group, and the items a class of list-group-item.
Add a class of active.
Add a class of disabled.
Add a class of list-group-flush to remove side borders and radius.
There are sooo much more to do with lists if they are combined with other atoms.