mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Update overview
This commit is contained in:
Jeremy Thomas
parent
425860f56f
commit
e9dd9eb80e
@ -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,19 +1,16 @@
|
||||
---
|
||||
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:
|
||||
@ -34,5 +31,3 @@ doc-subtab: classes
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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,15 +31,6 @@ 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">
|
||||
<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>.
|
||||
@ -123,5 +120,3 @@ shades:
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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,15 +55,6 @@ $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">
|
||||
<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>
|
||||
@ -109,5 +106,3 @@ $colors: map-merge($colors, $addColors);
|
||||
</figure>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
---
|
||||
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">
|
||||
<p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
|
||||
<ul>
|
||||
@ -232,5 +229,3 @@ doc-subtab: functions
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
---
|
||||
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>
|
||||
<td><code>=arrow($color)</code></td>
|
||||
@ -68,5 +65,3 @@ doc-subtab: mixins
|
||||
<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>
|
||||
|
||||
@ -1,18 +1,53 @@
|
||||
---
|
||||
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 %}
|
||||
|
||||
{% 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>
|
||||
@ -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 %}
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -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,13 +25,6 @@ $widescreen-enabled: false
|
||||
$fullhd-enabled: false
|
||||
{% endcapture %}
|
||||
|
||||
{% include subnav/subnav-overview.html %}
|
||||
|
||||
<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">
|
||||
@ -257,6 +256,3 @@ $fullhd-enabled: false
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
---
|
||||
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">
|
||||
<p>
|
||||
There are several ways to <strong>get started</strong> with Bulma. You can either:
|
||||
@ -135,6 +132,3 @@ doc-subtab: start
|
||||
<a class="button is-link" href="/bulma-start/">Check it out</a>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -1,19 +1,16 @@
|
||||
---
|
||||
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 %}
|
||||
|
||||
<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 %}
|
||||
@ -116,6 +113,3 @@ doc-subtab: variables
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user