<!
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My first Bulma website</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<section class="hero is-medium is-primary">
<div class="hero-body">
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<h1 class="title is-2 is-spaced">
Hello Bulma!
</h1>
<h2 class="subtitle is-4">
Congratulations! You're running the <strong>Bulma start</strong>
project.
<br>
It includes everything you need to <strong>build your own
website</strong> with Bulma.
</h2>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<div class="content">
<h3>What's included</h3>
<p>
The <code>npm</code> dependencies included in
<code>package.json</code> are:
</p>
<ul>
<li>
<code><a href="https://github.com/jgthms/bulma">bulma</a></code>
</li>
<li>
<code><a href="https://github.com/sass/node-sass">node-
sass</a></code> to compile your own Sass file
</li>
<li>
<code><a href="https://github.com/postcss/postcss-cli">postcss-
cli</a></code> and <code><a
href="https://github.com/postcss/autoprefixer">autoprefixer</a></code> to add
support for older browsers
</li>
<li>
<code><a href="https://babeljs.io/docs/usage/cli/">babel-
cli</a></code>,
<code><a href="https://github.com/babel/babel-preset-env">babel-
preset-env</a></code>
and
<code><a href="https://github.com/jmcriffey/babel-preset-es2015-
ie">babel-preset-es2015-ie</a></code>
for compiling ES6 JavaScript files
</li>
</ul>
<p>
Apart from <code>package.json</code>, the following files are
included:
</p>
<ul>
<li>
<code>.babelrc</code> configuration file for <a
href="https://babeljs.io/">Babel</a>
</li>
<li>
<code>.gitignore</code> common <a href="https://git-
scm.com/">Git</a> ignored files
</li>
<li>
<code>index.html</code> this HTML5 file
</li>
<li>
<code>_sass/main.scss</code> a basic SCSS file that
<strong>imports Bulma</strong> and explains how to <strong>customize</strong> your
styles, and compiles to <code>css/main.css</code>
</li>
<li>
<code>_javascript/main.js</code> an ES6 JavaScript that compiles
to <code>lib/main.js</code>
</li>
</ul>
<h3>Try it out!</h3>
<p>
To see if your setup works, follow these steps:
</p>
<ol>
<li>
<p>
<strong>Move</strong> to this directory:
<br>
<pre><code>cd bulma-start</code></pre>
</p>
</li>
<li>
<p>
<strong>Install</strong> all dependencies:
<br>
<pre><code>npm install</code></pre>
</p>
</li>
<li>
<p>
<strong>Start</strong> the CSS and JS watchers:
<br>
<pre><code>npm start</code></pre>
</p>
</li>
<li>
<p>
<strong>Edit</strong> <code>_sass/main.scss</code> by adding
the following rule at the <strong>end</strong> of the file:
<br>
<pre><span style="color: #22863a;">html</span> {
<span style="color: #005cc5;"><span style="color: #005cc5;">background-
color</span></span>: <span style="color: #24292e">$green</span>;
}</pre>
</p>
</li>
</ol>
<p>
The page background should turn <strong class="has-text-
success">green</strong>!
</p>
<h3>Get started</h3>
<p>
You're <strong>ready</strong> to create your own designs with
Bulma. Just edit or duplicate this page, or simply create a new one!
<br>
For example, this page is <strong>only</strong> built with the
following <strong>Bulma elements</strong>:
</p>
</div>
<table class="table is-bordered is-fullwidth">
<thead>
<tr>
<th>Type</th>
<th>CSS class</th>
</tr>
</thead>
<tbody>
<tr>
<th>Columns</th>
<td>
<code><a
href="http://bulma.io/documentation/columns/basics">columns</a></code>
<code><a
href="http://bulma.io/documentation/columns/basics">column</a></code>
</td>
</tr>
<tr>
<th>Layout</th>
<td>
<code><a
href="http://bulma.io/documentation/layout/section">section</a></code>
<code><a
href="http://bulma.io/documentation/layout/container">container</a></code>
<code><a
href="http://bulma.io/documentation/layout/footer">footer</a></code>
</td>
</tr>
<tr>
<th>Elements</th>
<td>
<code><a
href="http://bulma.io/documentation/elements/button">button</a></code>
<code><a
href="http://bulma.io/documentation/elements/content">content</a></code>
<code><a
href="http://bulma.io/documentation/elements/title">title</a></code>
<code><a
href="http://bulma.io/documentation/elements/title">subtitle</a></code>
</td>
</tr>
<tr>
<th>Form</th>
<td>
<code><a
href="http://bulma.io/documentation/form/general">field</a></code>
<code><a
href="http://bulma.io/documentation/form/general">control</a></code>
</td>
</tr>
<tr>
<th>Helpers</th>
<td>
<code><a
href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-
centered</a></code>
<code><a
href="http://bulma.io/documentation/modifiers/typography-helpers/">has-text-weight-
semibold</a></code>
</td>
</tr>
</tbody>
</table>
<div class="content">
<p>
If you want to <strong>learn more</strong>, follow these links:
</p>
</div>
<div class="field is-grouped">
<p class="control">
<a class="button is-medium is-primary" href="http://bulma.io">
<strong class="has-text-weight-semibold">Bulma homepage</strong>
</a>
</p>
<p class="control">
<a class="button is-medium is-link"
href="http://bulma.io/documentation/overview/start/">
<strong class="has-text-weight-semibold">Documentation</strong>
</a>
</p>
</div>
</div>
</div>
</div>
</section>
<footer class="footer has-text-centered">
<div class="container">
<div class="columns">
<div class="column is-8-desktop is-offset-2-desktop">
<p>
<strong class="has-text-weight-semibold">
<a href="https://www.npmjs.com/package/bulma-start">bulma-
start@0.0.3</a>
</strong>
</p>
<p>
<small>
Source code licensed <a href="http://opensource.org/licenses/mit-
license.php">MIT</a>
</small>
</p>
<p style="margin-top: 1rem;">
<a href="http://bulma.io">
<img src="made-with-bulma.png" alt="Made with Bulma" width="128"
height="24">
</a>
</p>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="lib/main.js"></script>
</body>
</html>
