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

Add getting started

Browse Source
This commit is contained in:
Jeremy Thomas
2017-07-29 15:47:33 +01:00
parent 2bd66119f0
commit 78f297c5fb
4 changed files with 56 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_config.yml
View File

@@ -8,7 +8,7 @@ description: "Bulma is an open source CSS framework based on Flexbox and built
markdown: kramdown markdown: kramdown
permalink: pretty permalink: pretty
url: http://bulma.io url: http://bulma.io
fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css fontawesome: https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
exclude: ['fontawesome', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock'] exclude: ['fontawesome', 'node_modules', 'templates', '.babelrc', 'bulma-docs.sass', 'docker-compose.yml', 'package.json', 'yarn.lock']
# Variables # Variables

21
docs/_includes/getting-started.html Normal file
View File

@@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="{{ site.fontawesome }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/{{ site.version }}/css/bulma.min.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">
Hello World
</h1>
<p class="subtitle">
My first website with <strong>Bulma</strong>!
</p>
</div>
</section>
</body>
</html>

2
docs/documentation/elements/tag.html
View File

@@ -123,7 +123,7 @@ variables:
{% capture tags_delete_addons %} {% capture tags_delete_addons %}
<div class="tags has-addons"> <div class="tags has-addons">
<span class="tag is-info">Alex Smith</span> <span class="tag is-danger">Alex Smith</span>
<a class="tag is-delete"></a> <a class="tag is-delete"></a>
</div> </div>
{% endcapture %} {% endcapture %}

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

@@ -9,11 +9,28 @@ doc-subtab: start
<section class="section"> <section class="section">
<div class="container"> <div class="container">
<h1 class="title"><strong>3</strong> ways to start</h1> <h1 class="title">Getting started</h1>
<h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2> <h2 class="subtitle">You only need <strong>1 CSS file</strong> to use Bulma</h2>
<hr> <hr>
<div class="content">
<p>
There are several ways to <strong>get started</strong> with Bulma. You can either:
</p>
<ol>
<li>
use <strong>npm</strong> to install the Bulma package
</li>
<li>
use the cdnjs <strong>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"> <article class="media is-large">
<div class="media-left"> <div class="media-left">
<p class="title is-5">1</p> <p class="title is-5">1</p>
@@ -22,9 +39,7 @@ doc-subtab: start
<p class="title is-5"> <p class="title is-5">
Use <strong>NPM</strong> <em>(recommended)</em>: Use <strong>NPM</strong> <em>(recommended)</em>:
</p> </p>
{% highlight bash %} {% highlight bash %}npm install bulma{% endhighlight %}
npm install bulma
{% endhighlight %}
</div> </div>
</article> </article>
@@ -62,10 +77,21 @@ npm install bulma
</div> </div>
<div class="message-body"> <div class="message-body">
<p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p> <p>If you want to use icons with Bulma, don't forget to include <a href="https://fortawesome.github.io/Font-Awesome/">Font Awesome</a>:</p>
{% highlight html %} {% highlight html %}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">{% endhighlight %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
{% endhighlight %}
</div> </div>
</div> </div>
{% include heading.html name="Starter template" %}
<div class="content">
<p>
If you want to get started <strong>right away</strong>, you can use this <strong>HTML starter template</strong>. Just copy/paste this code in a file and save it on your computer.
</p>
</div>
<div class="example highlight-full">
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
</div>
</div> </div>
</section> </section>