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

Init v1

Browse Source
This commit is contained in:
Jeremy Thomas
2024-03-21 16:11:54 +00:00
parent 16f1b76881
commit 69877a652c
3261 changed files with 255369 additions and 108913 deletions
Download Patch File Download Diff File Expand all files Collapse all files

239
docs/documentation/customize/concepts.html
View File

@@ -1,82 +1,189 @@
---
title: Concepts
layout: documentation
title: Bulma Customization Concepts
layout: docs
theme: customize
doc-tab: customize
doc-subtab: concepts
breadcrumb:
- home
- documentation
- customize
- customize-concepts
- home
- documentation
- customize
- customize-concepts
---
{% assign variables_link = site.data.links.by_id['customize-variables'] %}
{% capture markdown %}
Bulma is a **highly customizable CSS framework**. From colors to typography, spacing and sizes, forms and layouts, all parts of Bulma can be customized by the user.
<div class="content">
<p>
Bulma is highly customizable thanks to <strong>419 Sass variables</strong> living across <strong>28 files</strong>.
</p>
Bulma's styles and variables are defined at several levels:
<p>
These variables exist at 4 levels:
</p>
* Global Sass variables
* Component Sass variables
* Global CSS variables
* Component CSS variables
* Helper classes
<ul>
<li>
<strong><a href="{{ site.url }}{{ variables_link.path }}#initial-variables">initial variables</a></strong>: global variables with <strong>literal</strong> values
</li>
<li>
<strong><a href="{{ site.url }}{{ variables_link.path }}#derived-variables">derived variables</a></strong>: global variables with values that reference other variables, or are computed
</li>
<li>
<strong><a href="{{ site.url }}{{ variables_link.path }}#generic-variables">generic variables</a></strong>: for the HTML elements which carry no CSS class
</li>
<li>
<strong>element/component variables</strong>: variables that are specific to a Bulma element/component
</li>
</ul>
All Bulma components are styled using **Sass variables** and **CSS Variables** (which are also called CSS custom properties). Read more about them:
* [on the Sass website](https://sass-lang.com/documentation/variables/)
* [on the MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)
{% endcapture %}
<p>
Since these variables carry the <code>!default</code> flag, they can be assigned a <strong>new value</strong> either before or after having been imported.
</p>
</div>
{% include markdown.html content=markdown %}
{% include elements/anchor.html name="Strategy" %}
{% include docs/elements/anchor.html name="Global Sass Variables" %}
{% assign node_sass_link = site.data.links.by_id['customize-node-sass'] %}
{% assign sass_cli_link = site.data.links.by_id['customize-sass-cli'] %}
{% assign webpack_link = site.data.links.by_id['customize-webpack'] %}
{% capture markdown %}
Bulma uses Sass variables globally defines in 2 files located in the `utilities` folder:
<div class="content">
<p>
To customize Bulma, you will need to:
</p>
* `initial-variables.scss` where you define variables by literal value
* **colors** like `$blue: hsl(229, 53%, 53%)`
* **font sizes** like `$size-1: 3rem`
* **dimensions** like `$block-spacing: 1.5rem`
* **breakpoints** like `$tablet: 769px`
* **other values** like `$easing: ease-out` or `$radius-large: 0.75rem`
* `derived-variables.scss` where variables are calculated from the values set in the previous file
* **primary colors**:
* `$primary`
* `$link`
* `$success`
* `$info`
* `$warning`
* `$dark`
* **utility colors**:
* `$background`
* `$border`
* `$code` and `$pre`
* `$shadow-color`
* **typography**:
* `$family-primary`
* `$family-secondary`
* `$family-code`
* `$size-small`
* `$size-normal`
* `$size-medium`
* `$size-large`
* color maps:
* `$colors`
* `$shades`
* `$sizes`
{% endcapture %}
<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>
{% include markdown.html content=markdown %}
<p>
This can be achieved with any of the following:
</p>
{% include docs/elements/anchor.html name="Component Sass variables" %}
<ul>
<li>
<a href="{{ site.url }}{{ node_sass_link.path }}">node-sass</a>
</li>
<li>
the <a href="{{ site.url }}{{ sass_cli_link.path }}">Sass CLI</a>
</li>
<li>
<a href="{{ site.url }}{{ webpack_link.path }}">webpack</a>
</li>
</ul>
</div>
{% capture markdown %}
All Bulma components define its own Sass variables. For example, `components/breadcrumb.scss` define the following:
{% endcapture %}
{% include markdown.html content=markdown %}
{%
include docs/components/variables.html
tab="components"
subtab="breadcrumb"
hide_css_vars=true
%}
{% include docs/elements/anchor.html name="Global CSS Variables" %}
{% capture markdown %}
Bulma uses global CSS variables defined at the `:root` level. They are all prefixed with `bulma-`:
{% endcapture %}
{% include markdown.html content=markdown %}
{% highlight css %}
:root {
/* Colors and Lightness values */
--bulma-scheme-h: 221;
--bulma-scheme-s: 14%;
--bulma-light-l: 90%;
--bulma-light-invert-l: 20%;
--bulma-dark-l: 20%;
--bulma-dark-invert-l: 90%;
--bulma-soft-l: 90%;
--bulma-bold-l: 20%;
--bulma-soft-invert-l: 20%;
--bulma-bold-invert-l: 90%;
/* etc. */
/* Color Palettes */
--bulma-primary: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
--bulma-primary-base: hsla(var(--bulma-primary-h), var(--bulma-primary-s), var(--bulma-primary-l), 1);
--bulma-primary-rgb: 0, 209, 178;
--bulma-primary-h: 171deg;
--bulma-primary-s: 100%;
--bulma-primary-l: 41%;
--bulma-primary-00-l: 1%;
--bulma-primary-05-l: 6%;
--bulma-primary-10-l: 11%;
--bulma-primary-15-l: 16%;
--bulma-primary-20-l: 21%;
/* etc. */
/* Typography */
--bulma-family-primary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
--bulma-family-secondary: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
--bulma-family-code: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
--bulma-size-small: 0.75rem;
--bulma-size-normal: 1rem;
--bulma-size-medium: 1.25rem;
--bulma-size-large: 1.5rem;
/* etc. */
}
{% endhighlight %}
{% capture markdown %}
You can **overwrite** them simply by setting a new value at the same scope (or even a more specific one):
{% endcapture %}
{% include markdown.html content=markdown %}
{% highlight css %}
:root {
/* Set new values */
--bulma-scheme-h: 35;
--bulma-scheme-s: 20%;
}
{% endhighlight %}
{% include docs/elements/anchor.html name="Components CSS Variables" %}
{% capture markdown %}
Bulma is also styled at the **component** level. For example, here is how the `.title` element is styled:
{% endcapture %}
{% include markdown.html content=markdown %}
{% highlight css %}
.title {
--bulma-title-color: var(--bulma-text-strong);
--bulma-title-family: false;
--bulma-title-size: var(--bulma-size-3);
--bulma-title-weight: var(--bulma-weight-extrabold);
--bulma-title-line-height: 1.125;
--bulma-title-strong-color: inherit;
--bulma-title-strong-weight: inherit;
--bulma-title-sub-size: 0.75em;
--bulma-title-sup-size: 0.75em;
}
.title {
color: var(--bulma-title-color);
font-size: var(--bulma-title-size);
font-weight: var(--bulma-title-weight);
line-height: var(--bulma-title-line-height);
}
{% endhighlight %}
{% capture markdown %}
You can overwrite this simply by setting new values under the same scope:
{% endcapture %}
{% include markdown.html content=markdown %}
{% highlight css %}
.title {
--bulma-title-color: #fff;
--bulma-title-line-height: 1.6;
}
{% endhighlight %}

40
docs/documentation/customize/list-of-sass-variables.html Normal file
View File

@@ -0,0 +1,40 @@
---
title: List of Bulma Sass variables
layout: docs
theme: customize
doc-tab: customize
doc-subtab: sass-list
breadcrumb:
- home
- documentation
- customize
- customize-sass-list
---
{% include docs/elements/anchor.html name="Initial variables" %}
<div class="content">Defined at <code>utilities/initial-variables.scss</code>.</div>
{%
include docs/components/variables.html
tab="utilities"
subtab="initial-variables"
hide_css_vars=true
%}
{% include docs/elements/anchor.html name="Derived variables" %}
<div class="content">Defined at <code>utilities/derived-variables.scss</code>.</div>
{%
include docs/components/variables.html
tab="utilities"
subtab="derived-variables"
hide_css_vars=true
%}
{% include docs/elements/anchor.html name="Component variables" %}
<div class="content">
For each Bulma component, the list of Sass variables is listed at the bottom of its page.
</div>

109
docs/documentation/customize/variables.html
View File

@@ -1,109 +0,0 @@
---
title: Variables
layout: documentation
doc-tab: customize
doc-subtab: variables
breadcrumb:
- home
- documentation
- customize
- customize-variables
---
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
{% assign initial_vars = initial_variables.by_name %}
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
{% assign derived_vars = derived_variables.by_name %}
<div class="content">
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
<ol>
<li>
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
<ul>
<li><strong>colors</strong>: <code>{{ initial_vars['$blue'].name }}: {{ initial_vars['$blue'].value }}</code></li>
<li><strong>font sizes</strong>: <code>{{ initial_vars['$size-1'].name }}: {{ initial_vars['$size-1'].value }}</code></li>
<li><strong>dimensions</strong>: <code>{{ initial_vars['$gap'].name }}: {{ initial_vars['$gap'].value }}</code></li>
<li><strong>other values</strong>: <code>{{ initial_vars['$easing'].name }}: {{ initial_vars['$easing'].value }}</code> or <code>{{ initial_vars['$radius-large'].name }}: {{ initial_vars['$radius-large'].value }}</code></li>
</ul>
</li>
<li>
<strong>Derived variables</strong> where variables are <strong>calculated</strong> from the values set in the previous file. For example, you can have:
<ul>
<li>
<strong>Primary colors</strong> derived from the initial variables:
<ul>
<li><code>{{ derived_vars['$primary'].name }}: {{ derived_vars['$primary'].value }}</code></li>
<li><code>{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}</code></li>
<li><code>{{ derived_vars['$info'].name }}: {{ derived_vars['$info'].value }}</code></li>
<li><code>{{ derived_vars['$success'].name }}: {{ derived_vars['$success'].value }}</code></li>
<li><code>{{ derived_vars['$warning'].name }}: {{ derived_vars['$warning'].value }}</code></li>
<li><code>{{ derived_vars['$danger'].name }}: {{ derived_vars['$danger'].value }}</code></li>
<li><code>{{ derived_vars['$dark'].name }}: {{ derived_vars['$dark'].value }}</code></li>
<li><code>{{ derived_vars['$text'].name }}: {{ derived_vars['$text'].value }}</code></li>
</ul>
</li>
<li><code>{{ derived_vars['$background'].name }}: {{ derived_vars['$background'].value }}</code>: a general background color</li>
<li><code>{{ derived_vars['$link'].name }}: {{ derived_vars['$link'].value }}</code>: the links use the primary color</li>
<li><code>{{ derived_vars['$family-primary'].name }}: {{ derived_vars['$family-primary'].value }}</code>: the primary font family is the sans-serif one</li>
<li>
<strong>Lists and maps</strong> which are collections of already defined variables:
<ul>
<li><code>{{ derived_vars['$colors'].name }}: {{ derived_vars['$colors'].value }}</code></li>
<li><code>{{ derived_vars['$shades'].name }}: {{ derived_vars['$shades'].value }}</code></li>
<li><code>{{ derived_vars['$sizes'].name }}: {{ derived_vars['$sizes'].value }}</code></li>
</ul>
</li>
</ul>
</li>
</ol>
<p>
To <strong>override</strong> any of these variables, just set them <em>before</em> importing Bulma.
</p>
</div>
{% include elements/anchor.html name="Initial variables" %}
<div class="content">
<p>
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ initial_variables.file_path }}" target="_blank" rel="nofollow">initial variables</a> with a <strong>literal</strong> value.
</p>
</div>
<div class="table-container">
<table class="table is-bordered">
<tbody>
{% for variable_name in initial_variables.list %}
{% assign variable = initial_vars[variable_name] %}
{% include elements/variable-row.html variable=variable hide_computed =true%}
{% endfor %}
<tbody>
</table>
</div>
{% capture custom_message %}
These are <a href="https://github.com/jgthms/bulma/blob/master/sass/{{ derived_variables.file_path }}" target="_blank" rel="nofollow">variables</a> with a value that <strong>references</strong> another variable.
{% endcapture %}
{%
include components/variables.html
anchor_name = 'Derived variables'
data = derived_variables
custom_message = custom_message
table_class = 'is-bordered'
%}
{% capture custom_message %}
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
{% endcapture %}
{%
include components/variables.html
anchor_name = 'Generic variables'
tab = 'base'
subtab = 'generic'
custom_message = custom_message
table_class = 'is-bordered'
%}

