mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Customize section init
This commit is contained in:
Jeremy Thomas
12
docs/documentation/customize.html
Normal file
12
docs/documentation/customize.html
Normal 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
53
docs/documentation/customize/concepts.html
Normal 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
289
docs/documentation/customize/with-node-sass.html
Normal 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
|
||||
%}
|
||||
Reference in New Issue
Block a user