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
--- /dev/null
+<!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>
\ No newline at end of file
{% 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 %}
<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>
<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>
</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>
projects / thirdparty / bulma.git / commitdiff
