Basic tutorial

(18 Jan 2018) This tutorial is new. If you try it we would love your feedback. Please e-mail us at bedrock@mono.company. If you encounter bugs or issues you can file them on Github. Thanks!

This tutorial lets you jump into Bedrock quickly. If node.js and gulp don’t ring a bell, take a look at Bedrock’s requirements first.

We assume you have some knowledge about modern web development, including working with Git, HTML and CSS. One part that might be a bit more exotic is the Pug templating language used in Bedrock. If this is new to you, see
working with Pug.


Downloading Bedrock

Download the latest version of Bedrock on Github.

We recommend cloning the repository:

git clone https://github.com/mono-company/bedrock.git

Next, install the project’s node modules:

cd bedrock
npm install

Make sure you have a recent version of node.js and you have gulp installed globally. Not sure? Check out Bedrock’s requirements.

After installing the node modules, run gulp to start a server and get going. Your default browser will be opened at http://localhost:3000. Please keep this server running while working on a Bedrock project.

Creating a sign in page

To demo some of Bedrock’s functionalities, we are going to create a simple sign in page.

The idea is to show you how Bedrock works, not how coding something in CSS works. So for the purposes of styling, please add the styles included in this .zip file to Bedrock’s SCSS folder (/content/scss).

If everything goes right: boom! Your Bedrock install instantly looks a lot better.

To make a page, first create a folder called “authentication” inside the folder /content/templates/.

Then create a file called sign-in.pug inside the folder /content/templates/authentication/.

Paste the following code in the template:

You will see the sign-in page show up in your page tree. If all is well, you can navigate to /authentication/sign-in.html to view your page. Hit ctrl + m to see the page tree.

This page could be better: the form is not aligned in the center! To fix this, we will add a CSS class to the <body> and <html> elements of the page.

Find the block pageVariables, and insert the following code:

We set up the variables htmlClass and bodyClass in the default templates, because adding a class to these elements is such a common action.

If all is well, your result should now look like this:

Tutorial result 1

Creating the sign in page’s error state

What we also need is slightly different variation of this page with an error state. We will use a powerful feature in Pug called template extension.

Create a new file called sign-in--error.pug. It is very important to use the double dash notation for page states. Make sure you got that -- in there!

Use the following code in the error template you have just created:

Switch back to editing sign-in.pug. Add the following code to your template, as the first code inside .c-panel__content:

Note the red error box that shows up, and the listing of the different page states.

In a real project, you could add as many page states as you want.

You can view the final code for sign-in here. The final code for the error template is here.

That’s it! You have completed the basic tutorial.