mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
39 lines
1.5 KiB
HTML
39 lines
1.5 KiB
HTML
---
|
|
title: CSS classes
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: classes
|
|
---
|
|
|
|
{% include subnav/subnav-overview.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title">Classes</h1>
|
|
<h2 class="subtitle">Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.</h2>
|
|
|
|
<hr>
|
|
|
|
<div class="content">
|
|
<p>
|
|
Bulma is a <strong>CSS</strong> framework, meaning that the end result is simply a <strong>single</strong> <code>.css</code> file:
|
|
<br>
|
|
<a href="https://github.com/jgthms/bulma/blob/master/css/bulma.css">https://github.com/jgthms<wbr>/bulma<wbr>/blob<wbr>/master<wbr>/css<wbr>/bulma.css</a></p>
|
|
<p>
|
|
Because Bulma solely comprises CSS classes, the HTML code you write has <strong>no impact</strong> on the styling of your page. That's why <code>.input</code> exists as a class, so you can choose <em>which</em> <code><input type="text"></code> elements you want to style.
|
|
</p>
|
|
<p>
|
|
Bulma only styles <strong>generic</strong> tags directly <strong>twice</strong>:
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<a href="https://github.com/jgthms/bulma/blob/master/sass/base/generic.sass"><code>generic.sass</code></a> to define a basic style for your page
|
|
</li>
|
|
<li>
|
|
the <a href="{{ site.url }}/documentation/elements/content/"><code>.content</code> class </a> to use for <em>any</em> textual content, like WYSIWYG
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|