mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Init v1
This commit is contained in:
Jeremy Thomas
134
docs/documentation/start/alternative-versions.html
Normal file
134
docs/documentation/start/alternative-versions.html
Normal file
@@ -0,0 +1,134 @@
|
||||
---
|
||||
title: Alternative versions of Bulma
|
||||
layout: docs
|
||||
theme: start
|
||||
doc-tab: start
|
||||
doc-subtab: alternative-versions
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- start
|
||||
- start-alternative-versions
|
||||
---
|
||||
|
||||
{% capture html_normal %}
|
||||
<section class="section">
|
||||
<div class="container has-text-centered">
|
||||
<h1 class="title">
|
||||
Hello World
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
My first website with
|
||||
<strong class="has-text-primary">Bulma</strong>!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture html_prefixed %}
|
||||
<section class="bulma-section">
|
||||
<div class="bulma-container bulma-has-text-centered">
|
||||
<h1 class="bulma-title">
|
||||
Hello World
|
||||
</h1>
|
||||
<p class="bulma-subtitle">
|
||||
My first website with
|
||||
<strong class="bulma-has-text-primary">Bulma</strong>!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture html_no_helpers %}
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">
|
||||
Hello World
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
My first website with
|
||||
<strong>Bulma</strong>!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture html_prefixed_no_helpers %}
|
||||
<section class="bulma-section">
|
||||
<div class="bulma-container">
|
||||
<h1 class="bulma-title">
|
||||
Hello World
|
||||
</h1>
|
||||
<p class="bulma-subtitle">
|
||||
My first website with
|
||||
<strong>Bulma</strong>!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>Because different people have different requirements, Bulma comes in different versions ready to use:</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Version</th>
|
||||
<th>Prefix</th>
|
||||
<th>Usage</th>
|
||||
<th>Download</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Complete</strong><br>
|
||||
<em style="white-space: nowrap">(Library + Helpers)</em>
|
||||
</td>
|
||||
<td>None</td>
|
||||
<td>
|
||||
{% highlight html -%}
|
||||
{{- html_normal -}}
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
<td><a class="button is-primary">bulma.css</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>Prefixed</strong></td>
|
||||
<td><code>bulma-</code></td>
|
||||
<td>
|
||||
{% highlight html -%}
|
||||
{{- html_prefixed -}}
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
<td><a class="button is-primary">bulma-prefixed.css</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>Library Only</strong><br>
|
||||
<em>No Helpers</em>
|
||||
</td>
|
||||
<td>None</td>
|
||||
<td>
|
||||
{% highlight html -%}
|
||||
{{- html_no_helpers -}}
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
<td><a class="button is-primary">bulma-no-helpers.css</a></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<strong>No Helpers, Prefixed</strong><br>
|
||||
<em>Library Only</em>
|
||||
</td>
|
||||
<td><code>bulma-</code></td>
|
||||
<td>
|
||||
{% highlight html -%}
|
||||
{{- html_prefixed_no_helpers -}}
|
||||
{%- endhighlight %}
|
||||
</td>
|
||||
<td><a class="button is-primary">bulma-no-helpers-prefixed.css</a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
12
docs/documentation/start/css-classes.html
Normal file
12
docs/documentation/start/css-classes.html
Normal file
@@ -0,0 +1,12 @@
|
||||
---
|
||||
title: Bulma is a collection of CSS classes
|
||||
layout: docs
|
||||
theme: start
|
||||
doc-tab: start
|
||||
doc-subtab: css-classes
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- start
|
||||
- start-css-classes
|
||||
---
|
||||
176
docs/documentation/start/installation.html
Normal file
176
docs/documentation/start/installation.html
Normal file
@@ -0,0 +1,176 @@
|
||||
---
|
||||
title: How to install Bulma
|
||||
layout: docs
|
||||
theme: start
|
||||
doc-tab: start
|
||||
doc-subtab: installation
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- start
|
||||
- start-installation
|
||||
---
|
||||
{% capture jsdelivr_a %}
|
||||
{%highlight css %}
|
||||
@import "https://cdn.jsdelivr.net/npm/bulma@{{site.data.meta.version }}/css/bulma.min.css";
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture jsdelivr_b %}
|
||||
{% highlight html %}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css"
|
||||
>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture jsdelivr_rtl_a %}
|
||||
{% highlight css %}@import "https://cdn.jsdelivr.net/npm/bulma@{{
|
||||
site.data.meta.version }}/css/bulma-rtl.min.css";{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture jsdelivr_rtl_b %}
|
||||
{% highlight html %}
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css"
|
||||
>
|
||||
{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="bd-options">
|
||||
<div class="bd-option bd-theme-css">
|
||||
<div class="block media is-align-items-center">
|
||||
<div class="media-left">
|
||||
<span class="icon is-flex is-large">
|
||||
<i class="fab fa-css3 fa-2x"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Get the Bulma <strong>CSS</strong> file</p>
|
||||
<p class="subtitle">A single <code>.css</code> file that includes all of Bulma</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
<span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
|
||||
Option 1. <strong>Use a CDN</strong>
|
||||
</p>
|
||||
|
||||
<p class="block">
|
||||
You can import the CSS file directly from
|
||||
<a href="{{ site.data.meta.jsdelivr }}" target="_blank">jsDelivr</a>:
|
||||
</p>
|
||||
|
||||
{%
|
||||
include docs/components/tabs.html
|
||||
button_a="CSS @import" button_b="HTML <link />" item_a=jsdelivr_a
|
||||
item_b=jsdelivr_b
|
||||
%}
|
||||
|
||||
<p class="block">The <strong>RTL version</strong> is also available:</p>
|
||||
|
||||
{%
|
||||
include docs/components/tabs.html
|
||||
button_a="CSS @import" button_b="HTML <link />" item_a=jsdelivr_rtl_a
|
||||
item_b=jsdelivr_rtl_b
|
||||
%}
|
||||
|
||||
<p class="block">
|
||||
Bulma is also available via
|
||||
<a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
Option 2. <strong>Download the Github release</strong>
|
||||
</p>
|
||||
|
||||
<div class="block">You can get the latest Bulma release as a <code>.zip</code> from GitHub:</div>
|
||||
|
||||
<a
|
||||
class="button bd-fat-button is-primary is-light"
|
||||
href="{{ site.data.meta.download }}"
|
||||
>
|
||||
Download v{{ site.data.meta.version }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-or">
|
||||
<p>Or</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option bd-theme-sass">
|
||||
<div class="block media is-align-items-center">
|
||||
<div class="media-left">
|
||||
<span class="icon is-flex is-large">
|
||||
<i class="fab fa-sass fa-2x"></i>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="media-content">
|
||||
<p class="title is-4">Get the Bulma <strong>Sass</strong> library</p>
|
||||
<p class="subtitle">A collection of <code>.sass</code> files to build your own version of Bulma</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
<span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
|
||||
Option 1. <strong>Install the NPM package</strong>
|
||||
</p>
|
||||
|
||||
<p class="block">
|
||||
Bulma is available through
|
||||
<a href="{{ site.data.meta.npm }}" target="_blank">npm</a>:
|
||||
</p>
|
||||
|
||||
{% capture npm_item %} {% highlight bash %}npm install bulma{%
|
||||
endhighlight %} {% endcapture %}
|
||||
{% capture yarn_item %} {% highlight bash
|
||||
%}yarn add bulma{% endhighlight %} {% endcapture %}
|
||||
{%
|
||||
include docs/components/tabs.html button_a="npm" button_b="yarn" item_a=npm_item
|
||||
item_b=yarn_item
|
||||
%}
|
||||
|
||||
<p class="block">
|
||||
Bulma is also available via
|
||||
<a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-option-item">
|
||||
<p class="bd-option-title block has-text-grey-light is-size-5">
|
||||
Option 2. <strong>Clone the GitHub repository</strong>
|
||||
</p>
|
||||
|
||||
<p class="block">
|
||||
Bulma is available on
|
||||
<a href="{{ site.data.meta.github }}" target="_blank">GitHub</a>:
|
||||
</p>
|
||||
|
||||
{% capture git_ssh %} {% highlight bash %}{{ site.data.meta.git_ssh }}{%
|
||||
endhighlight %} {% endcapture %}
|
||||
{% capture git_https %} {% highlight bash
|
||||
%}{{ site.data.meta.git_https }}{% endhighlight %} {% endcapture %}
|
||||
{% capture git_cli %} {% highlight bash %}{{ site.data.meta.git_cli }}{%
|
||||
endhighlight %} {% endcapture %}
|
||||
{%
|
||||
include docs/components/tabs.html
|
||||
button_a="SSH" button_b="HTTPS" button_c="GitHub CLI" item_a=git_ssh
|
||||
item_b=git_https item_c=git_cli
|
||||
%}
|
||||
|
||||
<div class="notification is-warning is-light" style="font-size: 1rem">
|
||||
Note that the GitHub repository also includes this documentation, so it’s significantly bigger than the NPM
|
||||
package.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
163
docs/documentation/start/migrating-to-v1.html
Normal file
163
docs/documentation/start/migrating-to-v1.html
Normal file
@@ -0,0 +1,163 @@
|
||||
---
|
||||
title: Migrating to Bulma v1
|
||||
layout: docs
|
||||
theme: start
|
||||
doc-tab: start
|
||||
doc-subtab: migrating
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- start
|
||||
- start-migrating
|
||||
---
|
||||
|
||||
{% capture markdown %}
|
||||
Bulma v1 is basically a **full rewrite** of the framework using [**Dart Sass**](https://sass-lang.com/dart-sass/), which is the the primary implementation of Sass. While this affects a few development details, everything has been done to make the transition **as easy as possible**.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/anchor.html name="What remains the same" %}
|
||||
|
||||
{% capture markdown %}
|
||||
**All HTML snippets are the same**. This means you don't need to update your markup. **This is important** because it means, if you're using Bulma straight "out of the box", you don't need to change anything.
|
||||
|
||||
You can just swap `bulma@0.9.4/css/bulma.min.css` with `bulma@1.0.0/css/bulma.min.css` and everything will work. Things will look slightly different, but they will still work.
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/anchor.html name="What changes" %}
|
||||
|
||||
{% capture markdown %}
|
||||
* [**Dart Sass**](https://sass-lang.com/dart-sass/) is used to build Bulma
|
||||
* if you use the `sass` npm package, you're already using Dart Sass
|
||||
* [**CSS Variables**]({{ site.data.links.by_id['features-css-variables'].path }}) are used instead of literals: `color: var(--bulma-primary);` instead of `color: hsl(171deg, 100%, 41%);`, which means you can customize Bulma with CSS only (without using Sass)
|
||||
* Customization by setting your own value for Sass variables works differently. See [how to customize Bulma with Sass]({{ site.data.links.by_id['customize-with-sass'].path }}).
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/anchor.html name="What's new (i.e. did not exist before)" %}
|
||||
|
||||
{% capture markdown %}
|
||||
* The notion of [**Themes**]({{ site.data.links.by_id['features-themes'].path }}) is introduced: a theme is a collection of CSS variables within a context, and is the best approach to customize Bulma
|
||||
* As a result, a Theme for [**Dark Mode**]({{ site.data.links.by_id['features-dark-mode'].path }}) is included
|
||||
* [**Color Palettes**]({{ site.data.links.by_id['features-color-palettes'].path }}) are created for each of the 7 primary colors
|
||||
* [**Skeleton loaders**]({{ site.data.links.by_id['features-skeletons'].path }}) exist as standalone components but also as variants of other components
|
||||
* You can add a **prefix** to all your Bulma classes so that `.button` becomes `.my-prefix-button`
|
||||
* a pre-built prefixed version exists as one of the [**alternative versions**]({{ site.data.links.by_id["start-alternative-versions"].path }})
|
||||
{% endcapture %}
|
||||
|
||||
{% include markdown.html content=markdown %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Breaking Changes" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>⛔️ Deprecated</th>
|
||||
<th>✅ How to fix</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="mb-2"><strong>Tiles</strong> are deprecated</p>
|
||||
{% highlight html %}
|
||||
<!-- Before -->
|
||||
<div class="tile is-ancestor">
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Hello World</p>
|
||||
<p class="subtitle">What is up?</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="tile is-parent">
|
||||
<article class="tile is-child box">
|
||||
<p class="title">Foo</p>
|
||||
<p class="subtitle">Bar</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">Use the new and improved <a href="/documentation/grid/smart-grid/">Smart Grid</a></p>
|
||||
{% highlight html %}
|
||||
<!-- After -->
|
||||
<div class="grid">
|
||||
<div class="cell">
|
||||
<article class="box">
|
||||
<p class="title">Hello World</p>
|
||||
<p class="subtitle">What is up?</p>
|
||||
</article>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<article class="box">
|
||||
<p class="title">Foo</p>
|
||||
<p class="subtitle">Bar</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="mb-2"><code>@import</code> is not recommended</p>
|
||||
{% highlight sass %}
|
||||
// Before
|
||||
$purple: #8A4D76;
|
||||
$pink: #FA7C91;
|
||||
$brown: #757763;
|
||||
$beige-light: #D0D1CD;
|
||||
$beige-lighter: #EFF0EB;
|
||||
|
||||
// Update Bulma's global variables
|
||||
$family-sans-serif: "Nunito", sans-serif;
|
||||
$grey-dark: $brown;
|
||||
$grey-light: $beige-light;
|
||||
$primary: $purple;
|
||||
$link: $pink;
|
||||
|
||||
// Update some of Bulma's component variables
|
||||
$control-border-width: 2px;
|
||||
$input-background-color: $beige-lighter;
|
||||
$input-border-color: transparent;
|
||||
$input-shadow: none;
|
||||
|
||||
// Import the rest of Bulma
|
||||
@import "../path/to/bulma";
|
||||
{% endhighlight %}
|
||||
</td>
|
||||
<td>
|
||||
<p class="mb-2">Use Dart Sass's new <a href="https://sass-lang.com/documentation/at-rules/use/"><code>@use</code> and <code>@forward</code> keywords</a></p>
|
||||
{% highlight sass %}
|
||||
// After
|
||||
$purple: #8a4d76;
|
||||
$pink: #fa7c91;
|
||||
$brown: #757763;
|
||||
$beige-light: #d0d1cd;
|
||||
$beige-lighter: #eff0eb;
|
||||
|
||||
// Path to Bulma's sass folder
|
||||
@use "path/to/bulma/sass" with (
|
||||
$family-primary: '"Nunito", sans-serif',
|
||||
$grey-dark: $brown,
|
||||
$grey-light: $beige-light,
|
||||
$primary: $purple,
|
||||
$link: $pink,
|
||||
$control-border-width: 2px,
|
||||
$input-h: color.hue($beige-lighter),
|
||||
$input-s: color.saturation($beige-lighter),
|
||||
$input-background-l: color.lightness($beige-lighter),
|
||||
$input-border-l: color.lightness($beige-lighter),
|
||||
$input-shadow: none
|
||||
);
|
||||
{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
162
docs/documentation/start/modular.html
Normal file
162
docs/documentation/start/modular.html
Normal file
@@ -0,0 +1,162 @@
|
||||
---
|
||||
title: Modularity in Bulma
|
||||
layout: docs
|
||||
theme: start
|
||||
doc-tab: start
|
||||
doc-subtab: modular
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- start
|
||||
- start-modular
|
||||
---
|
||||
|
||||
{% capture import %}
|
||||
// Only load the columns
|
||||
@use "bulma/sass/grid/columns";
|
||||
{% endcapture %}
|
||||
|
||||
{% capture columns %}
|
||||
<div class="columns">
|
||||
<div class="column">1</div>
|
||||
<div class="column">2</div>
|
||||
<div class="column">3</div>
|
||||
<div class="column">4</div>
|
||||
<div class="column">5</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture only_button %}
|
||||
// Load Bulma's base styles and themes (including the minireset)
|
||||
@use "bulma/sass/base";
|
||||
@use "bulma/sass/themes";
|
||||
|
||||
// Load the button and title elements and compnents
|
||||
@use "bulma/sass/elements/button";
|
||||
@use "bulma/sass/elements/title";
|
||||
@use "bulma/sass/components/message";
|
||||
{% endcapture %}
|
||||
|
||||
{% capture buttons %}
|
||||
<button class="button">Button</button>
|
||||
<button class="button is-primary">Primary button</button>
|
||||
<button class="button is-large">Large button</button>
|
||||
<button class="button is-loading">Loading button</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture use_rule %}
|
||||
@use "path/to/file.scss";
|
||||
{% endcapture %}
|
||||
|
||||
{% capture base_loads %}
|
||||
// Load Bulma's base styles and themes (including the minireset)
|
||||
@use "bulma/sass/base";
|
||||
@use "bulma/sass/themes";
|
||||
|
||||
// Load other Bulma components
|
||||
@use "bulma/sass/elements/button";
|
||||
@use "bulma/sass/components/message";
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma consists of elements and components defined in dozens of <code>.scss</code> files, that you can <a href="https://sass-lang.com/documentation/at-rules/use/">load individually with the <code>@use</code> keyword</a>.
|
||||
</p>
|
||||
|
||||
{% highlight sass %}{{ use_rule }}{% endhighlight %}
|
||||
|
||||
<p>
|
||||
While this will correctly load the target file's styles, most Bulma components rely on <strong>base styles</strong> and <strong>CSS variables</strong> defined by the default themes.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
That is why it's preferable to <em>also</em> load the <code>sass/base</code> folder and the <code>sass/themes</code> folder:
|
||||
</p>
|
||||
|
||||
{% highlight sass %}{{ base_loads }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Importing columns" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Layout features like Bulma's columns don't rely on CSS variables defined by Bulma themes. As a result, you can load them directly without requiring any additional file.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
For example, importing Bulma <strong>columns</strong> only requires to load the file located in the <code>bulma/sass/grid</code> folder.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Simply <strong>load</strong> the <code>columns.scss</code> file with the <code>@use</code> keyword
|
||||
</p>
|
||||
{% highlight sass %}{{ import }}{% endhighlight %}
|
||||
<p>
|
||||
Now you can use the classes <code>.columns</code> (for the container) and
|
||||
<code>.column</code> directly:
|
||||
</p>
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Importing Bulma elements and components" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To load Bulma elements like the <code>.button</code> and components like the <code>.message</code>, it's preferable to also load the base styles and default themes.
|
||||
</p>
|
||||
|
||||
{% highlight sass %}{{ only_button }}{% endhighlight %}
|
||||
|
||||
<p>You can now use the <code>.button</code> class, and all its modifiers:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<code>.is-active</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-primary</code>, <code>.is-info</code>,
|
||||
<code>.is-success</code>...
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-small</code>, <code>.is-medium</code>,
|
||||
<code>.is-large</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-outlined</code>, <code>.is-inverted</code>,
|
||||
<code>.is-link</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.is-loading</code>,
|
||||
<code>[disabled]</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% capture configuration %}
|
||||
$section-padding: 3rem 1.5rem !default;
|
||||
$section-padding-desktop: 3rem 3rem !default;
|
||||
$section-padding-medium: 9rem 4.5rem !default;
|
||||
$section-padding-large: 18rem 6rem !default;
|
||||
{% endcapture %}
|
||||
|
||||
{% capture custom_section %}
|
||||
// Load the section component with custom variables
|
||||
@use "bulma/sass/layout/section" with (
|
||||
$section-padding: 3rem,
|
||||
$section-padding-desktop: 4.5rem
|
||||
);
|
||||
{% endcapture %}
|
||||
|
||||
{% include docs/elements/anchor.html name="Importing with custom Sass variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Most Bulma components are configured with Sass variables. For example, the <code>.section</code> layout component uses 4 variables to define its padding:
|
||||
</p>
|
||||
{% highlight sass %}{{ configuration }}{% endhighlight %}
|
||||
<p>
|
||||
The <code>@use</code> keyword allows use to configure a module when loading it with our own variables:
|
||||
</p>
|
||||
{% highlight sass %}{{ custom_section }}{% endhighlight %}
|
||||
</div>
|
||||
64
docs/documentation/start/overview.html
Normal file
64
docs/documentation/start/overview.html
Normal file
@@ -0,0 +1,64 @@
|
||||
---
|
||||
title: Overview of Bulma
|
||||
layout: docs
|
||||
theme: start
|
||||
doc-tab: start
|
||||
doc-subtab: overview
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- start
|
||||
- start-overview
|
||||
---
|
||||
<div class="content">
|
||||
<p>Bulma is a <strong>CSS library</strong>. This means it provides CSS classes to help you style your HTML code.</p>
|
||||
<p>To use Bulma, you can either:</p>
|
||||
<ul>
|
||||
<li>use one of the pre-compiled <code>.css</code> files</li>
|
||||
<li>or install the <code>.scss</code> files so you can customize Bulma to your needs</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Code requirements" %}
|
||||
|
||||
<div class="content">
|
||||
<p>For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.</p>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">Use the <strong>HTML5 doctype</strong></p>
|
||||
{% highlight html %}
|
||||
<!doctype html>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
<div class="media-content">
|
||||
<p class="title is-5">Add the responsive <strong>viewport</strong> meta tag</p>
|
||||
{% highlight html -%}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
|
||||
{% include docs/elements/anchor.html name="Starter template" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>.
|
||||
Just copy/paste this code in a file and save it on your computer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-example bd-highlight-full">
|
||||
{% highlight html -%}
|
||||
{%- include docs/snippets/getting-started.html -%}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
114
docs/documentation/start/responsiveness.html
Normal file
114
docs/documentation/start/responsiveness.html
Normal file
@@ -0,0 +1,114 @@
|
||||
---
|
||||
title: How to install Bulma
|
||||
layout: docs
|
||||
theme: start
|
||||
doc-tab: start
|
||||
doc-subtab: responsiveness
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- start
|
||||
- start-responsiveness
|
||||
---
|
||||
{% capture scss_code %}
|
||||
// Disable the widescreen breakpoint
|
||||
$widescreen-enabled: false;
|
||||
|
||||
// Disable the fullhd breakpoint
|
||||
$fullhd-enabled: false;
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include docs/elements/anchor.html name="Vertical by
|
||||
default"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Every element in Bulma is <strong>mobile-first</strong> and optimizes for <strong>vertical reading</strong>, so by
|
||||
default on mobile:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>columns</code> are stacked vertically</li>
|
||||
<li>the <code>level</code> component will show its children stacked vertically</li>
|
||||
<li>the <code>nav</code> menu will be hidden</li>
|
||||
</ul>
|
||||
<p>
|
||||
You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or
|
||||
<code>level</code> by appending the <code>is-mobile</code> modifier.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/elements/anchor.html name="Breakpoints" %}
|
||||
{% assign variables_file_url = '/blob/master/sass/utilities/initial-variables.sass#L56,L64'
|
||||
| prepend: site.data.meta.github
|
||||
%}
|
||||
{% assign mixins_file_url = '/blob/master/sass/utilities/mixins.sass#L81,L129' | prepend: site.data.meta.github %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma has
|
||||
<a href="{{ variables_file_url }}" target="_blank">4 breakpoints</a> which defines <strong>5 screen sizes</strong>:
|
||||
</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<li>
|
||||
<code>{{ breakpoint.id }}</code>:
|
||||
{% if breakpoint.id == 'mobile' -%}
|
||||
up to <code>{{ breakpoint.to }}px</code>
|
||||
{%- else -%}
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
{%- endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
To make use of these breakpoints, Bulma provides
|
||||
<a href="{{ site.url }}/documentation/utilities/responsive-mixins/">9 responsive mixins</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include docs/components/breakpoints-table.html %}
|
||||
{% assign urm_link = site.data.links.by_id['utilities-responsive-mixins'] %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To simplify using these breakpoints, Bulma provides
|
||||
<a href="{{ site.url }}{{ urm_link.path }}">easy-to-use responsive mixins</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
|
||||
{% if vernum >= 70 %}
|
||||
{%
|
||||
include docs/elements/anchor.html name="Disabling
|
||||
breakpoints"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>$widescreen</code> and <code>$fullhd</code> breakpoints are <strong>enabled</strong>. You
|
||||
can disable them by setting the corresponding Sass boolean to <code>false</code>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight sass -%}
|
||||
{{- scss_code -}}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% capture custom_message %}
|
||||
These are
|
||||
<a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a
|
||||
value that <strong>references</strong> another variable.
|
||||
{% endcapture %}
|
||||
|
||||
{%
|
||||
include docs/components/variables.html type='element'
|
||||
variables_keys=page.variables_keys custom_message=custom_message
|
||||
folder='utilities' file='initial-variables'
|
||||
%}
|
||||
186
docs/documentation/start/syntax.html
Normal file
186
docs/documentation/start/syntax.html
Normal file
@@ -0,0 +1,186 @@
|
||||
---
|
||||
title: Bulma's Modifiers Syntax
|
||||
layout: docs
|
||||
theme: start
|
||||
doc-tab: start
|
||||
doc-subtab: syntax
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- start
|
||||
- start-syntax
|
||||
---
|
||||
|
||||
{% capture button_example %}
|
||||
<button class="button">Button</button>
|
||||
{% endcapture %} {% capture button_primary_example %}
|
||||
<button class="button is-primary">Button</button>
|
||||
{% endcapture %} {% capture button_colors %}
|
||||
<button class="button is-primary">Button</button>
|
||||
<button class="button is-link">Button</button>
|
||||
<button class="button is-info">Button</button>
|
||||
<button class="button is-success">Button</button>
|
||||
<button class="button is-warning">Button</button>
|
||||
<button class="button is-danger">Button</button>
|
||||
{% endcapture %} {% capture button_sizes %}
|
||||
<button class="button is-small">Button</button>
|
||||
<button class="button">Button</button>
|
||||
<button class="button is-medium">Button</button>
|
||||
<button class="button is-large">Button</button>
|
||||
{% endcapture %} {% capture button_states %}
|
||||
<button class="button is-primary is-outlined">Button</button>
|
||||
<button class="button is-loading">Button</button>
|
||||
<button class="button" disabled>Button</button>
|
||||
{% endcapture %} {% capture button_combinations %}
|
||||
<button class="button is-primary is-small" disabled>Button</button>
|
||||
<button class="button is-info is-loading">Button</button>
|
||||
<button class="button is-danger is-outlined is-large">Button</button>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>
|
||||
Let's start with a simple <strong>button</strong> that uses the
|
||||
<code>"button"</code> CSS class:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>{{button_example}}</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<p>
|
||||
By <strong>adding</strong> the <code>"is-primary"</code> CSS class, you
|
||||
can modify the <strong>color</strong>:
|
||||
</p>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p>{{button_primary_example}}</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{button_primary_example}}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can use one of the <strong>6 main colors</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-primary</code></li>
|
||||
<li><code>is-link</code></li>
|
||||
<li><code>is-info</code></li>
|
||||
<li><code>is-success</code></li>
|
||||
<li><code>is-warning</code></li>
|
||||
<li><code>is-danger</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<button class="button is-primary">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-link">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-info">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-success">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-warning">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-danger">Button</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html %}{{ button_colors }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>You can also alter the <strong>size</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-small</code></li>
|
||||
<li><code>is-medium</code></li>
|
||||
<li><code>is-large</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<button class="button is-small">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-medium">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-large">Button</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_sizes }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
<p>Or the <strong>style</strong> or <strong>state</strong>:</p>
|
||||
<ul>
|
||||
<li><code>is-outlined</code></li>
|
||||
<li><code>is-loading</code></li>
|
||||
<li><code>[disabled]</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<button class="button is-primary is-outlined">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-loading">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button" disabled>Button</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_states }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="content">
|
||||
As a result, it's very easy to <strong>combine modifiers:</strong>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<p class="field">
|
||||
<button class="button is-primary is-small" disabled>Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-info is-loading">Button</button>
|
||||
</p>
|
||||
<p class="field">
|
||||
<button class="button is-danger is-outlined is-large">Button</button>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-half">
|
||||
{% highlight html %}{{ button_combinations }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user