(18 Jan 2018) This tutorial is new. If you try it we would love your feedback. Please e-mail us at firstname.lastname@example.org. If you encounter bugs or issues you can file them on Github. Thanks!
This tutorial lets you jump into Bedrock quickly. If
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.
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.
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 (
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
Then create a file called
sign-in.pug inside the folder
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
<html> elements of the page.
Find the block
pageVariables, and insert the following code:
We set up the variables
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:
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
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.
That’s it! You have completed the basic tutorial.