Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 10:14: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

176
docs/documentation/start/installation.html Normal file
View File

@@ -0,0 +1,176 @@
---
title: How to install Bulma
layout: docs
theme: start
doc-tab: start
doc-subtab: installation
breadcrumb:
- home
- documentation
- start
- start-installation
---
{% 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 %}
{% 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 %}
<div class="bd-options">
<div class="bd-option bd-theme-css">
<div class="block media is-align-items-center">
<div class="media-left">
<span class="icon is-flex is-large">
<i class="fab fa-css3 fa-2x"></i>
</span>
</div>
<div class="media-content">
<p class="title is-4">Get the Bulma <strong>CSS</strong> file</p>
<p class="subtitle">A single <code>.css</code> file that includes all 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>Use a CDN</strong>
</p>
<p class="block">
You can import the CSS file directly from
<a href="{{ site.data.meta.jsdelivr }}" target="_blank">jsDelivr</a>:
</p>
{%
include docs/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>
{%
include docs/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="bd-option-or">
<p>Or</p>
</div>
<div class="bd-option bd-theme-sass">
<div class="block media is-align-items-center">
<div class="media-left">
<span class="icon is-flex is-large">
<i class="fab fa-sass fa-2x"></i>
</span>
</div>
<div class="media-content">
<p class="title is-4">Get the Bulma <strong>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 add bulma{% endhighlight %} {% endcapture %}
{%
include docs/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 docs/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="notification is-warning is-light" style="font-size: 1rem">
Note that the GitHub repository also includes this documentation, so it’s significantly bigger than the NPM
package.
</div>
</div>
</div>
</div>