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

Bulma v9 website (#3249)

Browse Source 
* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/documentation/overview/customize.html
View File

@@ -84,7 +84,7 @@ $colors: map-merge($colors, $addColors);
<p class="subtitle is-6">
Create a file called <code>mystyles.scss</code> and add your own colors, set new fonts, override Bulma's default styles...
</p>
<div class="highlight-full">
<div class="bd-highlight-full">
{% highlight sass %}{{ scss_code }}{% endhighlight %}
</div>
</div>

2
docs/documentation/overview/modifiers.html
View File

@@ -143,7 +143,7 @@ breadcrumb:
</p>
</div>
<div class="column is-half">
<div class="highlight-full">
<div class="bd-highlight-full">
{% highlight html %}{{ button_colors }}{% endhighlight %}
</div>
</div>

4
docs/documentation/overview/modular.html
View File

@@ -99,7 +99,5 @@ breadcrumb:
</li>
</ul>
<div class="bd-snippet-code highlight-full">
{% highlight html %}{{ buttons }}{% endhighlight %}
</div>
{% highlight html %}{{ buttons }}{% endhighlight %}
</div>

4
docs/documentation/overview/responsiveness.html
View File

@@ -220,7 +220,7 @@ $fullhd-enabled: false
</p>
</div>
<div class="highlight-full">
<div class="bd-highlight-full">
{% highlight sass %}{{ scss_code }}{% endhighlight %}
</div>
@@ -230,7 +230,7 @@ $fullhd-enabled: false
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
{% endcapture %}
{% include elements/variables.html
{% include components/variables.html
type='element'
variables_keys=page.variables_keys
custom_message=custom_message

221
docs/documentation/overview/start.html
View File

@@ -12,68 +12,179 @@ breadcrumb:
<div class="content">
<p>
There are several ways to <strong>get started</strong> with Bulma. You can either:
Bulma is a <strong>CSS library</strong>. This means it provides CSS classes to help you style your HTML code.
<br>
To use Bulma, you can either use the pre-compiled <code>.css</code> file or install the <code>.sass</code> files so you can customize it to your needs.
</p>
<ol>
<li>
use <strong>npm</strong> to install the Bulma package
</li>
<li>
use the <strong>jsDelivr CDN</strong> to link to the Bulma stylesheet
</li>
<li>
use the <strong>GitHub repository</strong> to get the latest development version
</li>
</ol>
</div>
<article class="media is-large">
<div class="media-left">
<p class="title is-5">1</p>
</div>
<div class="media-content">
<p class="title is-5">
Use <strong>NPM</strong> <em>(recommended)</em>:
</p>
{% highlight bash %}npm install bulma{% endhighlight %}
</div>
</article>
<div class="bd-options">
<div class="bd-option">
<div class="block media is-align-items-center">
<div class="media-left">
<span class="icon is-flex is-large has-text-link">
<i class="fab fa-css3 fa-2x"></i>
</span>
</div>
<article class="media is-large">
<div class="media-left">
<p class="title is-5">2</p>
</div>
<div class="media-content">
<p class="title is-5">
Use the <a href="https://www.jsdelivr.com/" target="_blank">jsDelivr</a> <strong>CDN</strong>
<br>
<a href="https://www.jsdelivr.com/package/npm/bulma">https://www.jsdelivr.com/package/npm/bulma</a>
</p>
</div>
</article>
<div class="media-content">
<p class="title is-4">Get the Bulma <strong class="has-text-link">CSS</strong> file</p>
<p class="subtitle">A single <code>.css</code> file that includes all of Bulma</p>
</div>
</div>
<article class="media is-large">
<div class="media-left">
<p class="title is-5">3</p>
</div>
<div class="media-content">
<p class="title is-5">
Download from the <strong>repository</strong>
<br>
<a href="https://github.com/jgthms/bulma/tree/master/css">https://github.com/jgthms/bulma/tree/master/css</a>
</p>
</div>
</article>
<div class="bd-option-item">
<p class="bd-option-title block has-text-grey-light is-size-5">
<span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
Option 1. <strong>Use a CDN</strong>
</p>
<hr>
<p class="block">
You can import the CSS file directly from <a href="{{ site.data.meta.jsdelivr }}" target="_blank">jsDelivr</a>:
</p>
<div class="message is-info">
<div class="message-header">
Font Awesome icons
{% capture jsdelivr_a %}
{% highlight css %}@import "https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css"{% endhighlight %}
{% endcapture %}
{% capture jsdelivr_b %}
{% highlight html %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma.min.css">{% endhighlight %}
{% endcapture %}
{%
include components/tabs.html
button_a="CSS @import"
button_b="HTML <link>"
item_a=jsdelivr_a
item_b=jsdelivr_b
%}
<p class="block">
The <strong>RTL version</strong> is also available:
</p>
{% capture jsdelivr_rtl_a %}
{% highlight css %}@import "https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css"{% endhighlight %}
{% endcapture %}
{% capture jsdelivr_rtl_b %}
{% highlight html %}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@{{ site.data.meta.version }}/css/bulma-rtl.min.css">{% endhighlight %}
{% endcapture %}
{%
include components/tabs.html
button_a="CSS @import"
button_b="HTML <link>"
item_a=jsdelivr_rtl_a
item_b=jsdelivr_rtl_b
%}
<p class="block">
Bulma is also available via <a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
</p>
</div>
<div class="bd-option-item">
<p class="bd-option-title block has-text-grey-light is-size-5">
Option 2. <strong>Download the Github release</strong>
</p>
<div class="block">
You can get the latest Bulma release as a <code>.zip</code> from GitHub:
</div>
<a class="button bd-fat-button is-primary is-light" href="{{ site.data.meta.download }}">
Download v{{ site.data.meta.version }}
</a>
</div>
</div>
<div class="message-body">
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fontawesome.com">Font Awesome 5</a>:</p>
{% highlight html %}<script defer src="{{ site.data.icons.fontawesome5 }}"></script>{% endhighlight %}
<div class="bd-option-or">
<p>Or</p>
</div>
<div class="bd-option">
<div class="block media is-align-items-center">
<div class="media-left">
<span class="icon is-flex is-large has-text-sass">
<i class="fab fa-sass fa-2x"></i>
</span>
</div>
<div class="media-content">
<p class="title is-4">Get the Bulma <strong class="has-text-sass">Sass</strong> library</p>
<p class="subtitle">A collection of <code>.sass</code> files to build your own version of Bulma</p>
</div>
</div>
<div class="bd-option-item">
<p class="bd-option-title block has-text-grey-light is-size-5">
<span class="button bd-fat-button is-success is-light is-pulled-right">Recommended</span>
Option 1. <strong>Install the NPM package</strong>
</p>
<p class="block">
Bulma is available through <a href="{{ site.data.meta.npm }}" target="_blank">npm</a>:
</p>
{% capture npm_item %}
{% highlight bash %}npm install bulma{% endhighlight %}
{% endcapture %}
{% capture yarn_item %}
{% highlight bash %}yarn install bulma{% endhighlight %}
{% endcapture %}
{%
include components/tabs.html
button_a="npm"
button_b="yarn"
item_a=npm_item
item_b=yarn_item
%}
<p class="block">
Bulma is also available via <a href="{{ site.data.meta.cdnjs }}" target="_blank">cdnjs</a>.
</p>
</div>
<div class="bd-option-item">
<p class="bd-option-title block has-text-grey-light is-size-5">
Option 2. <strong>Clone the GitHub repository</strong>
</p>
<p class="block">
Bulma is available on <a href="{{ site.data.meta.github }}" target="_blank">GitHub</a>:
</p>
{% capture git_ssh %}
{% highlight bash %}{{ site.data.meta.git_ssh }}{% endhighlight %}
{% endcapture %}
{% capture git_https %}
{% highlight bash %}{{ site.data.meta.git_https }}{% endhighlight %}
{% endcapture %}
{% capture git_cli %}
{% highlight bash %}{{ site.data.meta.git_cli }}{% endhighlight %}
{% endcapture %}
{%
include components/tabs.html
button_a="SSH"
button_b="HTTPS"
button_c="GitHub CLI"
item_a=git_ssh
item_b=git_https
item_c=git_cli
%}
<div class="message is-warning">
<div class="message-body">
Note that the GitHub repository also includes this documentation, so it’s significantly bigger than the NPM package.
</div>
</div>
</div>
</div>
</div>
@@ -117,7 +228,7 @@ breadcrumb:
</p>
</div>
<div class="bd-example highlight-full">
<div class="bd-example bd-highlight-full">
{% highlight html %}{% include snippets/getting-started.html %}{% endhighlight %}
</div>

4
docs/documentation/overview/variables.html
View File

@@ -88,7 +88,7 @@ breadcrumb:
{% endcapture %}
{%
include elements/variables.html
include components/variables.html
anchor_name = 'Derived variables'
data = derived_variables
custom_message = custom_message
@@ -100,7 +100,7 @@ breadcrumb:
{% endcapture %}
{%
include elements/variables.html
include components/variables.html
anchor_name = 'Generic variables'
tab = 'base'
subtab = 'generic'