Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-17 19:04:30 -07:00
Code Issues Packages Projects Releases Wiki Activity

Update overview

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 17:32:12 +01:00
parent 425860f56f
commit e9dd9eb80e
12 changed files with 1013 additions and 1008 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
docs/documentation/overview/classes.html
View File

@@ -1,38 +1,33 @@
---
title: CSS classes
subtitle: "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want."
layout: documentation
doc-tab: overview
doc-subtab: classes
breadcrumb:
- home
- documentation
- overview
- overview-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>&lt;input type="text"&gt;</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>
<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>&lt;input type="text"&gt;</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>