Add Sass CLI steps
This commit is contained in:
Jeremy Thomas
parent
f637ee0009
commit
0efd856f52
11 changed files with 372 additions and 145 deletions
13
docs/_includes/components/figure.html
Normal file
13
docs/_includes/components/figure.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<figure class="bd-figure" style="{{ include.style }}">
|
||||
{%
|
||||
include elements/responsive-image-2x.html
|
||||
path=include.path
|
||||
extension=include.extension
|
||||
alt=include.alt
|
||||
width=include.width
|
||||
height=include.height
|
||||
%}
|
||||
<figcaption>
|
||||
{{ include.caption }}
|
||||
</figcaption>
|
||||
</figure>
|
||||
80
docs/_includes/steps/add-custom-styles.html
Normal file
80
docs/_includes/steps/add-custom-styles.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
{% 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>
|
||||
|
||||
{%
|
||||
include components/figure.html
|
||||
style="background-color: #EFF0EB;"
|
||||
path="customize/custom-bulma-03-styled"
|
||||
extension="png"
|
||||
alt="Bulma customized"
|
||||
width="600"
|
||||
height="300"
|
||||
caption="Bulma's customized theme"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
And voilà! You've managed to install and customize Bulma.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% assign step_title = ". Add your own Bulma styles" | prepend: include.number %}
|
||||
|
||||
{% include components/step.html
|
||||
title=step_title
|
||||
content=step_6
|
||||
%}
|
||||
38
docs/_includes/steps/create-html-page.html
Normal file
38
docs/_includes/steps/create-html-page.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
{% capture step_4 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Create an HTML template which uses several Bulma components.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{% include snippets/mypage.html %}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Save this file as <code>mypage.html</code>.
|
||||
</p>
|
||||
<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>
|
||||
<p>
|
||||
Open the page in your browser:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{%
|
||||
include components/figure.html
|
||||
path="customize/custom-bulma-01-unstyled"
|
||||
extension="png"
|
||||
alt="Bulma unstyled"
|
||||
width="600"
|
||||
height="300"
|
||||
caption="The unstyled page"
|
||||
%}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign step_title = ". Create an HTML page" | prepend: include.number %}
|
||||
|
||||
{% include components/step.html
|
||||
title=step_title
|
||||
content=step_4
|
||||
%}
|
||||
27
docs/_includes/steps/create-sass-file.html
Normal file
27
docs/_includes/steps/create-sass-file.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
{% capture scss_bulma %}
|
||||
@charset "utf-8";
|
||||
@import "{{ include.path }}/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 %}
|
||||
|
||||
{% assign step_title = ". Create a Sass file" | prepend: include.number %}
|
||||
|
||||
{% include components/step.html
|
||||
title=step_title
|
||||
content=step_3
|
||||
%}
|
||||
|
|
@ -4,10 +4,16 @@
|
|||
|
||||
.bd-figure
|
||||
+block
|
||||
align-items: center
|
||||
border: 2px solid $white-ter
|
||||
border-radius: $radius
|
||||
display: flex
|
||||
flex-direction: column
|
||||
text-align: center
|
||||
img
|
||||
margin: 1em
|
||||
figcaption
|
||||
align-self: stretch
|
||||
background-color: $white-ter
|
||||
color: $text-light
|
||||
font-size: $size-small
|
||||
|
|
@ -85,6 +91,8 @@
|
|||
display: none
|
||||
& + .bd-anchor-title
|
||||
padding-top: 0
|
||||
.bd-anchor-link
|
||||
top: 0
|
||||
|
||||
// Side
|
||||
|
||||
|
|
|
|||
|
|
@ -228,7 +228,7 @@
|
|||
.bd-anchor-link
|
||||
position: absolute
|
||||
right: calc(100% + 1rem)
|
||||
top: 0
|
||||
top: 1.5rem
|
||||
+until($widescreen)
|
||||
left: 0
|
||||
right: auto
|
||||
|
|
|
|||
|
|
@ -10193,12 +10193,20 @@ label.panel-block:hover {
|
|||
}
|
||||
|
||||
.bd-figure {
|
||||
align-items: center;
|
||||
border: 2px solid whitesmoke;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-figure img {
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
.bd-figure figcaption {
|
||||
align-self: stretch;
|
||||
background-color: whitesmoke;
|
||||
color: #7a7a7a;
|
||||
font-size: 0.75rem;
|
||||
|
|
@ -10309,6 +10317,10 @@ label.panel-block:hover {
|
|||
padding-top: 0;
|
||||
}
|
||||
|
||||
.bd-content hr:first-child + .bd-anchor-title .bd-anchor-link {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.bd-side,
|
||||
.bd-side-background {
|
||||
background-color: #fafafa;
|
||||
|
|
@ -12175,7 +12187,7 @@ svg {
|
|||
.bd-anchor-link {
|
||||
position: absolute;
|
||||
right: calc(100% + 1rem);
|
||||
top: 0;
|
||||
top: 1.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1279px) {
|
||||
|
|
|
|||
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -30,6 +30,10 @@ breadcrumb:
|
|||
<strong>element/component variables</strong>: variables that are specific to a Bulma element/component
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
Since these variables carry the <code>!default</code> flat, they can be assigned a <strong>new value</strong> either before or after having been imported.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Strategy" %}
|
||||
|
|
|
|||
|
|
@ -35,6 +35,19 @@ npm install node-sass --save-dev
|
|||
npm install bulma --save-dev
|
||||
{% endcapture %}
|
||||
|
||||
{% capture package %}
|
||||
{
|
||||
"name": "mybulma",
|
||||
"version": "1.0.0",
|
||||
"main": "sass/mystyles.scss",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"bulma": "^0.7.1",
|
||||
"node-sass": "^4.9.2"
|
||||
}
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_2 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
|
|
@ -43,57 +56,14 @@ npm install bulma --save-dev
|
|||
</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.
|
||||
Your <code>package.json</code> should look like this at this point.
|
||||
</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>
|
||||
{% highlight bash %}{{ package }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture scripts %}
|
||||
|
|
@ -120,7 +90,7 @@ npm start
|
|||
{% capture step_5 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
To build a CSS file from a Sass file, we can use <strong>node scripts</strong>:
|
||||
To build a CSS file from a Sass file, we can use <strong>node scripts</strong>. In <code>package.json</code>, add the following:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -140,26 +110,12 @@ npm start
|
|||
</ul>
|
||||
|
||||
<p>
|
||||
To test it out, go in your terminal and run the following command:
|
||||
To test it out, go in your <strong>terminal</strong> 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:
|
||||
|
|
@ -170,84 +126,29 @@ npm start
|
|||
|
||||
<div class="content">
|
||||
<p>
|
||||
To watch for changes, just launch the following command:
|
||||
<strong>Reload</strong> the page and it should be styled like this:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{%
|
||||
include components/figure.html
|
||||
path="customize/custom-bulma-02-default"
|
||||
extension="png"
|
||||
alt="Bulma default styles"
|
||||
width="600"
|
||||
height="300"
|
||||
caption="Bulma's default styles"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To <strong>watch for changes</strong>, 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
|
||||
|
|
@ -262,16 +163,15 @@ $input-shadow: none;
|
|||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="3. Create a Sass file"
|
||||
content=step_3
|
||||
{% include steps/create-sass-file.html
|
||||
number="3"
|
||||
path="../node_modules"
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="4. Create an HTML page"
|
||||
content=step_4
|
||||
{% include steps/create-html-page.html
|
||||
number="4"
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
|
@ -283,7 +183,6 @@ $input-shadow: none;
|
|||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title="6. Add your own Bulma styles"
|
||||
content=step_6
|
||||
{% include steps/add-custom-styles.html
|
||||
number="6"
|
||||
%}
|
||||
|
|
|
|||
146
docs/documentation/customize/with-sass-cli.html
Normal file
146
docs/documentation/customize/with-sass-cli.html
Normal file
|
|
@ -0,0 +1,146 @@
|
|||
---
|
||||
title: With sass-cli
|
||||
layout: documentation
|
||||
doc-tab: customize
|
||||
doc-subtab: sass-cli
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- customize
|
||||
- customize-sass-cli
|
||||
---
|
||||
|
||||
{% capture gem_install %}
|
||||
gem install sass
|
||||
{% endcapture %}
|
||||
|
||||
{% capture gem_test %}
|
||||
Sass 3.5.3 (Bleeding Edge)
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_1 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
In your terminal, create a new folder called <code>mybulma</code>, navigate to it, then install the <strong>Sass gem</strong>:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ gem_install }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To try it out, run <code>sass -v</code> and you should see the following:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ gem_test }}{% endhighlight %}
|
||||
|
||||
<div class="message is-info">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
If you are on <strong>Windows</strong> and use <strong>Chocolatey</strong>, you can try <code>choco install sass</code>.
|
||||
</p>
|
||||
<p>
|
||||
If you are on <strong>Mac</strong> and use <strong>Homebrew</strong>, you can try <code>brew install sass/sass/sass</code>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_2 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Get the latest version of Bulma:
|
||||
</p>
|
||||
<p>
|
||||
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
||||
<strong>Download</strong>
|
||||
</a>
|
||||
</p>
|
||||
<p>
|
||||
Unzip it and put the <code>bulma-{{ site.data.meta.version }}</code> folder inside your <code>mybulma</code> folder.
|
||||
</p>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture build_sass %}
|
||||
sass --sourcemap=none sass/mystyles.scss:css/mystyles.css
|
||||
{% endcapture %}
|
||||
|
||||
{% capture watch_sass %}
|
||||
sass --watch --sourcemap=none sass/mystyles.scss:css/mystyles.css
|
||||
{% endcapture %}
|
||||
|
||||
{% capture step_5 %}
|
||||
<div class="content">
|
||||
<p>
|
||||
In your terminal, type the following command:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ build_sass }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
<strong>Reload</strong> the page and it should be styled like this:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{%
|
||||
include components/figure.html
|
||||
path="customize/custom-bulma-02-default"
|
||||
extension="png"
|
||||
alt="Bulma default styles"
|
||||
width="600"
|
||||
height="300"
|
||||
caption="Bulma's default styles"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To <strong>watch for changes</strong>, just launch the following command:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight bash %}{{ watch_sass }}{% endhighlight %}
|
||||
{% endcapture %}
|
||||
|
||||
{% include components/step.html
|
||||
title='1. Install Sass'
|
||||
content=step_1
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title='2. Download Bulma'
|
||||
content=step_2
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% assign bulma_path = site.data.meta.version | prepend: "../bulma-" %}
|
||||
|
||||
{% include steps/create-sass-file.html
|
||||
number="3"
|
||||
path=bulma_path
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/create-html-page.html
|
||||
number="4"
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include components/step.html
|
||||
title='5. Build the CSS file'
|
||||
content=step_5
|
||||
%}
|
||||
|
||||
<hr>
|
||||
|
||||
{% include steps/add-custom-styles.html
|
||||
number="6"
|
||||
%}
|
||||
Loading…
Add table
Reference in a new issue