37
docs/documentation/customize/with-css-variables.html Normal file
View File

@@ -0,0 +1,37 @@
---
title: Customize with CSS Variables
layout: docs
theme: customize
doc-tab: customize
doc-subtab: with-css-variables
breadcrumb:
- home
- documentation
- customize
- customize-with-css-variables
---
{% capture markdown %}
Bulma makes wide use of **CSS Variables** (also called CSS custom properties). Read more about them on the [dedicated page]({{ site.data.links.by_id['features-css-variables'].path }}).
{% endcapture %}
{% include markdown.html content=markdown %}
{% capture markdown %}
You can change the current Bulma simply by **opening your developer console** and changing a CSS variable's value.
If you set your CSS variables under the `:root` scope, you are **overwriting** Bulma's default theme. This can be done by with Sass or CSS.
To test out this CSS method, simply follow these steps:
<table class="table is-bordered">
{% include docs/elements/step.html image="images/themes/step-1-inspect.png" content="Open your browser inspector" width=496 height=748 %}
{% include docs/elements/step.html image="images/themes/step-2-html.png" content="Select the `html` element" width=528 height=232 %}
{% include docs/elements/step.html image="images/themes/step-3-var.png" content="Insert a new value for the `--bulma-link-h` variable (the hue of the link color)" width=376 height=120 %}
{% include docs/elements/step.html image="images/themes/step-4-menu.png" content="Notice how the CSS Helpers section in the side menu changes color" width=480 height=256 %}
</table>
{% endcapture %}
{% include docs/elements/anchor.html name="Customizing in the browser" %}
{% include markdown.html content=markdown %}

