Skip to content

Commit c2d785a

Browse files
jgthmsjgthms
committed
Write 0.8 blog post
1 parent 1a6b00e commit c2d785a

File tree

16 files changed

+457
-389
lines changed

16 files changed

+457
-389
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) no
2525

2626
The light colors are used by the `button` element, while the light and dark colors are used by the `message` component.
2727

28+
#### Panel colors
29+
30+
The `panel` component is now available in all the different colors.
31+
2832
#### 4-value color map
2933

3034
The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.

‎docs/_layouts/post.html

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,9 @@ <h1 class="title">
7171
</header>
7272

7373
<div class="bd-content">
74-
<div class="columns">
75-
<div class="column is-offset-2 is-8">
76-
<div class="bd-post content is-medium">
77-
{{ content }}
78-
</div>
74+
<div class="bd-post-container">
75+
<div class="bd-post content is-medium">
76+
{{ content }}
7977
</div>
8078
</div>
8179
</div>

‎docs/_posts/2019-10-15-light-dark-colors.md

Lines changed: 146 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
---
2+
title: "Light and Dark colors, better look, larger buttons, panel colors, and more"
3+
layout: post
4+
introduction: "A big update for more colors and flexibility"
5+
color: "primary"
6+
name: "Light/Dark colors, better look, larger controls"
7+
icon: "sun"
8+
published: false
9+
---
10+
11+
The new version **[Bulma 0.8.0](#)** is out! It comes with several bug fixes and a lot of nice new features:
12+
13+
* [Light/Dark colors](#light-dark-colors)
14+
* [Better visual look](#better-visual-look)
15+
* [Panel colors](#panel-colors)
16+
* [4-value color map](#4-value-color-map)
17+
* [Scheme variables](#scheme-variables)
18+
19+
More in the [Changelog](#).
20+
21+
{% include elements/anchor.html name="Light/Dark colors" %}
22+
23+
Each main color (`"primary"`, `"info"`, `"success"`, `"warning"`, `"danger"`) now comes with a `*-light` and a `*-dark` version. They are calculated using 2 new color functions:
24+
25+
* `findLightColor()` which finds the light version of a color
26+
* `findDarkolor()` which finds the dark version of a color
27+
28+
The **light** colors are used by the `button` element:
29+
30+
<figure>
31+
<a href="{{ site.data.links.by_id.elements-button.path }}">
32+
<img src="{{ site.url }}/images/blog/v8/light-buttons-bis.png" alt="List Bulma buttons" width="530" height="104">
33+
</a>
34+
</figure>
35+
36+
The **light** and **dark** colors are used by the `message` component, which generates much prettier colored versions. See the difference between before (left) and after (right):
37+
38+
<div class="bd-post-fullwidth">
39+
<a href="{{ site.data.links.by_id.components-message.path }}">
40+
<img src="{{ site.url }}/images/blog/v8/messages-before.png" alt="Messages before" width="448" height="1200">
41+
<img src="{{ site.url }}/images/blog/v8/messages-after.png" alt="Messages after" width="448" height="1200">
42+
</a>
43+
</div>
44+
45+
{% include elements/anchor.html name="Better visual look" %}
46+
47+
Some of the Bulma colors have been updated:
48+
49+
<table>
50+
<tr>
51+
<th>Color</th>
52+
<th>Before</th>
53+
<th>After</th>
54+
</tr>
55+
<tr>
56+
<th>
57+
<code>$green</code>
58+
</th>
59+
<td>
60+
{% include elements/color-square.html value="hsl(141, 71%, 48%)" %}
61+
</td>
62+
<td>
63+
{% include elements/color-square.html value="hsl(141, 53%, 53%)" %}
64+
</td>
65+
</tr>
66+
<tr>
67+
<th>
68+
<code>$cyan</code>
69+
</th>
70+
<td>
71+
{% include elements/color-square.html value="hsl(204, 86%, 53%)" %}
72+
</td>
73+
<td>
74+
{% include elements/color-square.html value="hsl(204, 71%, 53%)" %}
75+
</td>
76+
</tr>
77+
<tr>
78+
<th>
79+
<code>$red</code>
80+
</th>
81+
<td>
82+
{% include elements/color-square.html value="hsl(348, 100%, 61%)" %}
83+
</td>
84+
<td>
85+
{% include elements/color-square.html value="hsl(348, 86%, 61%)" %}
86+
</td>
87+
</tr>
88+
</table>
89+
90+
The <strong>shadows</strong> of the <code>box</code> and <code>card</code> have been improved:
91+
92+
<div class="bd-post-fullwidth">
93+
<a href="{{ site.data.links.by_id.components-card.path }}">
94+
<img src="{{ site.url }}/images/blog/v8/card-before.png" alt="Card before" width="464" height="236">
95+
<img src="{{ site.url }}/images/blog/v8/card-after.png" alt="Card after" width="464" height="236">
96+
</a>
97+
</div>
98+
99+
<div class="bd-post-fullwidth">
100+
<a href="{{ site.data.links.by_id.elements-box.path }}" style="display: block;" class="has-text-centered">
101+
<img src="{{ site.url }}/images/blog/v8/box-before.png" alt="Box before" width="464" height="236">
102+
<img src="{{ site.url }}/images/blog/v8/box-after.png" alt="Box after" width="464" height="236">
103+
</a>
104+
</div>
105+
106+
{% include elements/anchor.html name="Panel colors" %}
107+
108+
<p>
109+
The <a href="{{ site.data.links.by_id.components-panel.path }}">panel component</a> is now available in all <strong>colors</strong>:
110+
</p>
111+
112+
<div class="bd-post-fullwidth">
113+
<a href="{{ site.data.links.by_id.components-panel.path }}">
114+
<img src="{{ site.url }}/images/blog/v8/panel-colors.png" alt="Panel colors" width="768" height="1029">
115+
</a>
116+
</div>
117+
118+
{% include elements/anchor.html name="4-value color map" %}
119+
120+
The `$colors` Sass map now accepts, for each of its values, a map of up to **4** values. For example: the key `"info"` now has the `($info, $info-invert, $info-light, $info-dark)` map.
121+
122+
If you provide a `$custom-colors` map, you can decide to provide a map of 1, 2, 3 or 4 values for each value. If fewer than 4 are provided, Bulma will calculate the remaining ones:
123+
124+
```scss
125+
$custom-colors: (
126+
"lime": (lime),
127+
"tomato": (tomato, white),
128+
"orange": ($orange, $orange-invert, $orange-light),
129+
"lavender": ($lavender, $lavender-invert, $lavender-light, $lavender-dark)
130+
);
131+
```
132+
133+
This is processed by the updated `mergeColorMaps()` Sass function.
134+
135+
{% include elements/anchor.html name="Scheme variables" %}
136+
137+
There are 6 new `$scheme` derived variables: `$scheme-main` `$scheme-main-bis` `$scheme-main-ter` `$scheme-invert` `$scheme-invert-bis` `$scheme-invert-ter`
138+
They replace the `$white` and `$black` occurences in the codebase. This makes it easy to create a "Dark mode" simply by swapping the values:
139+
140+
```sass
141+
$scheme-main: $black
142+
$scheme-invert: $white
143+
// etc.
144+
```
145+
146+
That is also why most of the codebase now references **derived** variables (`$text`, `$background`, `$border` etc.) instead of **initial** ones (`$grey`, `$grey-lighter`, `$grey-darker` etc.): updating the derived variables will affect all elements and components directly.

‎docs/_sass/specific.sass

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@
22
background-color: $primary
33
color: $primary-invert
44

5+
.bd-post-container
6+
margin: 0 auto
7+
max-width: 56rem
8+
9+
.bd-post-fullwidth
10+
text-align: center
11+
12+
+from(60rem)
13+
.bd-post-fullwidth
14+
margin-left: calc(28rem - 50vw)
15+
margin-right: calc(28rem - 50vw)
16+
517
.bd-post
618
.table
719
font-size: 1rem

0 commit comments

Comments
 (0)