library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions 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
Show Stats 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
permalink: pretty
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']
# 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 %}
<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>
</div>
{% endcapture %}

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

@ -9,11 +9,28 @@ doc-subtab: start
<section class="section">
<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>
<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">
<div class="media-left">
<p class="title is-5">1</p>
@ -22,9 +39,7 @@ doc-subtab: start
<p class="title is-5">
Use <strong>NPM</strong> <em>(recommended)</em>:
</p>
{% highlight bash %}
npm install bulma
{% endhighlight %}
{% highlight bash %}npm install bulma{% endhighlight %}
</div>
</article>
@ -62,10 +77,21 @@ npm install bulma
</div>
<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>
{% highlight html %}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
{% endhighlight %}
{% highlight html %}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">{% endhighlight %}
</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>
</section>