mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Add tags
This commit is contained in:
Jeremy Thomas
parent
cd4a7b54e6
commit
24bc5ed795
44
docs/_includes/meta.html
Normal file
44
docs/_includes/meta.html
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
<div class="field is-grouped">
|
||||||
|
|
||||||
|
{% if include.since %}
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag">Since</span>
|
||||||
|
<span class="tag is-info">{{ include.since }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag">Colors</span>
|
||||||
|
{% if include.colors %}
|
||||||
|
<a class="tag is-success" href="#colors">Yes</a>
|
||||||
|
{% else %}
|
||||||
|
<span class="tag is-danger">No</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag">Sizes</span>
|
||||||
|
{% if include.sizes %}
|
||||||
|
<a class="tag is-success" href="#sizes">Yes</a>
|
||||||
|
{% else %}
|
||||||
|
<span class="tag is-danger">No</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="control">
|
||||||
|
<div class="tags has-addons">
|
||||||
|
<span class="tag">Variables</span>
|
||||||
|
{% if include.variables %}
|
||||||
|
<a class="tag is-success" href="#variables">Yes</a>
|
||||||
|
{% else %}
|
||||||
|
<span class="tag is-danger">No</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
38
docs/_includes/variables.html
Normal file
38
docs/_includes/variables.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<hr style="margin-bottom: 0;">
|
||||||
|
|
||||||
|
<h3 id="variables" class="title" style="padding-top: 1.5rem;">
|
||||||
|
Variables
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>
|
||||||
|
You can use these variables to <strong>customize</strong> this {%if include.element %}element{% else %}component{% endif %}. 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>
|
||||||
|
|
||||||
|
<table class="table is-bordered">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tfoot>
|
||||||
|
<tr>
|
||||||
|
<th>Name</th>
|
||||||
|
<th>Default value</th>
|
||||||
|
</tr>
|
||||||
|
</tfoot>
|
||||||
|
<tbody>
|
||||||
|
{% for variable in page.variables %}
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.name }}</code>
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
<code>{{ variable.value }}</code>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{% endfor %}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
@ -3282,7 +3282,6 @@ input[type="submit"].button {
|
|||||||
background-color: white;
|
background-color: white;
|
||||||
color: #363636;
|
color: #363636;
|
||||||
margin-bottom: 1.5rem;
|
margin-bottom: 1.5rem;
|
||||||
width: 100%;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table td,
|
.table td,
|
||||||
@ -3351,6 +3350,10 @@ input[type="submit"].button {
|
|||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.table.is-fullwidth {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
.table.is-narrow td,
|
.table.is-narrow td,
|
||||||
.table.is-narrow th {
|
.table.is-narrow th {
|
||||||
padding: 0.25em 0.5em;
|
padding: 0.25em 0.5em;
|
||||||
@ -3364,18 +3367,55 @@ input[type="submit"].button {
|
|||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tags {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags .tag {
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags .tag:not(:last-child) {
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags:last-child {
|
||||||
|
margin-bottom: -0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags:not(:last-child) {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags.has-addons .tag {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags.has-addons .tag:not(:first-child) {
|
||||||
|
border-bottom-left-radius: 0;
|
||||||
|
border-top-left-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tags.has-addons .tag:not(:last-child) {
|
||||||
|
border-bottom-right-radius: 0;
|
||||||
|
border-top-right-radius: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
border-radius: 290486px;
|
border-radius: 3px;
|
||||||
color: #4a4a4a;
|
color: #4a4a4a;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
height: 2em;
|
height: 2em;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
padding-left: 0.875em;
|
padding-left: 0.75em;
|
||||||
padding-right: 0.875em;
|
padding-right: 0.75em;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -3437,6 +3477,14 @@ input[type="submit"].button {
|
|||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tag.is-rounded {
|
||||||
|
border-radius: 290486px;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.tag:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
.title,
|
.title,
|
||||||
.subtitle {
|
.subtitle {
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
@ -3451,12 +3499,7 @@ input[type="submit"].button {
|
|||||||
.title span,
|
.title span,
|
||||||
.subtitle em,
|
.subtitle em,
|
||||||
.subtitle span {
|
.subtitle span {
|
||||||
font-weight: 300;
|
font-weight: inherit;
|
||||||
}
|
|
||||||
|
|
||||||
.title strong,
|
|
||||||
.subtitle strong {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.title .tag,
|
.title .tag,
|
||||||
@ -3467,12 +3510,13 @@ input[type="submit"].button {
|
|||||||
.title {
|
.title {
|
||||||
color: #363636;
|
color: #363636;
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: 300;
|
font-weight: 700;
|
||||||
line-height: 1.125;
|
line-height: 1.125;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title strong {
|
.title strong {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
font-weight: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title + .highlight {
|
.title + .highlight {
|
||||||
@ -3510,12 +3554,13 @@ input[type="submit"].button {
|
|||||||
.subtitle {
|
.subtitle {
|
||||||
color: #4a4a4a;
|
color: #4a4a4a;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 300;
|
font-weight: 400;
|
||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle strong {
|
.subtitle strong {
|
||||||
color: #363636;
|
color: #363636;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.subtitle:not(.is-spaced) + .title {
|
.subtitle:not(.is-spaced) + .title {
|
||||||
|
|||||||
@ -2,6 +2,15 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: breadcrumb
|
doc-subtab: breadcrumb
|
||||||
|
variables:
|
||||||
|
- name: $breadcrumb-item-color
|
||||||
|
value: $text-light
|
||||||
|
- name: $breadcrumb-item-hover-color
|
||||||
|
value: $link-hover
|
||||||
|
- name: $breadcrumb-item-active-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $breadcrumb-item-separator-color
|
||||||
|
value: $text
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-components.html %}
|
{% include subnav-components.html %}
|
||||||
@ -136,10 +145,17 @@ doc-subtab: breadcrumb
|
|||||||
<h2 class="subtitle">
|
<h2 class="subtitle">
|
||||||
A simple <strong>breadcrumb</strong> component to improve your navigation experience
|
A simple <strong>breadcrumb</strong> component to improve your navigation experience
|
||||||
</h2>
|
</h2>
|
||||||
|
{%
|
||||||
|
include meta.html
|
||||||
|
since="0.4.3"
|
||||||
|
variables=true
|
||||||
|
colors=false
|
||||||
|
sizes=true
|
||||||
|
%}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column is-narrow">
|
<div class="column is-narrow">
|
||||||
<p class="content">
|
<p class="tags has-addons">
|
||||||
<span class="tag is-success">New!</span>
|
<span class="tag is-success">New!</span>
|
||||||
<span class="tag is-info">0.4.3</span>
|
<span class="tag is-info">0.4.3</span>
|
||||||
</p>
|
</p>
|
||||||
@ -198,32 +214,6 @@ doc-subtab: breadcrumb
|
|||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
<h3 class="title">Sizes</h3>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="example">
|
|
||||||
{{breadcrumb_small_example}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
|
|
||||||
|
|
||||||
<div class="example">
|
|
||||||
{{breadcrumb_medium_example}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
|
|
||||||
|
|
||||||
<div class="example">
|
|
||||||
{{breadcrumb_large_example}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}{{breadcrumb_large_example}}{% endhighlight %}
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<h3 class="title">Alternative separators</h3>
|
<h3 class="title">Alternative separators</h3>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
|
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
|
||||||
@ -253,5 +243,35 @@ doc-subtab: breadcrumb
|
|||||||
|
|
||||||
{% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
|
{% highlight html %}{{breadcrumb_succeeds_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<hr style="margin-bottom: 0;">
|
||||||
|
|
||||||
|
<h3 id="sizes" class="title">
|
||||||
|
Sizes
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
{{breadcrumb_small_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{breadcrumb_small_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
{{breadcrumb_medium_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{breadcrumb_medium_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
{{breadcrumb_large_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{breadcrumb_large_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,6 +2,21 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: components
|
doc-tab: components
|
||||||
doc-subtab: card
|
doc-subtab: card
|
||||||
|
variables:
|
||||||
|
- name: $card-color
|
||||||
|
value: $text
|
||||||
|
- name: $card-background-color
|
||||||
|
value: $white
|
||||||
|
- name: $card-shadow
|
||||||
|
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||||
|
- name: $card-header-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $card-header-shadow
|
||||||
|
value: 0 1px 2px rgba($black, 0.1)
|
||||||
|
- name: $card-header-weight
|
||||||
|
value: $weight-bold
|
||||||
|
- name: $card-footer-border-top
|
||||||
|
value: 1px solid $border
|
||||||
---
|
---
|
||||||
|
|
||||||
{% capture card_example %}
|
{% capture card_example %}
|
||||||
@ -94,6 +109,12 @@ doc-subtab: card
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<h1 class="title">Card</h1>
|
<h1 class="title">Card</h1>
|
||||||
<h2 class="subtitle">An all-around flexible and composable component</h2>
|
<h2 class="subtitle">An all-around flexible and composable component</h2>
|
||||||
|
{%
|
||||||
|
include meta.html
|
||||||
|
variables=true
|
||||||
|
colors=false
|
||||||
|
sizes=false
|
||||||
|
%}
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@ -166,5 +187,7 @@ doc-subtab: card
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,6 +2,21 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: box
|
doc-subtab: box
|
||||||
|
variables:
|
||||||
|
- name: $box-color
|
||||||
|
value: $text
|
||||||
|
- name: $box-background-color
|
||||||
|
value: $white
|
||||||
|
- name: $box-radius
|
||||||
|
value: $radius-large
|
||||||
|
- name: $box-shadow
|
||||||
|
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||||
|
- name: $box-padding
|
||||||
|
value: 1.25rem
|
||||||
|
- name: $box-link-hover-shadow
|
||||||
|
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
|
||||||
|
- name: $box-link-active-shadow
|
||||||
|
value: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
@ -67,5 +82,7 @@ doc-subtab: box
|
|||||||
|
|
||||||
{% highlight html %}{{box_example}}{% endhighlight %}
|
{% highlight html %}{{box_example}}{% endhighlight %}
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,6 +2,47 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: button
|
doc-subtab: button
|
||||||
|
variables:
|
||||||
|
- name: $button-color
|
||||||
|
value: $grey-darker
|
||||||
|
- name: $button-background-color
|
||||||
|
value: $white
|
||||||
|
- name: $button-border-color
|
||||||
|
value: $grey-lighter
|
||||||
|
- name: $button-hover-color
|
||||||
|
value: $link-hover
|
||||||
|
- name: $button-hover-border-color
|
||||||
|
value: $link-hover-border
|
||||||
|
- name: $button-focus-color
|
||||||
|
value: $link-focus
|
||||||
|
- name: $button-focus-border-color
|
||||||
|
value: $link-focus-border
|
||||||
|
- name: $button-active-color
|
||||||
|
value: $link-active
|
||||||
|
- name: $button-active-border-color
|
||||||
|
value: $link-active-border
|
||||||
|
- name: $button-link-color
|
||||||
|
value: $text
|
||||||
|
- name: $button-link-hover-background-color
|
||||||
|
value: $background
|
||||||
|
- name: $button-link-hover-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $button-disabled-background-color
|
||||||
|
value: $white
|
||||||
|
- name: $button-disabled-border-color
|
||||||
|
value: $grey-lighter
|
||||||
|
- name: $button-disabled-shadow
|
||||||
|
value: none
|
||||||
|
- name: $button-disabled-opacity
|
||||||
|
value: 0.5
|
||||||
|
- name: $button-static-color
|
||||||
|
value: $grey
|
||||||
|
- name: $button-static-background-color
|
||||||
|
value: $white-ter
|
||||||
|
- name: $button-static-border-color
|
||||||
|
value: $grey-lighter
|
||||||
|
- name: $button-shadow-inset
|
||||||
|
value: inset 0 1px 2px rgba($black, 0.2)
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
@ -594,5 +635,7 @@ doc-subtab: button
|
|||||||
{{button_group_addons_example}}
|
{{button_group_addons_example}}
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,32 +2,41 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: content
|
doc-subtab: content
|
||||||
|
variables:
|
||||||
|
- name: $content-heading-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $content-heading-weight
|
||||||
|
value: $weight-normal
|
||||||
|
- name: $content-heading-line-height
|
||||||
|
value: 1.125
|
||||||
|
- name: $content-blockquote-background-color
|
||||||
|
value: $background
|
||||||
|
- name: $content-blockquote-border-left
|
||||||
|
value: 5px solid $border
|
||||||
|
- name: $content-blockquote-padding
|
||||||
|
value: 1.25em 1.5em
|
||||||
|
- name: $content-pre-padding
|
||||||
|
value: 1.25em 1.5em
|
||||||
|
- name: $content-table-cell-border
|
||||||
|
value: 1px solid $border
|
||||||
|
- name: $content-table-cell-border-width
|
||||||
|
value: 0 0 1px
|
||||||
|
- name: $content-table-cell-padding
|
||||||
|
value: 0.5em 0.75em
|
||||||
|
- name: $content-table-cell-heading-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $content-table-row-hover-background-color
|
||||||
|
value: $background
|
||||||
|
- name: $content-table-head-cell-border-width
|
||||||
|
value: 0 0 2px
|
||||||
|
- name: $content-table-head-cell-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $content-table-foot-cell-border-width
|
||||||
|
value: 2px 0 0
|
||||||
|
- name: $content-table-foot-cell-color
|
||||||
|
value: $text-strong
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="title">Content</h1>
|
|
||||||
<h2 class="subtitle">
|
|
||||||
A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
|
|
||||||
<ul>
|
|
||||||
<li><code><p></code> paragraphs</li>
|
|
||||||
<li><code><ul></code> <code><ol></code> <code><dl></code> lists</li>
|
|
||||||
<li><code><h1></code> to <code><h6></code> headings</li>
|
|
||||||
<li><code><blockquote></code> quotes</li>
|
|
||||||
<li><code><em></code> and <code><strong></code></li>
|
|
||||||
<li><code><table></code> <code><tr></code> <code><th></code> <code><td></code> tables</li>
|
|
||||||
</ul>
|
|
||||||
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% capture content_example %}
|
{% capture content_example %}
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<h1>Hello World</h1>
|
<h1>Hello World</h1>
|
||||||
@ -120,13 +129,35 @@ doc-subtab: content
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
<div class="example">
|
{% include subnav-elements.html %}
|
||||||
{{content_example}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}
|
<section class="section">
|
||||||
{{content_example}}
|
<div class="container">
|
||||||
{% endhighlight %}
|
<h1 class="title">Content</h1>
|
||||||
|
<h2 class="subtitle">
|
||||||
|
A single class to handle WYSIWYG generated content, where only <strong>HTML tags</strong> are available
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>When you can't use the CSS classes you want, or when you just want to directly use HTML tags, use <code>content</code> as container. It can handle almost any HTML tag:</p>
|
||||||
|
<ul>
|
||||||
|
<li><code><p></code> paragraphs</li>
|
||||||
|
<li><code><ul></code> <code><ol></code> <code><dl></code> lists</li>
|
||||||
|
<li><code><h1></code> to <code><h6></code> headings</li>
|
||||||
|
<li><code><blockquote></code> quotes</li>
|
||||||
|
<li><code><em></code> and <code><strong></code></li>
|
||||||
|
<li><code><table></code> <code><tr></code> <code><th></code> <code><td></code> tables</li>
|
||||||
|
</ul>
|
||||||
|
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
{{content_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{content_example}}{% endhighlight %}
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@ -176,5 +207,8 @@ doc-subtab: content
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,8 +2,24 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: icon
|
doc-subtab: icon
|
||||||
|
variables:
|
||||||
|
- name: $icon-dimensions
|
||||||
|
value: 1.5rem
|
||||||
|
- name: $icon-dimensions-small
|
||||||
|
value: 1rem
|
||||||
|
- name: $icon-dimensions-medium
|
||||||
|
value: 2rem
|
||||||
|
- name: $icon-dimensions-large
|
||||||
|
value: 3rem
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% capture icon_example %}
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-home"></i>
|
||||||
|
</span>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
@ -19,18 +35,11 @@ doc-subtab: icon
|
|||||||
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
|
<p>Because the icons can take a few seconds to load, and because you want control over the <strong>space</strong> the icons will take, you can use the <code>icon</code> class as a container:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% capture icon_example %}
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fa fa-home"></i>
|
|
||||||
</span>
|
|
||||||
{% endcapture %}
|
|
||||||
<div class="example">
|
<div class="example">
|
||||||
{{icon_example}}
|
{{icon_example}}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% highlight html %}
|
{% highlight html %}{{icon_example}}{% endhighlight %}
|
||||||
{{icon_example}}
|
|
||||||
{% endhighlight %}
|
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
<p>The <code>icon</code> container will take up <em>exactly</em> <strong>1.5rem x 1.5rem</strong>. The icon itself is sized at <strong>21px</strong>.</p>
|
||||||
@ -80,5 +89,8 @@ doc-subtab: icon
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,6 +2,9 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: image
|
doc-subtab: image
|
||||||
|
variables:
|
||||||
|
- name: $dimensions
|
||||||
|
value: 16 24 32 48 64 96 128
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
@ -142,5 +145,8 @@ doc-subtab: image
|
|||||||
<div class="content">
|
<div class="content">
|
||||||
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,6 +2,13 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: notification
|
doc-subtab: notification
|
||||||
|
variables:
|
||||||
|
- name: $notification-background-color
|
||||||
|
value: $background
|
||||||
|
- name: $notification-radius
|
||||||
|
value: $radius
|
||||||
|
- name: $notification-padding
|
||||||
|
value: 1.25rem 2.5rem 1.25rem 1.5rem
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
@ -88,5 +95,8 @@ doc-subtab: notification
|
|||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include variables.html %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,6 +2,11 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: progress
|
doc-subtab: progress
|
||||||
|
variables:
|
||||||
|
- name: $progress-bar-background-color
|
||||||
|
value: $border
|
||||||
|
- name: $progress-value-background-color
|
||||||
|
value: $text
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
@ -48,5 +53,7 @@ doc-subtab: progress
|
|||||||
<progress class="progress is-large" value="60" max="100">60%</progress>
|
<progress class="progress is-large" value="60" max="100">60%</progress>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
|
{% include variables.html element=true %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,57 +2,41 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: table
|
doc-subtab: table
|
||||||
|
variables:
|
||||||
|
- name: $table-color
|
||||||
|
value: $grey-darker
|
||||||
|
- name: $table-background-color
|
||||||
|
value: $white
|
||||||
|
- name: $table-cell-border
|
||||||
|
value: 1px solid $grey-lighter
|
||||||
|
- name: $table-cell-border-width
|
||||||
|
value: 0 0 1px
|
||||||
|
- name: $table-cell-padding
|
||||||
|
value: 0.5em 0.75em
|
||||||
|
- name: $table-cell-heading-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $table-head-color
|
||||||
|
value: $grey
|
||||||
|
- name: $table-head-cell-border-width
|
||||||
|
value: 0 0 2px
|
||||||
|
- name: $table-head-cell-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $table-foot-cell-border-width
|
||||||
|
value: 2px 0 0
|
||||||
|
- name: $table-foot-cell-color
|
||||||
|
value: $text-strong
|
||||||
|
- name: $table-row-hover-background-color
|
||||||
|
value: $white-bis
|
||||||
|
- name: $table-row-active-background-color
|
||||||
|
value: $primary
|
||||||
|
- name: $table-row-active-color
|
||||||
|
value: $primary-invert
|
||||||
|
- name: $table-striped-row-even-background-color
|
||||||
|
value: $white-bis
|
||||||
|
- name: $table-striped-row-even-hover-background-color
|
||||||
|
value: $white-ter
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
|
||||||
|
|
||||||
<section class="section">
|
|
||||||
<div class="container">
|
|
||||||
<h1 class="title">Tables</h1>
|
|
||||||
<h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
|
|
||||||
|
|
||||||
<hr>
|
|
||||||
|
|
||||||
<div class="content">
|
|
||||||
<p>You simply need to attach a single <code>.table</code> CSS class on a <code><table></code> with the following structure:</p>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<code>table</code>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<code>thead</code>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>tfoot</code>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>tbody</code>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<code>tr</code>
|
|
||||||
<ul>
|
|
||||||
<li>
|
|
||||||
<code>th</code>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<code>td</code>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<p>
|
|
||||||
<span class="tag is-success">New!</span>
|
|
||||||
<span class="tag is-info">0.4.2</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% capture table_example %}
|
{% capture table_example %}
|
||||||
<table class="table">
|
<table class="table">
|
||||||
<thead>
|
<thead>
|
||||||
@ -353,13 +337,60 @@ doc-subtab: table
|
|||||||
</table>
|
</table>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
<div class="example">
|
{% include subnav-elements.html %}
|
||||||
{{table_example}}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% highlight html %}
|
<section class="section">
|
||||||
{{table_example}}
|
<div class="container">
|
||||||
{% endhighlight %}
|
<h1 class="title">Tables</h1>
|
||||||
|
<h2 class="subtitle">The inevitable HTML <strong>table</strong>, with special case cells</h2>
|
||||||
|
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<p>You simply need to attach a single <code>.table</code> CSS class on a <code><table></code> with the following structure:</p>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>table</code> the main <strong>container</strong>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>thead</code> the optional <strong>top</strong> part of the table
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>tfoot</code> the optional <strong>bottom</strong> part of the table
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>tbody</code> the main <strong>content</strong> of the table
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>tr</code> each table <strong>row</strong>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<code>th</code> a table cell <strong>heading</strong>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<code>td</code> a table <strong>cell</strong>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<p>
|
||||||
|
<span class="tag is-success">New!</span>
|
||||||
|
<span class="tag is-info">0.4.2</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
You can set a table row as <strong>selected</strong> by appending the <code>is-selected</code> modifier on a <code><tr></code>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="example">
|
||||||
|
{{table_example}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{table_example}}{% endhighlight %}
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
|
|
||||||
@ -474,13 +505,13 @@ doc-subtab: table
|
|||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<p>You can <strong>combine</strong> all three modifiers.</p>
|
<p>You can have a <strong>fullwidth</strong> table.</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
<code>table is-bordered is-striped is-narrow</code>
|
<code>table is-fullwidth</code>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-half">
|
<div class="column is-half">
|
||||||
<table class="table is-bordered is-striped is-narrow">
|
<table class="table is-fullwidth">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>One</th>
|
<th>One</th>
|
||||||
@ -512,5 +543,49 @@ doc-subtab: table
|
|||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="columns">
|
||||||
|
<div class="column">
|
||||||
|
<p>You can <strong>combine</strong> all four modifiers.</p>
|
||||||
|
</div>
|
||||||
|
<div class="column">
|
||||||
|
<code>table is-bordered is-striped is-narrow is-fullwidth</code>
|
||||||
|
</div>
|
||||||
|
<div class="column is-half">
|
||||||
|
<table class="table is-bordered is-striped is-narrow is-fullwidth">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>One</th>
|
||||||
|
<th>Two</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Three</td>
|
||||||
|
<td>Four</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Five</td>
|
||||||
|
<td>Six</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Seven</td>
|
||||||
|
<td>Eight</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Nine</td>
|
||||||
|
<td>Ten</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>Eleven</td>
|
||||||
|
<td>Twelve</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include variables.html element=true %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,8 +2,51 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: tag
|
doc-subtab: tag
|
||||||
|
variables:
|
||||||
|
- name: $tag-background-color
|
||||||
|
value: background
|
||||||
|
- name: $tag-color
|
||||||
|
value: text
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% capture tag %}
|
||||||
|
<span class="tag">
|
||||||
|
Tag label
|
||||||
|
</span>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture tags %}
|
||||||
|
<span class="tag is-black">Black</span>
|
||||||
|
<span class="tag is-dark">Dark</span>
|
||||||
|
<span class="tag is-light">Light</span>
|
||||||
|
<span class="tag is-white">White</span>
|
||||||
|
<span class="tag is-primary">Primary</span>
|
||||||
|
<span class="tag is-info">Info</span>
|
||||||
|
<span class="tag is-success">Success</span>
|
||||||
|
<span class="tag is-warning">Warning</span>
|
||||||
|
<span class="tag is-danger">Danger</span>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture sizes %}
|
||||||
|
<span class="tag is-primary is-medium">Medium</span>
|
||||||
|
<span class="tag is-info is-large">Large</span>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture delete %}
|
||||||
|
<span class="tag is-success">
|
||||||
|
Bar
|
||||||
|
<button class="delete is-small"></button>
|
||||||
|
</span>
|
||||||
|
<span class="tag is-warning is-medium">
|
||||||
|
Hello
|
||||||
|
<button class="delete is-small"></button>
|
||||||
|
</span>
|
||||||
|
<span class="tag is-danger is-large">
|
||||||
|
World
|
||||||
|
<button class="delete"></button>
|
||||||
|
</span>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
@ -25,11 +68,7 @@ doc-subtab: tag
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-6">
|
<div class="column is-6">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ tag }}{% endhighlight %}
|
||||||
<span class="tag">
|
|
||||||
Tag label
|
|
||||||
</span>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -83,17 +122,7 @@ doc-subtab: tag
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-6">
|
<div class="column is-6">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ tags }}{% endhighlight %}
|
||||||
<span class="tag is-black">Black</span>
|
|
||||||
<span class="tag is-dark">Dark</span>
|
|
||||||
<span class="tag is-light">Light</span>
|
|
||||||
<span class="tag is-white">White</span>
|
|
||||||
<span class="tag is-primary">Primary</span>
|
|
||||||
<span class="tag is-info">Info</span>
|
|
||||||
<span class="tag is-success">Success</span>
|
|
||||||
<span class="tag is-warning">Warning</span>
|
|
||||||
<span class="tag is-danger">Danger</span>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -114,10 +143,7 @@ doc-subtab: tag
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-6">
|
<div class="column is-6">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ sizes }}{% endhighlight %}
|
||||||
<span class="tag is-primary is-medium">Medium</span>
|
|
||||||
<span class="tag is-info is-large">Large</span>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -146,21 +172,10 @@ doc-subtab: tag
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-6">
|
<div class="column is-6">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ delete }}{% endhighlight %}
|
||||||
<span class="tag is-success">
|
|
||||||
Bar
|
|
||||||
<button class="delete is-small"></button>
|
|
||||||
</span>
|
|
||||||
<span class="tag is-warning is-medium">
|
|
||||||
Hello
|
|
||||||
<button class="delete is-small"></button>
|
|
||||||
</span>
|
|
||||||
<span class="tag is-danger is-large">
|
|
||||||
World
|
|
||||||
<button class="delete"></button>
|
|
||||||
</span>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include variables.html element=true %}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -2,8 +2,70 @@
|
|||||||
layout: documentation
|
layout: documentation
|
||||||
doc-tab: elements
|
doc-tab: elements
|
||||||
doc-subtab: title
|
doc-subtab: title
|
||||||
|
variables:
|
||||||
|
- name: $title-color
|
||||||
|
value: $grey-darker
|
||||||
|
- name: $title-size
|
||||||
|
value: $size-3
|
||||||
|
- name: $title-weight
|
||||||
|
value: $weight-light
|
||||||
|
- name: $title-weight-bold
|
||||||
|
value: $weight-semibold
|
||||||
|
- name: $subtitle-color
|
||||||
|
value: $grey-dark
|
||||||
|
- name: $subtitle-size
|
||||||
|
value: $size-5
|
||||||
|
- name: $subtitle-strong
|
||||||
|
value: $grey-darker
|
||||||
|
- name: $subtitle-weight
|
||||||
|
value: $weight-light
|
||||||
---
|
---
|
||||||
|
|
||||||
|
{% capture default %}
|
||||||
|
<h1 class="title">Title</h1>
|
||||||
|
<h2 class="subtitle">Subtitle</h2>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture title_sizes %}
|
||||||
|
<h1 class="title is-1">Title 1</h1>
|
||||||
|
<h2 class="title is-2">Title 2</h2>
|
||||||
|
<h3 class="title is-3">Title 3</h3>
|
||||||
|
<h4 class="title is-4">Title 4</h4>
|
||||||
|
<h5 class="title is-5">Title 5</h5>
|
||||||
|
<h6 class="title is-6">Title 6</h6>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture subtitle_sizes %}
|
||||||
|
<h1 class="subtitle is-1">Subtitle 1</h1>
|
||||||
|
<h2 class="subtitle is-2">Subtitle 2</h2>
|
||||||
|
<h3 class="subtitle is-3">Subtitle 3</h3>
|
||||||
|
<h4 class="subtitle is-4">Subtitle 4</h4>
|
||||||
|
<h5 class="subtitle is-5">Subtitle 5</h5>
|
||||||
|
<h6 class="subtitle is-6">Subtitle 6</h6>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture combine %}
|
||||||
|
<p class="title is-1">Title 1</p>
|
||||||
|
<p class="subtitle is-3">Subtitle 3</p>
|
||||||
|
|
||||||
|
<p class="title is-2">Title 2</p>
|
||||||
|
<p class="subtitle is-4">Subtitle 4</p>
|
||||||
|
|
||||||
|
<p class="title is-3">Title 3</p>
|
||||||
|
<p class="subtitle is-5">Subtitle 5</p>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% capture spaced %}
|
||||||
|
<p class="title is-1 is-spaced">Title 1</p>
|
||||||
|
<p class="subtitle is-3">Subtitle 3</p>
|
||||||
|
|
||||||
|
<p class="title is-2 is-spaced">Title 2</p>
|
||||||
|
<p class="subtitle is-4">Subtitle 4</p>
|
||||||
|
|
||||||
|
<p class="title is-3 is-spaced">Title 3</p>
|
||||||
|
<p class="subtitle is-5">Subtitle 5</p>
|
||||||
|
{% endcapture %}
|
||||||
|
|
||||||
{% include subnav-elements.html %}
|
{% include subnav-elements.html %}
|
||||||
|
|
||||||
<section class="section">
|
<section class="section">
|
||||||
@ -24,10 +86,7 @@ doc-subtab: title
|
|||||||
<p class="subtitle">Subtitle</p>
|
<p class="subtitle">Subtitle</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ default }}{% endhighlight %}
|
||||||
<h1 class="title">Title</h1>
|
|
||||||
<h2 class="subtitle">Subtitle</h2>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -46,14 +105,7 @@ doc-subtab: title
|
|||||||
<p class="title is-6">Title 6</p>
|
<p class="title is-6">Title 6</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ title_sizes }}{% endhighlight %}
|
||||||
<h1 class="title is-1">Title 1</h1>
|
|
||||||
<h2 class="title is-2">Title 2</h2>
|
|
||||||
<h3 class="title is-3">Title 3</h3>
|
|
||||||
<h4 class="title is-4">Title 4</h4>
|
|
||||||
<h5 class="title is-5">Title 5</h5>
|
|
||||||
<h6 class="title is-6">Title 6</h6>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -68,14 +120,7 @@ doc-subtab: title
|
|||||||
<p class="subtitle is-6">Subtitle 6</p>
|
<p class="subtitle is-6">Subtitle 6</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ subtitle_sizes }}{% endhighlight %}
|
||||||
<h1 class="subtitle is-1">Subtitle 1</h1>
|
|
||||||
<h2 class="subtitle is-2">Subtitle 2</h2>
|
|
||||||
<h3 class="subtitle is-3">Subtitle 3</h3>
|
|
||||||
<h4 class="subtitle is-4">Subtitle 4</h4>
|
|
||||||
<h5 class="subtitle is-5">Subtitle 5</h5>
|
|
||||||
<h6 class="subtitle is-6">Subtitle 6</h6>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -103,16 +148,7 @@ doc-subtab: title
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ combine }}{% endhighlight %}
|
||||||
<p class="title is-1">Title 1</p>
|
|
||||||
<p class="subtitle is-3">Subtitle 3</p>
|
|
||||||
|
|
||||||
<p class="title is-2">Title 2</p>
|
|
||||||
<p class="subtitle is-4">Subtitle 4</p>
|
|
||||||
|
|
||||||
<p class="title is-3">Title 3</p>
|
|
||||||
<p class="subtitle is-5">Subtitle 5</p>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -142,17 +178,11 @@ doc-subtab: title
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="column">
|
<div class="column">
|
||||||
{% highlight html %}
|
{% highlight html %}{{ spaced }}{% endhighlight %}
|
||||||
<p class="title is-1 is-spaced">Title 1</p>
|
|
||||||
<p class="subtitle is-3">Subtitle 3</p>
|
|
||||||
|
|
||||||
<p class="title is-2 is-spaced">Title 2</p>
|
|
||||||
<p class="subtitle is-4">Subtitle 4</p>
|
|
||||||
|
|
||||||
<p class="title is-3 is-spaced">Title 3</p>
|
|
||||||
<p class="subtitle is-5">Subtitle 5</p>
|
|
||||||
{% endhighlight %}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% include variables.html element=true %}
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|||||||
@ -4,46 +4,7 @@ doc-tab: overview
|
|||||||
doc-subtab: customize
|
doc-subtab: customize
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include subnav-overview.html %}
|
{% capture sass %}
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
<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-left">
|
|
||||||
<p class="title is-5">2</p>
|
|
||||||
</div>
|
|
||||||
<div class="media-content">
|
|
||||||
<p class="title is-5">
|
|
||||||
<strong>Set</strong> your variables
|
|
||||||
</p>
|
|
||||||
<p class="subtitle is-6">
|
|
||||||
Add your own colors, set new fonts, override Bulma styles...
|
|
||||||
</p>
|
|
||||||
{% highlight sass %}
|
|
||||||
// 1. Import the initial variables
|
// 1. Import the initial variables
|
||||||
@import "../sass/utilities/initial-variables"
|
@import "../sass/utilities/initial-variables"
|
||||||
|
|
||||||
@ -67,8 +28,48 @@ $family-primary: $family-serif
|
|||||||
|
|
||||||
// 4. Import the rest of Bulma
|
// 4. Import the rest of Bulma
|
||||||
@import "../bulma"
|
@import "../bulma"
|
||||||
{% endhighlight %}
|
{% endcapture %}
|
||||||
|
|
||||||
|
{% include 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>
|
||||||
|
|
||||||
|
<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">
|
||||||
|
<strong>Download</strong> the source files:
|
||||||
</p>
|
</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-left">
|
||||||
|
<p class="title is-5">2</p>
|
||||||
|
</div>
|
||||||
|
<div class="media-content">
|
||||||
|
<p class="title is-5">
|
||||||
|
<strong>Set</strong> your variables
|
||||||
|
</p>
|
||||||
|
<p class="subtitle is-6">
|
||||||
|
Add your own colors, set new fonts, override Bulma styles...
|
||||||
|
</p>
|
||||||
|
<div class="highlight-full">
|
||||||
|
{% highlight sass %}{{ sass }}{% endhighlight %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|||||||
@ -24,7 +24,6 @@ $table-striped-row-even-hover-background-color: $white-ter !default
|
|||||||
background-color: $table-background-color
|
background-color: $table-background-color
|
||||||
color: $table-color
|
color: $table-color
|
||||||
margin-bottom: 1.5rem
|
margin-bottom: 1.5rem
|
||||||
width: 100%
|
|
||||||
td,
|
td,
|
||||||
th
|
th
|
||||||
border: $table-cell-border
|
border: $table-cell-border
|
||||||
@ -77,6 +76,8 @@ $table-striped-row-even-hover-background-color: $white-ter !default
|
|||||||
td,
|
td,
|
||||||
th
|
th
|
||||||
border-bottom-width: 1px
|
border-bottom-width: 1px
|
||||||
|
&.is-fullwidth
|
||||||
|
width: 100%
|
||||||
&.is-narrow
|
&.is-narrow
|
||||||
td,
|
td,
|
||||||
th
|
th
|
||||||
|
|||||||
@ -1,18 +1,42 @@
|
|||||||
$tag-background-color: $background !default
|
$tag-background-color: $background !default
|
||||||
$tag-color: $text !default
|
$tag-color: $text !default
|
||||||
|
$tag-radius: $radius !default
|
||||||
|
|
||||||
|
.tags
|
||||||
|
align-items: center
|
||||||
|
display: flex
|
||||||
|
flex-wrap: wrap
|
||||||
|
justify-content: flex-start
|
||||||
|
.tag
|
||||||
|
margin-bottom: 0.5rem
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-right: 0.5rem
|
||||||
|
&:last-child
|
||||||
|
margin-bottom: -0.5rem
|
||||||
|
&:not(:last-child)
|
||||||
|
margin-bottom: 1rem
|
||||||
|
&.has-addons
|
||||||
|
.tag
|
||||||
|
margin-right: 0
|
||||||
|
&:not(:first-child)
|
||||||
|
border-bottom-left-radius: 0
|
||||||
|
border-top-left-radius: 0
|
||||||
|
&:not(:last-child)
|
||||||
|
border-bottom-right-radius: 0
|
||||||
|
border-top-right-radius: 0
|
||||||
|
|
||||||
.tag
|
.tag
|
||||||
align-items: center
|
align-items: center
|
||||||
background-color: $tag-background-color
|
background-color: $tag-background-color
|
||||||
border-radius: 290486px
|
border-radius: $tag-radius
|
||||||
color: $tag-color
|
color: $tag-color
|
||||||
display: inline-flex
|
display: inline-flex
|
||||||
font-size: $size-small
|
font-size: $size-small
|
||||||
height: 2em
|
height: 2em
|
||||||
justify-content: center
|
justify-content: center
|
||||||
line-height: 1.5
|
line-height: 1.5
|
||||||
padding-left: 0.875em
|
padding-left: 0.75em
|
||||||
padding-right: 0.875em
|
padding-right: 0.75em
|
||||||
white-space: nowrap
|
white-space: nowrap
|
||||||
.delete
|
.delete
|
||||||
margin-left: 0.25em
|
margin-left: 0.25em
|
||||||
@ -29,3 +53,10 @@ $tag-color: $text !default
|
|||||||
font-size: $size-normal
|
font-size: $size-normal
|
||||||
&.is-large
|
&.is-large
|
||||||
font-size: $size-medium
|
font-size: $size-medium
|
||||||
|
// Modifiers
|
||||||
|
&.is-rounded
|
||||||
|
border-radius: 290486px
|
||||||
|
|
||||||
|
a.tag
|
||||||
|
&:hover
|
||||||
|
text-decoration: underline
|
||||||
|
|||||||
@ -1,12 +1,14 @@
|
|||||||
$title-color: $grey-darker !default
|
$title-color: $grey-darker !default
|
||||||
$title-size: $size-3 !default
|
$title-size: $size-3 !default
|
||||||
$title-weight: $weight-light !default
|
$title-weight: $weight-bold !default
|
||||||
$title-weight-bold: $weight-semibold !default
|
$title-strong-color: inherit !default
|
||||||
|
$title-strong-weight: inherit !default
|
||||||
|
|
||||||
$subtitle-color: $grey-dark !default
|
$subtitle-color: $grey-dark !default
|
||||||
$subtitle-size: $size-5 !default
|
$subtitle-size: $size-5 !default
|
||||||
$subtitle-strong: $grey-darker !default
|
$subtitle-weight: $weight-normal !default
|
||||||
$subtitle-weight: $weight-light !default
|
$subtitle-strong-color: $grey-darker !default
|
||||||
|
$subtitle-strong-weight: $weight-semibold !default
|
||||||
|
|
||||||
.title,
|
.title,
|
||||||
.subtitle
|
.subtitle
|
||||||
@ -14,9 +16,7 @@ $subtitle-weight: $weight-light !default
|
|||||||
word-break: break-word
|
word-break: break-word
|
||||||
em,
|
em,
|
||||||
span
|
span
|
||||||
font-weight: $title-weight
|
font-weight: inherit
|
||||||
strong
|
|
||||||
font-weight: $title-weight-bold
|
|
||||||
.tag
|
.tag
|
||||||
vertical-align: middle
|
vertical-align: middle
|
||||||
|
|
||||||
@ -26,7 +26,8 @@ $subtitle-weight: $weight-light !default
|
|||||||
font-weight: $title-weight
|
font-weight: $title-weight
|
||||||
line-height: 1.125
|
line-height: 1.125
|
||||||
strong
|
strong
|
||||||
color: inherit
|
color: $title-strong-color
|
||||||
|
font-weight: $title-strong-weight
|
||||||
& + .highlight
|
& + .highlight
|
||||||
margin-top: -0.75rem
|
margin-top: -0.75rem
|
||||||
&:not(.is-spaced) + .subtitle
|
&:not(.is-spaced) + .subtitle
|
||||||
@ -43,7 +44,8 @@ $subtitle-weight: $weight-light !default
|
|||||||
font-weight: $subtitle-weight
|
font-weight: $subtitle-weight
|
||||||
line-height: 1.25
|
line-height: 1.25
|
||||||
strong
|
strong
|
||||||
color: $subtitle-strong
|
color: $subtitle-strong-color
|
||||||
|
font-weight: $subtitle-strong-weight
|
||||||
&:not(.is-spaced) + .title
|
&:not(.is-spaced) + .title
|
||||||
margin-top: -1.5rem
|
margin-top: -1.5rem
|
||||||
// Sizes
|
// Sizes
|
||||||
|
|||||||
@ -38,7 +38,8 @@ $size-7: 0.75rem !default
|
|||||||
|
|
||||||
$weight-light: 300 !default
|
$weight-light: 300 !default
|
||||||
$weight-normal: 400 !default
|
$weight-normal: 400 !default
|
||||||
$weight-semibold: 500 !default
|
$weight-medium: 500 !default
|
||||||
|
$weight-semibold: 600 !default
|
||||||
$weight-bold: 700 !default
|
$weight-bold: 700 !default
|
||||||
|
|
||||||
// Responsiveness
|
// Responsiveness
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user