168
docs/documentation/customize/with-node-sass.html
View File

@@ -1,168 +0,0 @@
---
title: With node-sass
layout: documentation
doc-tab: customize
doc-subtab: node-sass
breadcrumb:
- home
- documentation
- customize
- customize-node-sass
---
{% capture dependencies %}
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.2",
"node-sass": "^4.9.2"
}
}
{% 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 %}
<div class="content">
<p>
Your <code>package.json</code> should look like this at this point.
</p>
</div>
{% highlight bash %}{{ package }}{% endhighlight %}
{% 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>. In <code>package.json</code>, add the following:
</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 <strong>terminal</strong> and run the following command:
</p>
</div>
{% highlight bash %}{{ npm_build }}{% endhighlight %}
<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>
<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 %}
{% include steps/create-package.html
number="1"
entry="sass/mystyles.scss"
%}
<hr>
{% include components/step.html
title="2. Install the dev dependencies"
content=step_2
%}
<hr>
{% include steps/create-sass-file.html
number="3"
path="../node_modules/bulma/bulma.sass"
%}
<hr>
{% include steps/create-html-page.html
number="4"
%}
<hr>
{% include components/step.html
title="5. Add node scripts to build your CSS"
content=step_5
%}
<hr>
{% include steps/add-custom-styles.html
number="6"
%}

