library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add modifiers links

Browse Source
This commit is contained in:
Jeremy Thomas 2018-04-09 17:11:24 +01:00
parent 5d4e3582f0
commit 425860f56f
8 changed files with 780 additions and 741 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
docs/_data/links.json
View File

@ -8,6 +8,30 @@
"name": "Documentation",
"path": "/documentation"
},
"modifiers": {
"name": "Modifiers",
"path": "/documentation/modifiers"
},
"modifiers-syntax": {
"name": "Syntax",
"path": "/documentation/modifiers/syntax"
},
"modifiers-helpers": {
"name": "Helpers",
"path": "/documentation/modifiers/helpers"
},
"modifiers-responsive-helpers": {
"name": "Responsive helpers",
"path": "/documentation/modifiers/responsive-helpers"
},
"modifiers-color-helpers": {
"name": "Color helpers",
"path": "/documentation/modifiers/color-helpers"
},
"modifiers-typography-helpers": {
"name": "Typography helpers",
"path": "/documentation/modifiers/typography-helpers"
},
"columns": {
"name": "Columns",
"path": "/documentation/columns"
@ -191,6 +215,7 @@
},
"order": {
"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"],
"elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]

31
docs/_sass/main.sass
View File

@ -7,7 +7,6 @@ $main-spacing: 2.5rem
// Lead
.bd-lead
// border: 1px solid lightskyblue
position: relative
.bd-breadcrumb
@ -39,17 +38,23 @@ $main-spacing: 2.5rem
padding-bottom: $main-spacing
.subtitle
color: $text-light
max-width: 21em
strong
color: currentColor
#meta
margin-top: -0.5rem
.bd-content
hr:first-child
display: none
& + .bd-anchor-title
padding-top: 0
// Side
.bd-side,
.bd-side-background
background-color: $white-bis
// border: 1px solid coral
.bd-side
position: relative
@ -65,6 +70,8 @@ $main-spacing: 2.5rem
.bd-lead,
.bd-side
padding: 1.5rem
.bd-header-carbon
margin-top: 1.5rem
+mobile
.bd-side-background
@ -78,16 +85,6 @@ $main-spacing: 2.5rem
overflow: hidden
flex-grow: 1
flex-shrink: 1
.bd-header
display: flex
.bd-header-titles
flex-grow: 1
flex-shrink: 1
.bd-header-carbon
flex-grow: 0
flex-shrink: 0
margin-left: 1.5rem
width: $carbon-width
.bd-prev-next
display: flex
.bd-side
@ -99,5 +96,15 @@ $main-spacing: 2.5rem
.bd-lead
margin-left: -3rem
padding: 3rem
.bd-header
display: flex
.bd-header-titles
flex-grow: 1
flex-shrink: 1
.bd-header-carbon
flex-grow: 0
flex-shrink: 0
margin-left: 1.5rem
width: $carbon-width
.bd-side
padding: 3rem 0 3rem 1.5rem

38
docs/css/bulma-docs.css
View File

