Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-22 13:04:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Customize section init

Browse Source
This commit is contained in:
Jeremy Thomas
2018-07-14 00:42:07 +01:00
parent 5a478857a8
commit f637ee0009
17 changed files with 460 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
docs/_includes/components/categories.html
View File

@@ -4,6 +4,7 @@
{% assign category_links = category[1] %} {% assign category_links = category[1] %}
{% assign category_link = site.data.links.by_id[category_id] %} {% assign category_link = site.data.links.by_id[category_id] %}
{% if category_link.name != 'Customize' %}
<div class="bd-category {% if category_id == current_category %}is-active{% endif %}"> <div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
<header class="bd-category-header"> <header class="bd-category-header">
<a class="bd-category-toggle"> <a class="bd-category-toggle">
@@ -13,6 +14,11 @@
</a> </a>
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}"> <a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
<strong>{{ category_link.name }}</strong> <strong>{{ category_link.name }}</strong>
{% if category_link.name == 'Customize' %}
<span class="tag is-success">
New!
</span>
{% endif %}
</a> </a>
</header> </header>
@@ -27,6 +33,7 @@
{% endfor %} {% endfor %}
</ul> </ul>
</div> </div>
{% endif %}
{% endfor %} {% endfor %}
</nav> </nav>

9
docs/_includes/components/step.html Normal file
View File

@@ -0,0 +1,9 @@
<div class="columns">
<div class="column is-4-tablet is-3-desktop">
{% include elements/anchor.html name=include.title %}
</div>
<div class="column is-offset-1 is-7-tablet is-8-desktop">
{{ include.content }}
</div>
</div>

7
docs/_includes/elements/responsive-image-2x.html Normal file
View File

@@ -0,0 +1,7 @@
<img
src="{{ site.url }}/images/{{ include.path }}.{{ include.extension }}"
srcset="{{ site.url }}/images/{{ include.path }}.{{ include.extension }} 1x,
{{ site.url }}/images/{{ include.path }}@2x.{{ include.extension }} 2x"
alt="{{ include.alt }}"
width="{{ include.width }}"
height="{{ include.height }}">

37
docs/_includes/snippets/mypage.html Normal file
View File

@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>My custom Bulma website</title>
<link rel="stylesheet" href="css/mystyles.css">
</head>
<body>
<h1 class="title">
Bulma
</h1>
<p class="subtitle">
Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a>
</p>
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Input">
</div>
</div>
<div class="field">
<p class="control">
<span class="select">
<select>
<option>Select dropdown</option>
</select>
</span>
</p>
</div>
<div class="buttons">
<a class="button is-primary">Primary</a>
<a class="button is-link">Link</a>
</div>
</body>
</html>

19
docs/_sass/main.sass
View File

@@ -2,6 +2,17 @@
overflow: hidden overflow: hidden
position: relative position: relative
.bd-figure
+block
border: 2px solid $white-ter
border-radius: $radius
text-align: center
figcaption
background-color: $white-ter
color: $text-light
font-size: $size-small
padding: 1em
// Lead // Lead
.bd-lead .bd-lead
@@ -140,6 +151,14 @@
position: relative position: relative
&.is-active &.is-active
color: $link color: $link
.tag
border-radius: 2px
font-family: Verdana
font-size: 0.5rem
font-weight: bold
height: 2.25em
margin-left: 0.5em
vertical-align: text-bottom
.bd-category-list .bd-category-list
@extend %bd-list @extend %bd-list

1
docs/_sass/specific.sass
View File

@@ -228,6 +228,7 @@
.bd-anchor-link .bd-anchor-link
position: absolute position: absolute
right: calc(100% + 1rem) right: calc(100% + 1rem)
top: 0
+until($widescreen) +until($widescreen)
left: 0 left: 0
right: auto right: auto

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

