mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
9094eff30a
* Add package files whitelist * Add flex shrink * Add flex shrink * Add docs config * Fix flex shrink * Fix hero pages * Add docs folder
136 lines
4.0 KiB
HTML
136 lines
4.0 KiB
HTML
---
|
|
layout: documentation
|
|
doc-tab: overview
|
|
doc-subtab: start
|
|
---
|
|
|
|
{% include subnav-overview.html %}
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<h1 class="title"><strong>3</strong> ways to start</h1>
|
|
<h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
|
|
|
|
<hr>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-number">1</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
Use <strong>NPM</strong> <em>(recommended)</em>:
|
|
</p>
|
|
{% highlight bash %}
|
|
npm install bulma
|
|
{% endhighlight %}
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-number">2</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
Use the <a href="https://cdnjs.com/" target="_blank">cdnjs</a> <strong>CDN</strong>
|
|
<br>
|
|
<a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
|
|
</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-number">3</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
Download from the <strong>repository</strong>
|
|
<br>
|
|
<a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
|
|
</p>
|
|
</div>
|
|
</article>
|
|
|
|
<hr>
|
|
|
|
<div class="message is-info">
|
|
<div class="message-header">
|
|
Font Awesome icons
|
|
</div>
|
|
<div class="message-body">
|
|
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
|
|
{% highlight html %}
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
|
|
{% endhighlight %}
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<h3 class="title">Customizing with Sass</h3>
|
|
|
|
<div class="content">
|
|
<p>If you're familiar with <a href="http://sass-lang.com/">Sass</a> and want to <strong>customize</strong> Bulma with your own colors and variables, just install Bulma via <strong>npm</strong>:</p>
|
|
</div>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-number">1</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
<strong>Download</strong> the source files:
|
|
</p>
|
|
{% highlight bash %}
|
|
npm install bulma
|
|
{% endhighlight %}
|
|
<div class="content">or clone the repository: <a href="https://github.com/jgthms/bulma">https://github.com/jgthms/bulma</a></div>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-number">2</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
<strong>Set</strong> your variables:<br>
|
|
{% highlight sass %}
|
|
// Override initial variables here
|
|
// You can add new ones or update existing ones:
|
|
|
|
$blue: #72d0eb // Update blue
|
|
$pink: #ffb3b3 // Add pink
|
|
$family-serif: "Georgia", serif // Add a serif family
|
|
|
|
// Override generated variables here
|
|
// For example, by default, the $danger color is $red and the font is sans-serif
|
|
// You can change these values:
|
|
|
|
$danger: $orange // Use the existing orange
|
|
$family-primary: $family-serif // Use the new serif family
|
|
{% endhighlight %}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="media is-large">
|
|
<div class="media-number">3</div>
|
|
<div class="media-content">
|
|
<p class="title is-5">
|
|
<strong>Import</strong> Bulma <em>after</em> having set your variables:<br>
|
|
{% highlight sass %}
|
|
// Override variables here
|
|
// You can add new ones or update existing ones:
|
|
|
|
$blue: #72d0eb // Update blue
|
|
$pink: #ffb3b3 // Add pink
|
|
$family-serif: "Georgia", serif // Add a serif family
|
|
|
|
// Override generated variables here
|
|
// For example, by default, the $danger color is $red and the font is sans-serif
|
|
// You can change these values:
|
|
|
|
$danger: $orange // Use the existing orange
|
|
$family-primary: $family-serif // Use the new serif family
|
|
|
|
@import "bulma"
|
|
{% endhighlight %}
|
|
</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|