Scribd
Upload
154 views5 pages

Bulma and Others

Uploaded by

Aquedudct08090

This document is an HTML file that provides an introduction and overview for using the Bulma CSS framework to build a website. It includes sections describing what is included in the starter project, how to set up the project, customize styles, and links to learn more about Bulma. Key elements used include columns, sections, titles, and other common Bulma components.

Copyright:

© All Rights Reserved
Download as TXT, PDF, TXT or read online from Scribd
Download as txt, pdf, or txt

Bulma and Others

Uploaded by

Aquedudct08090
154 views5 pages
This document is an HTML file that provides an introduction and overview for using the Bulma CSS framework to build a website. It includes sections describing what is included in the starter project, how to set up the project, customize styles, and links to learn more about Bulma. Key elements used include columns, sections, titles, and other common Bulma components.

Original Description:

Bulma is a framework for CSS development

Copyright

© © All Rights Reserved

Available Formats

TXT, PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

This document is an HTML file that provides an introduction and overview for using the Bulma CSS framework to build a website. It includes sections describing what is included in the starter project, how to set up the project, customize styles, and links to learn more about Bulma. Key elements used include columns, sections, titles, and other common Bulma components.

Copyright:

© All Rights Reserved
Download as TXT, PDF, TXT or read online from Scribd
Download as txt, pdf, or txt
154 views5 pages

Bulma and Others

Uploaded by

Aquedudct08090
This document is an HTML file that provides an introduction and overview for using the Bulma CSS framework to build a website. It includes sections describing what is included in the starter project, how to set up the project, customize styles, and links to learn more about Bulma. Key elements used include columns, sections, titles, and other common Bulma components.

Copyright:

© All Rights Reserved
Download as TXT, PDF, TXT or read online from Scribd
Download as txt, pdf, or txt
You are on page 1/ 5

<!

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>

You might also like