mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Update overview
This commit is contained in:
Jeremy Thomas
@@ -8,6 +8,42 @@
|
||||
"name": "Documentation",
|
||||
"path": "/documentation"
|
||||
},
|
||||
"overview": {
|
||||
"name": "Overview",
|
||||
"path": "/documentation/overview"
|
||||
},
|
||||
"overview-start": {
|
||||
"name": "Start",
|
||||
"path": "/documentation/overview/start"
|
||||
},
|
||||
"overview-classes": {
|
||||
"name": "Classes",
|
||||
"path": "/documentation/overview/classes"
|
||||
},
|
||||
"overview-modular": {
|
||||
"name": "Modular",
|
||||
"path": "/documentation/overview/modular"
|
||||
},
|
||||
"overview-responsiveness": {
|
||||
"name": "Responsiveness",
|
||||
"path": "/documentation/overview/responsiveness"
|
||||
},
|
||||
"overview-variables": {
|
||||
"name": "Variables",
|
||||
"path": "/documentation/overview/variables"
|
||||
},
|
||||
"overview-colors": {
|
||||
"name": "Colors",
|
||||
"path": "/documentation/overview/colors"
|
||||
},
|
||||
"overview-functions": {
|
||||
"name": "Functions",
|
||||
"path": "/documentation/overview/functions"
|
||||
},
|
||||
"overview-mixins": {
|
||||
"name": "Mixins",
|
||||
"path": "/documentation/overview/mixins"
|
||||
},
|
||||
"modifiers": {
|
||||
"name": "Modifiers",
|
||||
"path": "/documentation/modifiers"
|
||||
@@ -214,6 +250,7 @@
|
||||
}
|
||||
},
|
||||
"order": {
|
||||
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
|
||||
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
|
||||
|
||||
@@ -77,6 +77,8 @@ $main-spacing: 2.5rem
|
||||
.bd-side-background
|
||||
display: none
|
||||
|
||||
$sidebar-width: 16rem
|
||||
|
||||
+tablet
|
||||
.bd-duo
|
||||
display: flex
|
||||
@@ -88,7 +90,7 @@ $main-spacing: 2.5rem
|
||||
.bd-prev-next
|
||||
display: flex
|
||||
.bd-side
|
||||
flex: 0 0 calc(#{$carbon-width} + 1.5rem)
|
||||
flex: 0 0 calc(#{$sidebar-width} + 1.5rem)
|
||||
|
||||
+desktop
|
||||
.bd-main
|
||||
@@ -97,14 +99,16 @@ $main-spacing: 2.5rem
|
||||
margin-left: -3rem
|
||||
padding: 3rem
|
||||
.bd-header
|
||||
align-items: center
|
||||
display: flex
|
||||
min-height: 130px
|
||||
.bd-header-titles
|
||||
flex-grow: 1
|
||||
flex-shrink: 1
|
||||
.bd-header-carbon
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
margin-left: 1.5rem
|
||||
margin: -15px 0 -15px 1.5rem
|
||||
width: $carbon-width
|
||||
.bd-side
|
||||
padding: 3rem 0 3rem 1.5rem
|
||||
|
||||
@@ -9600,7 +9600,7 @@ label.panel-block:hover {
|
||||
display: flex;
|
||||
}
|
||||
.bd-side {
|
||||
flex: 0 0 calc(300px + 1.5rem);
|
||||
flex: 0 0 calc(16rem + 1.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9613,7 +9613,9 @@ label.panel-block:hover {
|
||||
padding: 3rem;
|
||||
}
|
||||
.bd-header {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
min-height: 130px;
|
||||
}
|
||||
.bd-header-titles {
|
||||
flex-grow: 1;
|
||||
@@ -9622,7 +9624,7 @@ label.panel-block:hover {
|
||||
.bd-header-carbon {
|
||||
flex-grow: 0;
|
||||
flex-shrink: 0;
|
||||
margin-left: 1.5rem;
|
||||
margin: -15px 0 -15px 1.5rem;
|
||||
width: 300px;
|
||||
}
|
||||
.bd-side {
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
---
|
||||
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">
|
||||
<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>
|
||||
@@ -33,6 +30,4 @@ doc-subtab: classes
|
||||
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>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Colors
|
||||
subtitle: "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: colors
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-colors
|
||||
colors:
|
||||
- white
|
||||
- black
|
||||
@@ -25,25 +31,16 @@ shades:
|
||||
- white-bis
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Colors</h1>
|
||||
<h2 class="subtitle">The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
Most elements and components have color variations thanks to <strong>modifiers</strong> with syntax <code>.is-$color</code>, like <code>is-primary</code> or <code>is-dark</code>.
|
||||
</p>
|
||||
<p>
|
||||
This is thanks to the <code>$colors</code> <strong>Sass map</strong>, through which Bulma cycles to grab all the colors and their inverts.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
@@ -90,15 +87,15 @@ shades:
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma also provides a <code>$shades</code> <strong>Sass map</strong>, that only contains shades of grey between black and white.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Color</th>
|
||||
@@ -122,6 +119,4 @@ shades:
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
</table>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Customize Bulma
|
||||
title: Customize Bulma with Sass
|
||||
subtitle: "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: customize
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-customize
|
||||
---
|
||||
|
||||
{% capture scss_code %}
|
||||
@@ -49,20 +55,11 @@ $colors: map-merge($colors, $addColors);
|
||||
@import "../bulma";
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Customizing with Sass</h1>
|
||||
<h2 class="subtitle">Create your <strong>own theme</strong> with a simple set of <strong>variables</strong></h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
@@ -73,9 +70,9 @@ $colors: map-merge($colors, $addColors);
|
||||
{% 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>
|
||||
|
||||
<article class="media is-large">
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
@@ -90,9 +87,9 @@ $colors: map-merge($colors, $addColors);
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
@@ -108,6 +105,4 @@ $colors: map-merge($colors, $addColors);
|
||||
<img width="640" height="640" src="{{site.url}}/images/customize-after.png" alt="Customizing Bulma with Sass">
|
||||
</figure>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
||||
@@ -1,31 +1,28 @@
|
||||
---
|
||||
title: Functions
|
||||
subtitle: "Utility functions to calculate colors and other values"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: functions
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-functions
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Functions</h1>
|
||||
<h2 class="subtitle">Utility functions to calculate colors and other values</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
|
||||
<ul>
|
||||
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
|
||||
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
|
||||
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="The <code>findColorInvert()</code> function" %}
|
||||
{% include anchor.html name="The <code>findColorInvert()</code> function" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
|
||||
<ul>
|
||||
<li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
|
||||
@@ -231,6 +228,4 @@ doc-subtab: functions
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,72 +1,67 @@
|
||||
---
|
||||
title: Mixins
|
||||
subtitle: "Utility mixins for custom elements and responsive helpers"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Mixins</h1>
|
||||
<h2 class="subtitle">Utility mixins for custom elements and responsive helpers</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<tr>
|
||||
<tr>
|
||||
<td><code>=arrow($color)</code></td>
|
||||
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=block</code></td>
|
||||
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=clearfix</code></td>
|
||||
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=center($size)</code></td>
|
||||
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=delete</code></td>
|
||||
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=fa($size, $dimensions)</code></td>
|
||||
<td>Sets the style of a Font Awesome icon container.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=hamburger($dimensions)</code></td>
|
||||
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=loader</code></td>
|
||||
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overflow-touch</code></td>
|
||||
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=overlay($offset: 0)</code></td>
|
||||
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=placeholder</code></td>
|
||||
<td>Sets the styles of an input placeholder.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>=unselectable</code></td>
|
||||
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
|
||||
</tr>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,20 +1,55 @@
|
||||
---
|
||||
title: Modularity
|
||||
subtitle: "Just import what you <strong>need</strong>"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: modular
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-modular
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
{% capture import %}
|
||||
@import "bulma/sass/utilities/_all"
|
||||
@import "bulma/sass/grid/columns"
|
||||
{% endcapture %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Modular</h1>
|
||||
<h2 class="subtitle">Just import what you <strong>need</strong></h2>
|
||||
{% 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 %}
|
||||
|
||||
<hr>
|
||||
{% capture only_button %}
|
||||
@import "bulma/sass/utilities/_all"
|
||||
@import "bulma/sass/elements/button.sass"
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
{% capture buttons %}
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
|
||||
<a class="button is-primary">
|
||||
Primary button
|
||||
</a>
|
||||
|
||||
<a class="button is-large">
|
||||
Large button
|
||||
</a>
|
||||
|
||||
<a class="button is-loading">
|
||||
Loading button
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
||||
</p>
|
||||
@@ -25,32 +60,18 @@ doc-subtab: modular
|
||||
<br>
|
||||
Simply <strong>import</strong> the utilities dependencies, and then the files you need directly:
|
||||
</p>
|
||||
{% highlight sass %}
|
||||
@import "bulma/sass/utilities/_all"
|
||||
@import "bulma/sass/grid/columns"
|
||||
{% endhighlight %}
|
||||
{% 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 %}
|
||||
<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>
|
||||
{% endhighlight %}
|
||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||
|
||||
<hr>
|
||||
|
||||
<p>
|
||||
What if you only want the <strong>button</strong> styles instead?
|
||||
</p>
|
||||
{% highlight sass %}
|
||||
@import "bulma/sass/utilities/_all"
|
||||
@import "bulma/sass/elements/button.sass"
|
||||
{% endhighlight %}
|
||||
{% highlight sass %}{{ only_button }}{% endhighlight %}
|
||||
<p>
|
||||
You can now use the <code>.button</code> class, and all its modifiers:
|
||||
</p>
|
||||
@@ -78,23 +99,5 @@ doc-subtab: modular
|
||||
<code>[disabled]</code>
|
||||
</li>
|
||||
</ul>
|
||||
{% highlight html %}
|
||||
<a class="button">
|
||||
Button
|
||||
</a>
|
||||
|
||||
<a class="button is-primary">
|
||||
Primary button
|
||||
</a>
|
||||
|
||||
<a class="button is-large">
|
||||
Large button
|
||||
</a>
|
||||
|
||||
<a class="button is-loading">
|
||||
Loading button
|
||||
</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,14 @@
|
||||
---
|
||||
title: Responsiveness
|
||||
subtitle: "Bulma is a <strong>mobile-first</strong> framework"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: responsiveness
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-responsiveness
|
||||
variables_keys:
|
||||
- gap
|
||||
- tablet
|
||||
@@ -19,16 +25,9 @@ $widescreen-enabled: false
|
||||
$fullhd-enabled: false
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
{% include anchor.html name="Vertical by default" %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Responsiveness</h1>
|
||||
<h2 class="subtitle">Bulma is a <strong>mobile-first</strong> framework</h2>
|
||||
|
||||
{% include anchor.html name="Vertical by default" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
@@ -38,14 +37,14 @@ $fullhd-enabled: false
|
||||
<li>the <code>nav</code> menu will be hidden</li>
|
||||
</ul>
|
||||
<p>For example, you can enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Breakpoints" %}
|
||||
{% include anchor.html name="Breakpoints" %}
|
||||
|
||||
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
|
||||
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
|
||||
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
|
||||
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
@@ -87,9 +86,9 @@ $fullhd-enabled: false
|
||||
{% endcase %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
@@ -206,31 +205,31 @@ $fullhd-enabled: false
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Disabling breakpoints" %}
|
||||
{% include anchor.html name="Disabling breakpoints" %}
|
||||
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
{% include elements/new-tag.html version="0.6.3" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
By default, the <code>$widecreen</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>
|
||||
|
||||
<div class="highlight-full">
|
||||
<div class="highlight-full">
|
||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Variables" %}
|
||||
{% include anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@@ -256,7 +255,4 @@ $fullhd-enabled: false
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</table>
|
||||
|
||||
@@ -1,20 +1,17 @@
|
||||
---
|
||||
title: Get started with Bulma
|
||||
title: Getting started with Bulma
|
||||
subtitle: "You only need <strong>1 CSS file</strong> to use Bulma"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: start
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-start
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Getting started</h1>
|
||||
<h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
There are several ways to <strong>get started</strong> with Bulma. You can either:
|
||||
</p>
|
||||
@@ -29,9 +26,9 @@ doc-subtab: start
|
||||
use the <strong>GitHub repository</strong> to get the latest development version
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
@@ -41,9 +38,9 @@ doc-subtab: start
|
||||
</p>
|
||||
{% highlight bash %}npm install bulma{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
@@ -54,9 +51,9 @@ doc-subtab: start
|
||||
<a href="https://cdnjs.com/libraries/bulma">https://cdnjs.com/libraries/bulma</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">3</p>
|
||||
</div>
|
||||
@@ -67,11 +64,11 @@ doc-subtab: start
|
||||
<a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
|
||||
</p>
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
<hr>
|
||||
<hr>
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message is-info">
|
||||
<div class="message-header">
|
||||
Font Awesome icons
|
||||
</div>
|
||||
@@ -79,17 +76,17 @@ doc-subtab: start
|
||||
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fontawesome.com">Font Awesome 5</a>:</p>
|
||||
{% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Code requirements" %}
|
||||
{% include anchor.html name="Code requirements" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
For Bulma to work correctly, you need to make your webpage <strong>responsive</strong>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<article class="media is-large">
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">1</p>
|
||||
</div>
|
||||
@@ -99,9 +96,9 @@ doc-subtab: start
|
||||
</p>
|
||||
{% highlight html %}<!DOCTYPE html>{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
<article class="media is-large">
|
||||
<article class="media is-large">
|
||||
<div class="media-left">
|
||||
<p class="title is-5">2</p>
|
||||
</div>
|
||||
@@ -111,30 +108,27 @@ doc-subtab: start
|
||||
</p>
|
||||
{% highlight html %}<meta name="viewport" content="width=device-width, initial-scale=1">{% endhighlight %}
|
||||
</div>
|
||||
</article>
|
||||
</article>
|
||||
|
||||
{% include anchor.html name="Starter template" %}
|
||||
{% include anchor.html name="Starter template" %}
|
||||
|
||||
<div class="content">
|
||||
<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>
|
||||
|
||||
<div class="bd-example highlight-full">
|
||||
<div class="bd-example highlight-full">
|
||||
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="bulma-start" %}
|
||||
{% include anchor.html name="bulma-start" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
<code><a href="/bulma-start/">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> dependencies you need to build your own website with Bulma.
|
||||
</p>
|
||||
<p>
|
||||
<a class="button is-link" href="/bulma-start/">Check it out</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@@ -1,25 +1,22 @@
|
||||
---
|
||||
title: Variables
|
||||
subtitle: "Easily <strong>customize</strong> Bulma to match your design"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: variables
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-variables
|
||||
---
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
|
||||
{% assign initial_vars = initial_variables.vars %}
|
||||
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
|
||||
{% assign derived_vars = derived_variables.vars %}
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title">Variables</h1>
|
||||
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
|
||||
{% assign initial_vars = initial_variables.vars %}
|
||||
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
|
||||
{% assign derived_vars = derived_variables.vars %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
||||
<ol>
|
||||
<li>
|
||||
@@ -64,17 +61,17 @@ doc-subtab: variables
|
||||
<p>
|
||||
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include anchor.html name="Initial variables" %}
|
||||
{% include anchor.html name="Initial variables" %}
|
||||
|
||||
<div class="content">
|
||||
<div class="content">
|
||||
<p>
|
||||
These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered is-striped">
|
||||
<table class="table is-bordered is-striped">
|
||||
<tbody>
|
||||
{% for variable_hash in initial_vars %}
|
||||
{% assign variable = variable_hash[1] %}
|
||||
@@ -92,30 +89,27 @@ doc-subtab: variables
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
</table>
|
||||
</table>
|
||||
|
||||
{% capture custom_message %}
|
||||
{% 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 %}
|
||||
{%
|
||||
{% endcapture %}
|
||||
{%
|
||||
include variables.html
|
||||
anchor_name = 'Derived variables'
|
||||
data = derived_variables
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
%}
|
||||
|
||||
{% capture custom_message %}
|
||||
{% capture custom_message %}
|
||||
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
{% endcapture %}
|
||||
{%
|
||||
{% endcapture %}
|
||||
{%
|
||||
include variables.html
|
||||
anchor_name = 'Generic variables'
|
||||
tab = 'base'
|
||||
subtab = 'generic'
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
%}
|
||||
|
||||
Reference in New Issue
Block a user