@@ -52,7 +52,7 @@
} }
.box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child), .box:not(:last-child), .content:not(:last-child), .notification:not(:last-child), .progress:not(:last-child), .table:not(:last-child), .table-container:not(:last-child), .title:not(:last-child),
.subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child), .bd-snippet:not(:last-child), .bd-callout:not(:last-child) { .subtitle:not(:last-child), .block:not(:last-child), .highlight:not(:last-child), .breadcrumb:not(:last-child), .level:not(:last-child), .message:not(:last-child), .tabs:not(:last-child), .bd-figure:not(:last-child), .bd-snippet:not(:last-child), .bd-callout:not(:last-child) {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
} }
@@ -10192,6 +10192,19 @@ label.panel-block:hover {
position: relative; position: relative;
} }
.bd-figure {
border: 2px solid whitesmoke;
border-radius: 4px;
text-align: center;
}
.bd-figure figcaption {
background-color: whitesmoke;
color: #7a7a7a;
font-size: 0.75rem;
padding: 1em;
}
.bd-lead { .bd-lead {
position: relative; position: relative;
} }
@@ -10384,6 +10397,16 @@ label.panel-block:hover {
color: #3273dc; color: #3273dc;
} }
.bd-category-name .tag {
border-radius: 2px;
font-family: Verdana;
font-size: 0.5rem;
font-weight: bold;
height: 2.25em;
margin-left: 0.5em;
vertical-align: text-bottom;
}
.bd-category-list { .bd-category-list {
display: none; display: none;
padding: 0.5rem; padding: 0.5rem;
@@ -12152,6 +12175,7 @@ svg {
.bd-anchor-link { .bd-anchor-link {
position: absolute; position: absolute;
right: calc(100% + 1rem); right: calc(100% + 1rem);
top: 0;
} }
@media screen and (max-width: 1279px) { @media screen and (max-width: 1279px) {

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

12
docs/documentation/customize.html Normal file
View File

@@ -0,0 +1,12 @@
---
title: Customize
layout: documentation
doc-tab: customize
hide_tabs: true
breadcrumb:
- home
- documentation
- customize
---
{% include components/links.html category_id='customize' %}

53
docs/documentation/customize/concepts.html Normal file
View File

@@ -0,0 +1,53 @@
---
title: Concepts
layout: documentation
doc-tab: customize
doc-subtab: concepts
breadcrumb:
- home
- documentation
- customize
- customize-concepts
---
<div class="content">
<p>
Bulma is highly customizable thanks to <strong>415 Sass variables</strong> living across <strong>28 files</strong>.
</p>
<p>
These variables exist at 3 levels:
</p>
<ul>
<li>
<strong><a href="/documentation/overview/variables/#initial-variables">initial variables</a></strong>: global variables with <strong>literal</strong> values
</li>
<li>
<strong><a href="/documentation/overview/variables/#derived-variables">derived variables</a></strong>: global variables with values that reference other variables, or are computed
</li>
<li>
<strong>element/component variables</strong>: variables that are specific to a Bulma element/component
</li>
</ul>
</div>
{% include elements/anchor.html name="Strategy" %}
<div class="content">
<p>
To customize Bulma, you will need to:
</p>
<ul>
<li>
<strong>install</strong> (or download) Bulma
</li>
<li>
have a working <strong>Sass setup</strong>
</li>
<li>
create your own <code>.scss</code> or <code>.sass</code> file
</li>
</ul>
</div>

289
docs/documentation/customize/with-node-sass.html Normal file
View File

@@ -0,0 +1,289 @@
---
title: With node-sass
layout: documentation
doc-tab: customize
doc-subtab: node-sass
breadcrumb:
- home
- documentation
- customize
- customize-node-sass
---
{% capture init %}
npm init
{% endcapture %}
{% capture step_1 %}
<div class="content">
<p>
In your terminal, create a new folder called <code>mybulma</code>, navigate to it, then type the following command:
</p>
</div>
{% highlight bash %}{{ init }}{% endhighlight %}
<div class="content">
<p>
This will launch an interactive setup to create <code>package.json</code>. When prompted for an <strong>entry point</strong>, enter <code>sass/mystyles.scss</code>.
</p>
</div>
{% endcapture %}
{% capture dependencies %}
npm install node-sass --save-dev
npm install bulma --save-dev
{% endcapture %}
{% capture step_2 %}
<div class="content">
<p>
You only need <strong>2 packages</strong> to customize Bulma: <code>node-sass</code> and <code>bulma</code> itself.
</p>
</div>
{% highlight bash %}{{ dependencies }}{% endhighlight %}
{% endcapture %}
{% capture scss_bulma %}
@charset "utf-8";
@import "../node_modules/bulma/bulma.sass";
{% endcapture %}
{% capture step_3 %}
<div class="content">
<p>
Create a <code>sass</code> folder in which you add a file called <code>mystyles.scss</code>:
</p>
</div>
{% highlight scss %}{{ scss_bulma }}{% endhighlight %}
<div class="content">
<p>
Make sure to write the correct path to the <code>bulma.sass</code> file.
</p>
</div>
{% endcapture %}
{% capture step_4 %}
<div class="content">
<p>
Let's create an HTML template which uses several Bulma components.
</p>
</div>
{% highlight html %}{% include snippets/mypage.html %}{% endhighlight %}
<div class="content">
<p>
Notice the <code>css/mystyles.css</code> path for your stylesheet. This will be the location of the CSS file we will generate with Sass.
</p>
</div>
<figure class="bd-figure">
{%
include elements/responsive-image-2x.html
path="customize/custom-bulma-01-unstyled"
extension="png"
alt="Bulma unstyled"
width="600"
height="300"
%}
<figcaption>
The unstyled page
</figcaption>
</figure>
{% endcapture %}
{% capture scripts %}
"scripts": {
"css-build": "node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css",
"css-watch": "npm run css-build -- --watch",
"start": "npm run css-watch"
}
{% endcapture %}
{% capture npm_build %}
npm run css-build
{% endcapture %}
{% capture npm_build_success %}
Rendering Complete, saving .css file...
Wrote CSS to /path/to/mybulma/css/mystyles.css
{% endcapture %}
{% capture npm_watch %}
npm start
{% endcapture %}
{% capture step_5 %}
<div class="content">
<p>
To build a CSS file from a Sass file, we can use <strong>node scripts</strong>:
</p>
</div>
{% highlight html %}{{ scripts }}{% endhighlight %}
<div class="content">
<ul>
<li>
<code>css-build</code> takes <code>sass/mystyles.scss</code> as an input, and outputs <code>css/mystyles.css</code>, while omitting the source map
</li>
<li>
<code>css-watch</code> builds the CSS and watches for changes
</li>
<li>
<code>start</code> is simply a shortcut for <code>css-watch</code>
</li>
</ul>
<p>
To test it out, go in your terminal and run the following command:
</p>
{% highlight bash %}{{ npm_build }}{% endhighlight %}
</div>
<figure class="bd-figure">
{%
include elements/responsive-image-2x.html
path="customize/custom-bulma-02-default"
extension="png"
alt="Bulma default styles"
width="600"
height="300"
%}
<figcaption>
Bulma's default styles
</figcaption>
</figure>
<div class="content">
<p>
If set up correctly, you will see the following message:
</p>
</div>
{% highlight bash %}{{ npm_build_success }}{% endhighlight %}
<div class="content">
<p>
To watch for changes, just launch the following command:
</p>
</div>
{% highlight bash %}{{ npm_watch }}{% endhighlight %}
{% endcapture %}
{% capture mystyles %}
@charset "utf-8";
// Import a Google Font
@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
// Update Bulma's global variables
$family-sans-serif: "Nunito", sans-serif;
$grey-dark: $brown;
$grey-light: $beige-light;
$primary: $purple;
$link: $pink;
$widescreen-enabled: false;
$fullhd-enabled: false;
// Update some of Bulma's component variables
$body-background-color: $beige-lighter;
$control-border-width: 2px;
$input-border-color: transparent;
$input-shadow: none;
// Import only what you need from Bulma
@import "../node_modules/bulma/sass/utilities/_all.sass";
@import "../node_modules/bulma/sass/base/_all.sass";
@import "../node_modules/bulma/sass/elements/button.sass";
@import "../node_modules/bulma/sass/elements/container.sass";
@import "../node_modules/bulma/sass/elements/form.sass";
@import "../node_modules/bulma/sass/elements/title.sass";
@import "../node_modules/bulma/sass/layout/hero.sass";
@import "../node_modules/bulma/sass/layout/section.sass";
{% endcapture %}
{% capture step_6 %}
<div class="content">
<p>
Replace the content of the <code>mystyles.scss</code> file with the following:
</p>
</div>
<div class="highlight-full">
{% highlight scss %}{{ mystyles }}{% endhighlight %}
</div>
<div class="content">
<p>
Since you are watching for changes, simply <strong>save the file</strong> to see the result:
</p>
</div>
<figure class="bd-figure">
{%
include elements/responsive-image-2x.html
path="customize/custom-bulma-03-styled"
extension="png"
alt="Bulma customized"
width="600"
height="300"
%}
<figcaption>
Bulma's customized theme
</figcaption>
</figure>
{% endcapture %}
{% include components/step.html
title='1. Create a <code style="white-space: nowrap;">package.json</code> file'
content=step_1
%}
<hr>
{% include components/step.html
title="2. Install the dev dependencies"
content=step_2
%}
<hr>
{% include components/step.html
title="3. Create a Sass file"
content=step_3
%}
<hr>
{% include components/step.html
title="4. Create an HTML page"
content=step_4
%}
<hr>
{% include components/step.html
title="5. Add node scripts to build your CSS"
content=step_5
%}
<hr>
{% include components/step.html
title="6. Add your own Bulma styles"
content=step_6
%}

BIN
docs/images/customize/custom-bulma-01-unstyled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 24 KiB

BIN
docs/images/customize/custom-bulma-01-unstyled@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
docs/images/customize/custom-bulma-02-default.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 26 KiB

BIN
docs/images/customize/custom-bulma-02-default@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 46 KiB

BIN
docs/images/customize/custom-bulma-03-styled.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 29 KiB

BIN
docs/images/customize/custom-bulma-03-styled@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 48 KiB