Here’s a video playlist on Bulma CSS framework. It’s similar to Bootstrap but doesn’t have any JS dependencies. It’s also simpler than Bootstrap.
I watched part of it and it seems good. I’d set it up a different way than in the first video though, so you can use Bulma’s SCSS variables.
To try it, run these commands in a new project directory:
$ npm init -y
$ npm install -D parcel-bundler
$ npm install -S bulma
Then create a directory called src
with two files:
src/index.html
-
src/styles/main.scss
(this is in a subdirectory namedstyles
)
Copy this into the index.html
file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>hello world</title>
<link rel="stylesheet" href="./styles/main.scss" />
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title">hello world</h1>
<p class="subtitle">welcome to the site</p>
<p>
Ipsum exercitationem optio consectetur ab quasi consectetur,
vero voluptatem Quia numquam tempore totam magnam impedit
Eius ad molestias atque delectus nesciunt Officiis voluptate
nesciunt delectus debitis odit? Dolor doloribus aperiam.
</p>
</div>
</section>
</body>
</html>
Add this line to the main.scss
file to import Bulma’s sass file from the node_modules
directory that was created by the commands at the top of this post:
@import "~bulma/bulma.sass";
In the package.json
file, add a “start” script in the “scripts” section like this:
"scripts": {
"start": "parcel serve src/index.html"
},
Then type npm start
and visit localhost:1234
to view the site. It will live reload, and you can use all the features of Bulma including customization with SCSS variables.
The HTML I posted above should start out looking like this:
Here’s the playlist: