library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add variables data

Browse Source
This commit is contained in:
Jeremy Thomas 2017-10-09 18:13:02 +01:00
parent a0423d426c
commit f83c9bf768
13 changed files with 796 additions and 1988 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/_data/variables.json Normal file
View File

@ -0,0 +1,22 @@
{
"colors": [
{
"name": "primary"
},
{
"name": "link"
},
{
"name": "info"
},
{
"name": "success"
},
{
"name": "warning"
},
{
"name": "danger"
}
]
}

1
docs/_includes/bsa.html
View File

@ -15,7 +15,6 @@
</div>
</section>
<script>
(function(){
if(typeof _bsa !== 'undefined' && _bsa) {

89
docs/_posts/2017-10-09-roses-are-red-links-are-blue.md Normal file
View File

@ -0,0 +1,89 @@
---
layout: post
title: "Roses are red – Links are blue"
introduction: "What's better than one tag? Multiple tags!"
color: "link"
name: "Roses are red<br>Links are blue"
icon: "tag"
---
By default, a browser will display links in <strong style="color: blue;">blue</strong>. Bulma has up until now used the `$primary` color as the `$link` color:
```sass
// Old styles
$link: $primary !default
```
But the _primary_ color is mostly used as the **brand** color, and is not necessarily well suited for links. For readability purposes, and to add more flexibility to your design choices:
* the `$link` color defaults to `$blue`
* `$info` is using the new `$cyan` color
* `$link` has been added to the `$colors` map as well
```sass
// New styles
$link: $blue !default
$info: $cyan !default
```
<div class="message is-danger">
<div class="message-header">
Deprecation warning
</div>
<div class="message-body">
<p>
Because the modifier <code>is-link</code> for <strong>buttons</strong> already existed, it has been renamed to <code>is-text</code>.
</p>
</div>
</div>
As such, the following components are now **blue**:
* [pagination](/documentation/components/pagination/)
* [tabs](/documentation/components/tabs/)
* [menu](/documentation/components/menu/)
* [panel](/documentation/components/panel/)
All Bulma elements and components that support **color** modifiers now support the `.is-link` color:
```html
<div class="notification is-link">
Link notification.
</div>
<div class="notification is-info">
Info notification.
</div>
<button class="button is-link">
Link button
</button>
<button class="button is-info">
Info button
</button>
```
<div class="notification is-link">
Link notification.
</div>
<div class="notification is-info">
Info notification.
</div>
<button class="button is-link">
Link button
</button>
<button class="button is-info">
Info button
</button>
If you want to use the `$primary` color for your links, just **customize** your Bulma setup by including these rules:
```sass
$link: $primary !default
$link-invert: $primary-invert !default
$link-focus-border: $primary !default
```

2
docs/_sass/header.sass
View File

@ -20,7 +20,7 @@
+desktop
#blogDropdown
width: 16rem
width: 17rem
.navbar-item
white-space: normal
#moreDropdown

5
docs/_sass/override.sass
View File

@ -8,6 +8,11 @@
top: 100%
width: 100%
.content
.highlighter-rouge
&:not(:last-child)
margin-bottom: 1.5rem
body.page-grid .column > .notification
padding-left: 0
padding-right: 0

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

File diff suppressed because it is too large Load Diff

9
docs/css/bulma-docs.css.map
View File

File diff suppressed because one or more lines are too long

2
docs/documentation/components/panel.html
View File

@ -104,7 +104,7 @@ variables:
remember me
</label>
<div class="panel-block">
<button class="button is-primary is-outlined is-fullwidth">
<button class="button is-link is-outlined is-fullwidth">
reset all filters
</button>
</div>

14
docs/documentation/elements/button.html
View File

@ -64,11 +64,12 @@ variables:
<a class="button is-light">Light</a>
<a class="button is-dark">Dark</a>
<a class="button is-black">Black</a>
<a class="button is-link">Link</a>
<a class="button is-text">Text</a>
{% endcapture %}
{% capture button_colors_b_example %}
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
<a class="button is-info">Info</a>
<a class="button is-success">Success</a>
<a class="button is-warning">Warning</a>
@ -85,6 +86,7 @@ variables:
{% capture button_outlined_example %}
<a class="button is-outlined">Outlined</a>
<a class="button is-primary is-outlined">Outlined</a>
<a class="button is-link is-outlined">Outlined</a>
<a class="button is-info is-outlined">Outlined</a>
<a class="button is-success is-outlined">Outlined</a>
<a class="button is-danger is-outlined">Outlined</a>
@ -92,6 +94,7 @@ variables:
{% capture button_inverted_example %}
<a class="button is-primary is-inverted">Inverted</a>
<a class="button is-link is-inverted">Inverted</a>
<a class="button is-info is-inverted">Inverted</a>
<a class="button is-success is-inverted">Inverted</a>
<a class="button is-danger is-inverted">Inverted</a>
@ -99,6 +102,7 @@ variables:
{% capture button_inverted_outlined_example %}
<a class="button is-primary is-inverted is-outlined">Invert Outlined</a>
<a class="button is-link is-inverted is-outlined">Invert Outlined</a>
<a class="button is-info is-inverted is-outlined">Invert Outlined</a>
<a class="button is-success is-inverted is-outlined">Invert Outlined</a>
<a class="button is-danger is-inverted is-outlined">Invert Outlined</a>
@ -107,6 +111,7 @@ variables:
{% capture button_normal_example %}
<a class="button">Normal</a>
<a class="button is-primary">Normal</a>
<a class="button is-link">Normal</a>
<a class="button is-info">Normal</a>
<a class="button is-success">Normal</a>
<a class="button is-warning">Normal</a>
@ -116,6 +121,7 @@ variables:
{% capture button_hover_example %}
<a class="button is-hovered">Hover</a>
<a class="button is-primary is-hovered">Hover</a>
<a class="button is-link is-hovered">Hover</a>
<a class="button is-info is-hovered">Hover</a>
<a class="button is-success is-hovered">Hover</a>
<a class="button is-warning is-hovered">Hover</a>
@ -125,6 +131,7 @@ variables:
{% capture button_focus_example %}
<a class="button is-focused">Focus</a>
<a class="button is-primary is-focused">Focus</a>
<a class="button is-link is-focused">Focus</a>
<a class="button is-info is-focused">Focus</a>
<a class="button is-success is-focused">Focus</a>
<a class="button is-warning is-focused">Focus</a>
@ -134,6 +141,7 @@ variables:
{% capture button_active_example %}
<a class="button is-active">Active</a>
<a class="button is-primary is-active">Active</a>
<a class="button is-link is-active">Active</a>
<a class="button is-info is-active">Active</a>
<a class="button is-success is-active">Active</a>
<a class="button is-warning is-active">Active</a>
@ -143,6 +151,7 @@ variables:
{% capture button_loading_example %}
<a class="button is-loading">Loading</a>
<a class="button is-primary is-loading">Loading</a>
<a class="button is-link is-loading">Loading</a>
<a class="button is-info is-loading">Loading</a>
<a class="button is-success is-loading">Loading</a>
<a class="button is-warning is-loading">Loading</a>
@ -156,6 +165,7 @@ variables:
{% capture button_disabled_example %}
<a class="button" title="Disabled button" disabled>Disabled</a>
<a class="button is-primary" title="Disabled button" disabled>Disabled</a>
<a class="button is-link" title="Disabled button" disabled>Disabled</a>
<a class="button is-info" title="Disabled button" disabled>Disabled</a>
<a class="button is-success" title="Disabled button" disabled>Disabled</a>
<a class="button is-warning" title="Disabled button" disabled>Disabled</a>
@ -298,7 +308,7 @@ variables:
{% capture button_group_example %}
<div class="field is-grouped">
<p class="control">
<a class="button is-primary">
<a class="button is-link">
Save changes
</a>
</p>

32
docs/documentation/elements/notification.html
View File

@ -22,40 +22,14 @@ variables:
{% endcapture %}
{% capture notification_colors %}
<div class="notification is-primary">
{% for color in site.data.variables.colors %}
<div class="notification is-{{ color.name }}">
<button class="delete"></button>
Primar lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-info">
<button class="delete"></button>
Info lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-success">
<button class="delete"></button>
Success lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-warning">
<button class="delete"></button>
Warning lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
<div class="notification is-danger">
<button class="delete"></button>
Danger lorem ipsum dolor sit amet, consectetur
adipiscing elit lorem ipsum dolor. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Sit amet,
consectetur adipiscing elit
</div>
{% endfor %}
{% endcapture %}
{% include subnav-elements.html %}

3
docs/documentation/elements/progress.html
View File

@ -15,7 +15,8 @@ variables:
{% endcapture %}
{% capture progress_colors %}
<progress class="progress is-primary" value="30" max="100">30%</progress>
<progress class="progress is-primary" value="15" max="100">30%</progress>
<progress class="progress is-link" value="30" max="100">30%</progress>
<progress class="progress is-info" value="45" max="100">45%</progress>
<progress class="progress is-success" value="60" max="100">60%</progress>
<progress class="progress is-warning" value="75" max="100">75%</progress>

25
docs/documentation/elements/tag.html
View File

@ -26,6 +26,7 @@ variables:
<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-link">Link</span>
<span class="tag is-info">Info</span>
<span class="tag is-success">Success</span>
<span class="tag is-warning">Warning</span>
@ -138,49 +139,49 @@ variables:
<div class="field is-grouped is-grouped-multiline">
<div class="control">
<div class="tags has-addons">
<span class="tag is-info">Technology</span>
<a class="tag is-link">Technology</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-info">CSS</span>
<a class="tag is-link">CSS</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-info">Flexbox</span>
<a class="tag is-link">Flexbox</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-info">Web Design</span>
<a class="tag is-link">Web Design</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-info">Open Source</span>
<a class="tag is-link">Open Source</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-info">Community</span>
<a class="tag is-link">Community</a>
<a class="tag is-delete"></a>
</div>
</div>
<div class="control">
<div class="tags has-addons">
<span class="tag is-info">Documentation</span>
<a class="tag is-link">Documentation</a>
<a class="tag is-delete"></a>
</div>
</div>
@ -248,6 +249,11 @@ variables:
Primary
</span>
</p>
<p class="field">
<span class="tag is-link">
Link
</span>
</p>
<p class="field">
<span class="tag is-info">
Info
@ -354,11 +360,6 @@ variables:
{% include anchor.html name="List of tags" %}
<div class="tags has-addons">
<span class="tag is-success">New!</span>
<span class="tag is-info">0.5.0</span>
</div>
<div class="columns">
<div class="column">
<div class="content">

13
docs/documentation/form/general.html
View File

@ -99,10 +99,10 @@ variables:
<div class="field is-grouped">
<div class="control">
<button class="button is-primary">Submit</button>
<button class="button is-link">Submit</button>
</div>
<div class="control">
<button class="button is-link">Cancel</button>
<button class="button is-text">Cancel</button>
</div>
</div>
{% endcapture %}
@ -828,14 +828,7 @@ variables:
When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
</div>
<div class="columns">
<div class="column is-half">
{{ example }}
</div>
<div class="column is-half">
{% highlight html %}{{ example }}{% endhighlight %}
</div>
</div>
{% include snippet.html content=example more=true %}
{% include anchor.html name="Form field" %}