146
docs/documentation/customize/with-sass-cli.html
View File

@@ -1,146 +0,0 @@
---
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 --no-source-map sass/mystyles.scss:css/mystyles.css
{% endcapture %}
{% capture watch_sass %}
sass --watch --no-source-map 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-" | append: "/bulma.sass" %}
{% 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"
%}

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

@@ -0,0 +1,198 @@
---
title: Customize with Sass
layout: docs
theme: customize
doc-tab: customize
doc-subtab: with-sass
breadcrumb:
- home
- documentation
- customize
- customize-with-sass
---
{% capture content %}
Bulma is built using [Sass](https://sass-lang.com/). It uses **Sass variables** to define colors, sizes, spacing, and other aspects of the framework.
{% endcapture %}
{% include markdown.html content=content %}
{% include docs/elements/anchor.html name="Install the dependencies" %}
{% capture content %}
To customize Bulma with Sass, you first need to [install Sass](https://sass-lang.com/install/). The recommended approach is to use the `sass` npm package.
{% endcapture %}
{% include markdown.html content=content %}
{% capture content %}
{% highlight bash %}
npm install sass
npm install bulma
{% endhighlight %}
In your `package.json`, add one script to build Bulma, one to build and watch for changes:
{% highlight json %}
"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
"start": "npm run build-bulma -- --watch"
{% endhighlight %}
Your whole `package.json` should look like this:
{% highlight json %}
{
"dependencies": {
"bulma": "^1.0.0",
"sass": "^1.72.0"
},
"scripts": {
"build-bulma": "sass --load-path=node_modules my-bulma-project.scss my-bulma-project.css",
"start": "npm run build-bulma -- --watch"
}
}
{% endhighlight %}
{% endcapture %}
{% include markdown.html content=content %}
{% include docs/elements/anchor.html name="Create your Sass file" %}
{% capture content %}
Next to your `package.json`, create a `my-bulma-project.scss` file.
To overwrite Bulma's Sass variables with your own value, write `@use` and the `with` keyword, which takes a Sass map:
{% highlight sass %}
@use "sass:color";
// Set your brand colors
$purple: #8a4d76;
$pink: #fa7c91;
$brown: #757763;
$beige-light: #d0d1cd;
$beige-lighter: #eff0eb;
// Path to Bulma's sass folder
@use "bulma/sass" with (
$family-primary: '"Nunito", sans-serif',
$grey-dark: $brown,
$grey-light: $beige-light,
$primary: $purple,
$link: $pink,
$control-border-width: 2px,
$input-shadow: none
);
// Import the Google Font
@import url("https://fonts.googleapis.com/css?family=Nunito:400,700");
{% endhighlight %}
{% endcapture %}
{% include markdown.html content=content %}
{% capture content %}
Test out your setup by running the following command:
{% highlight bash %}
npm run build-bulma
{% endhighlight %}
You should see **2 files** appearing next to the other ones:
* `my-bulma-project.css`, your CSS output file
* `my-bulma-project.css.map`, an optional source map
{% endcapture %}
{% include markdown.html content=content %}
{% include docs/elements/anchor.html name="Add an HTML page" %}
{% capture content %}
To view your Bulma project come to life, create an `index.html` page with the following content:
{% endcapture %}
{% include markdown.html content=content %}
<div class="bd-example bd-highlight-full">
{% highlight html -%}
{%- include docs/snippets/custom-page.html -%}
{%- endhighlight %}
</div>
{% include docs/elements/anchor.html name="Final result" %}
{% capture content %}
Your project folder should look like this:
{% endcapture %}
{% include markdown.html content=content %}
<table class="table is-bordered">
<tr>
<td>
<div class="icon-text has-text-html">
<span class="icon">
<i class="fa-brands fa-html5"></i>
</span>
</div>
</td>
<td><code>index.html</code></td>
</tr>
<tr>
<td>
<div class="icon-text has-text-css">
<span class="icon">
<i class="fa-brands fa-css3"></i>
</span>
</div>
</td>
<td><code>my-bulma-project.css</code></td>
</tr>
<tr>
<td>
<div class="icon-text has-text-success">
<span class="icon">
<i class="fa-solid fa-code"></i>
</span>
</div>
</td>
<td><code>my-bulma-project.css.map</code></td>
</tr>
<tr>
<td>
<div class="icon-text has-text-sass">
<span class="icon">
<i class="fa-brands fa-sass"></i>
</span>
</div>
</td>
<td><code>my-bulma-project.scss</code></td>
</tr>
<tr>
<td>
<div class="icon-text has-text-js">
<span class="icon">
<i class="fa-brands fa-js"></i>
</span>
</div>
</td>
<td><code>package.json</code></td>
</tr>
</table>
<div class="content">
<p>And your final page will look like this:</p>
</div>
{% include
screenshot.html
path="screenshots/custom-page.png"
width=640
height=330
caption="Your final Bulma page"
%}

12
docs/documentation/customize/with-vite-js.html Normal file
View File

@@ -0,0 +1,12 @@
---
title: Customize with ViteJS
layout: docs
theme: customize
doc-tab: customize
doc-subtab: with-vitejs
breadcrumb:
- home
- documentation
- customize
- customize-with-vitejs
---

285
docs/documentation/customize/with-webpack.html
View File

@@ -1,285 +0,0 @@
---
title: With webpack
layout: documentation
doc-tab: customize
doc-subtab: webpack
breadcrumb:
- home
- documentation
- customize
- customize-webpack
---
{% capture dependencies %}
npm install bulma --save-dev
npm install css-loader --save-dev
npm install extract-text-webpack-plugin@next --save-dev
npm install mini-css-extract-plugin --save-dev
npm install node-sass --save-dev
npm install sass-loader --save-dev
npm install style-loader --save-dev
npm install webpack --save-dev
npm install webpack-cli --save-dev
{% endcapture %}
{% capture package %}
{
"name": "mybulma",
"version": "1.0.0",
"main": "webpack.config.js",
"license": "MIT",
"devDependencies": {
"bulma": "^0.7.2",
"css-loader": "^1.0.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"node-sass": "^4.9.2",
"sass-loader": "^7.0.3",
"style-loader": "^0.21.0",
"webpack": "^4.16.0",
"webpack-cli": "^3.0.8"
}
}
{% endcapture %}
{% capture step_2 %}
<div class="content">
<p>
Install the packages required to parse and build your CSS:
</p>
</div>
<!--email_off-->{% highlight bash %}{{ dependencies }}{% endhighlight %}<!--/email_off-->
<div class="content">
<p>
Your <code>package.json</code> should look like this at this point.
</p>
</div>
{% highlight bash %}{{ package }}{% endhighlight %}
{% endcapture %}
{% capture config %}
const path = require('path');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'sass-loader'
]
})
}]
},
plugins: [
new ExtractTextPlugin('css/mystyles.css'),
]
};
{% endcapture %}
{% capture configv4 %}
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'js/bundle.js'
},
module: {
rules: [{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: 'css-loader'
},
{
loader: 'sass-loader',
options: {
sourceMap: true,
// options...
}
}
]
}]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/mystyles.css'
}),
]
};
{% endcapture %}
{% capture step_3 %}
<div class="content">
<p>
Create a <code>webpack.config.js</code> file:
</p>
</div>
<div class="bd-highlight-full">
{% highlight js %}{{ config }}{% endhighlight %}
</div>
<div class="content">
<p>
This setup takes the <code>src</code> folder as input, and outputs in the <code>dist</code> folder.
</p>
</div>
{% endcapture %}
{% capture step_3_5 %}
<div class="content">
<p>
Create a <code>webpack.config.js</code> file:
</p>
</div>
<div class="bd-highlight-full">
{% highlight js %}{{ configv4 }}{% endhighlight %}
</div>
<div class="content">
<p>
This setup takes the <code>src</code> folder as input, and outputs in the <code>dist</code> folder.
</p>
</div>
{% endcapture %}
{% capture require_css %}
require('./mystyles.scss');
{% endcapture %}
{% capture step_4 %}
<div class="content">
<p>
Create a <code>src</code> folder in which you add a file called <code>index.js</code> with the following content:
</p>
</div>
{% highlight js %}{{ require_css }}{% endhighlight %}
{% endcapture %}
{% capture step_6 %}
<div class="content">
<p>
Create a <code>dist</code> folder in which you add a <code>css</code> folder, and a <code>js</code> folder. Leave these last two folders empty. Their content will be generated by the webpack build.
</p>
</div>
{% endcapture %}
{% capture webpack_script %}
"scripts": {
"build": "webpack --mode production"
},
{% endcapture %}
{% capture npm_build %}
npm run build
{% endcapture %}
{% capture npm_build_success %}
Rendering Complete, saving .css file...
Wrote CSS to /path/to/mybulma/css/mystyles.css
{% endcapture %}
{% capture step_8 %}
<div class="content">
<p>
In <code>package.json</code>, add the following:
</p>
</div>
{% highlight html %}{{ webpack_script }}{% endhighlight %}
<div class="content">
<p>
To test it out, go in your <strong>terminal</strong> and run the following command:
</p>
</div>
{% highlight bash %}{{ npm_build }}{% endhighlight %}
{% endcapture %}
{% include steps/create-package.html
number="1"
entry="webpack.config.js"
%}
<hr>
{% include components/step.html
title="2. Install the dev dependencies"
content=step_2
%}
<hr>
{% include components/step.html
title="3. Create a webpack config (Webpack <= 3)"
content=step_3
%}
<hr>
{% include components/step.html
title="3.5. Create a webpack config (Webpack 4)"
content=step_3_5
%}
<hr>
{% include components/step.html
title="4. Create a <code>src</code> folder"
content=step_4
%}
<hr>
{% include steps/create-sass-file.html
number="5"
path='~bulma/bulma'
bis=true
%}
<hr>
{% include components/step.html
title="6. Create a <code>dist</code> folder"
content=step_6
%}
<hr>
{% include steps/create-html-page.html
number="7"
dist=true
%}
<hr>
{% include components/step.html
title="8. Add node scripts to build your bundle"
content=step_8
%}
<hr>
{% include steps/add-custom-styles.html
number="9"
build=true
%}