@ -9534,6 +9534,7 @@ label.panel-block:hover {
.bd-header .subtitle {
color: #7a7a7a;
max-width: 21em;
}
.bd-header .subtitle strong {
@ -9544,6 +9545,14 @@ label.panel-block:hover {
margin-top: -0.5rem;
}
.bd-content hr:first-child {
display: none;
}
.bd-content hr:first-child + .bd-anchor-title {
padding-top: 0;
}
.bd-side,
.bd-side-background {
background-color: #fafafa;
@ -9566,6 +9575,9 @@ label.panel-block:hover {
.bd-side {
padding: 1.5rem;
}
.bd-header-carbon {
margin-top: 1.5rem;
}
}
@media screen and (max-width: 768px) {
@ -9584,19 +9596,6 @@ label.panel-block:hover {
flex-grow: 1;
flex-shrink: 1;
}
.bd-header {
display: flex;
}
.bd-header-titles {
flex-grow: 1;
flex-shrink: 1;
}
.bd-header-carbon {
flex-grow: 0;
flex-shrink: 0;
margin-left: 1.5rem;
width: 300px;
}
.bd-prev-next {
display: flex;
}
@ -9613,6 +9612,19 @@ label.panel-block:hover {
margin-left: -3rem;
padding: 3rem;
}
.bd-header {
display: flex;
}
.bd-header-titles {
flex-grow: 1;
flex-shrink: 1;
}
.bd-header-carbon {
flex-grow: 0;
flex-shrink: 0;
margin-left: 1.5rem;
width: 300px;
}
.bd-side {
padding: 3rem 0 3rem 1.5rem;
}

18
docs/documentation/modifiers/color-helpers.html
View File

@ -1,19 +1,16 @@
---
title: Color helpers
subtitle: "Change the <strong>color</strong> of the text and/or background"
layout: documentation
doc-tab: modifiers
doc-subtab: color-helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-color-helpers
---
{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
<h1 class="title">Color helpers</h1>
<h2 class="subtitle">
Change the <strong>color</strong> of the text and/or background
</h2>
{% include anchor.html name="Text color" %}
<div class="content">
@ -99,6 +96,3 @@ doc-subtab: color-helpers
<tr><td><code>has-background-white-bis</code></td><td>{% include color/white-bis.html %}</td></tr>
</tbody>
</table>
</div>
</section>

15
docs/documentation/modifiers/helpers.html
View File

@ -1,17 +1,16 @@
---
title: Helpers
subtitle: "You can apply <strong>helper classes</strong> to almost any element, in order to alter its style."
layout: documentation
doc-tab: modifiers
doc-subtab: helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-helpers
---
{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
<h1 class="title">Helpers</h1>
<h2 class="subtitle">You can apply <strong>helper classes</strong> to almost any element, in order to alter its style.</h2>
<hr>
<table class="table is-bordered">
<tbody>
<tr>
@ -62,5 +61,3 @@ doc-subtab: helpers
</tr>
</tbody>
</table>
</div>
</section>

15
docs/documentation/modifiers/responsive-helpers.html
View File

@ -1,8 +1,14 @@
---
title: Responsive helpers
subtitle: "<strong>Show/hide content</strong> depending on the width of the viewport"
layout: documentation
doc-tab: modifiers
doc-subtab: responsive-helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-responsive-helpers
---
{% capture thead %}
@ -52,13 +58,6 @@ doc-subtab: responsive-helpers
</td>
{% endcapture %}
{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
<h1 class="title">Responsive helpers</h1>
<h2 class="subtitle"><strong>Show/hide content</strong> depending on the width of the viewport</h2>
{% include anchor.html name="Show" %}
<div class="content">
@ -284,5 +283,3 @@ doc-subtab: responsive-helpers
</tr>
</tbody>
</table>
</div>
</section>

19
docs/documentation/modifiers/syntax.html
View File

@ -1,12 +1,16 @@
---
title: Modifiers syntax
subtitle: "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.<br>They all start with <code>is-</code> or <code>has-</code>.</h2>"
layout: documentation
doc-tab: modifiers
doc-subtab: syntax
breadcrumb:
- home
- documentation
- modifiers
- modifiers-syntax
---
{% include subnav/subnav-modifiers.html %}
{% capture button_example %}
<a class="button">
Button
@ -19,13 +23,6 @@ doc-subtab: syntax
</a>
{% endcapture %}
<section class="section">
<div class="container">
<h1 class="title">Modifiers syntax</h1>
<h2 class="subtitle">Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>.
<br>
They all start with <code>is-</code> or <code>has-</code>.</h2>
<hr>
<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>
@ -111,6 +108,7 @@ doc-subtab: syntax
</div>
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
@ -153,6 +151,7 @@ doc-subtab: syntax
{% endhighlight %}
</div>
</div>
<div class="columns">
<div class="column">
<div class="content">
@ -189,5 +188,3 @@ doc-subtab: syntax
{% endhighlight %}
</div>
</div>
</div>
</section>

34
docs/documentation/modifiers/typography-helpers.html
View File

@ -1,8 +1,14 @@
---
title: Typography helpers
subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
layout: documentation
doc-tab: modifiers
doc-subtab: typography-helpers
breadcrumb:
- home
- documentation
- modifiers
- modifiers-typography-helpers
---
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
@ -49,15 +55,6 @@ doc-subtab: typography-helpers
</td>
{% endcapture %}
{% include subnav/subnav-modifiers.html %}
<section class="section">
<div class="container">
<h1 class="title">Typography helpers</h1>
<h2 class="subtitle">
Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width
</h2>
{% include anchor.html name="Size" %}
<div class="content">
@ -99,6 +96,10 @@ doc-subtab: typography-helpers
</p>
</div>
{% include layout/main-close.html %}
<div class="container">
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
@ -152,6 +153,10 @@ doc-subtab: typography-helpers
</tr>
</tbody>
</table>
</div>
</div>
{% include layout/main-open.html %}
<div class="content">
<p>
@ -252,6 +257,10 @@ doc-subtab: typography-helpers
</p>
</div>
{% include layout/main-close.html %}
<div class="container">
<div class="table-container">
<table class="table is-bordered">
{{ thead }}
<tbody>
@ -329,6 +338,10 @@ doc-subtab: typography-helpers
</tr>
</tbody>
</table>
</div>
</div>
{% include layout/main-open.html %}
{% include anchor.html name="Text transformation" %}
@ -407,6 +420,3 @@ doc-subtab: typography-helpers
</tr>
</tbody>
</table>
</div>
</section>