John Smith @johnsmith
31m
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
efficitur sit amet massa fringilla egestas. Nullam condimentum luctus
turpis.
Start Here
Features
Sass Tools
CSS Library
CSS Helpers
Box
A white box to contain other elements
The box element is a simple container with a white background, some padding, and a box shadow.
Example
I'm in a box.
HTML
<div class="box">I'm in a box.</div>Because it acts as a container, you can easily include other components, like form elements:
Example
HTML
<form class="box">
<div class="field">
<label class="label">Email</label>
<div class="control">
<input class="input" type="email" placeholder="e.g. [email protected]" />
</div>
</div>
<div class="field">
<label class="label">Password</label>
<div class="control">
<input class="input" type="password" placeholder="********" />
</div>
</div>
<button class="button is-primary">Sign in</button>
</form>Or a media object:
Example
HTML
<div class="box">
<article class="media">
<div class="media-left">
<figure class="image is-64x64">
<img src="https://bulma.io/assets/images/placeholders/128x128.png" alt="Image" />
</figure>
</div>
<div class="media-content">
<div class="content">
<p>
<strong>John Smith</strong> <small>@johnsmith</small>
<small>31m</small>
<br />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
efficitur sit amet massa fringilla egestas. Nullam condimentum luctus
turpis.
</p>
</div>
<nav class="level is-mobile">
<div class="level-left">
<a class="level-item" aria-label="reply">
<span class="icon is-small">
<i class="fas fa-reply" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="retweet">
<span class="icon is-small">
<i class="fas fa-retweet" aria-hidden="true"></i>
</span>
</a>
<a class="level-item" aria-label="like">
<span class="icon is-small">
<i class="fas fa-heart" aria-hidden="true"></i>
</span>
</a>
</div>
</nav>
</div>
</article>
</div>Sass and CSS variables #
|
Sass Variable
|
CSS Variable
|
Value
|
|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
