bulma/docs/bulma-start.html
Gary Wang df8c3bf31d Update bulma-start.html
bash command fix.
2020-07-16 14:05:27 +01:00

167 lines
4.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: 'Bulma start'
fulltitle: 'Bulma start: a tiny npm package to get started with Bulma'
layout: more
route: bulma-start
version: 0.0.4
download_url: https://github.com/jgthms/bulma-start/releases/download/0.0.4/bulma-start-0.0.4.zip
github_url: https://github.com/jgthms/bulma-start
npm_url: https://www.npmjs.com/package/bulma-start
breadcrumb:
- home
- more
- bulma-start
---
<div class="columns">
<div class="column is-5-widescreen">
<p class="title is-4">
<code><a target="_blank" href="{{ page.npm_url }}">bulma-start</a></code>
is a tiny npm package that includes the <code>npm</code>
<strong>dependencies</strong> you need to
<strong>build your own website</strong> with Bulma.
</p>
<div class="buttons">
<a
class="button is-medium is-success"
target="_blank"
href="{{ page.download_url }}"
>
<span><strong>Download v{{ page.version }}</strong></span>
</a>
</div>
<div class="buttons">
<a
class="button is-small is-outlined is-dark"
target="_blank"
href="{{ page.github_url }}"
>
<span><strong>GitHub</strong> page</span>
</a>
<a
class="button is-small is-outlined is-danger"
target="_blank"
href="{{ page.npm_url }}"
>
<span><strong>npm</strong> page</span>
</a>
</div>
</div>
<div class="column is-narrow">
<p>
<a href="{{ page.npm_url }}">
<img
src="{{ site.url }}/images/bulma-start.png"
alt="Bulma: a Flexbox CSS framework"
style="max-width: 100%;"
width="438"
height="200"
/>
</a>
</p>
</div>
</div>
{% include elements/anchor.html name="Install" %}
<div class="content">
<p>
<a href="{{ page.download_url }}" rel="nofollow noopener"
><strong>Download bulma-start {{ page.version }} (.zip)</strong></a
>, rename to your project's name (i.e. <code>my-new-bulma-site</code>) and:
</p>
</div>
{% highlight bash %} cd my-new-bulma-site && npm install && npm start {% endhighlight
%} For more, visit
<a href="https://github.com/jgthms/bulma-start#get-your-feet-wet"
>bulma-start README on Github.</a
>
{% include elements/anchor.html name="Whats included" %}
<div class="content">
<p>
The <code>npm</code> dependencies included in <code>package.json</code> are:
</p>
<ul>
<li>
<code
><a href="https://github.com/jgthms/bulma" target="_blank"
>bulma</a
></code
>
</li>
<li>
<code
><a href="https://github.com/sass/node-sass" target="_blank"
>node-sass</a
></code
>
to compile your own Sass file
</li>
<li>
<code
><a href="https://github.com/postcss/postcss-cli" target="_blank"
>postcss-cli</a
></code
>
and
<code
><a href="https://github.com/postcss/autoprefixer" target="_blank"
>autoprefixer</a
></code
>
to add support for older browsers
</li>
<li>
<code
><a href="https://babeljs.io/docs/usage/cli/" target="_blank"
>babel-cli</a
></code
>,
<code
><a href="https://github.com/babel/babel-preset-env" target="_blank"
>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>
</div>