Basic tutorial

The lowdown

This tutorial lets you jump into Bedrock quickly.

We assume you have some knowledge about modern web development, including working with Git, HTML and SCSS.

One part that might be a bit more exotic about working with Bedrock is the usage of the Pug templating language.

If this is new to you, see working with Pug.


Grabbing Bedrock

Download the latest version of Bedrock on Github.

We recommend cloning the repository:

git clone https://github.com/usebedrock/bedrock.git

Navigate into the repo you just cloned:

cd bedrock

Next, install the project’s node modules:

npm install

(We require node above 8.3 and gulp to be installed globally – take a look at Bedrock’s requirements)

After installing the node modules, run gulp:

gulp

This starts a development server and opens your default browser at http://localhost:3000.

Please keep this server running while working on a Bedrock project.

Trying a few things

To demo some of Bedrock’s functionalities, we are going to be trying out some things and taking a peek inside a Bedrock project.

In order do this, we will be using the Bootstrap 4 Bedrock Base.

Bedrock Bases are starting points which contain predefined HTML, CSS and JS so you can get started prototyping in a fast manner.

If you have been following along you are likely already running Bedrock, so first stop your server with Ctrl+C.

Now run the following command:

git checkout bootstrap4base

Now, run npm install again to install the dependencies of this Bedrock base:

npm install

Now, run gulp again to re-start your server:

gulp

You should be seeing a page similar to the online version of the Bootstrap 4 base.

Screencast: creating a web app prototype

Now, let’s get started with some basics.

For the next part, we have created a screencast where we set up a basic prototype in Bedrock.

You can follow along with the video below:

The final code result can be found on Github.