In this episode I'm going to show you how to create a classic layout with header, footer, one third of a sidebar and two thirds of main content using CSS Grid. After we create this layout, we are going to create a post list with one feateured post and several post around and below it.

As you will see creating something like this using CSS Grid is much easier than using something like Flex Box or regular floats.

In this mini series we are going to take a look at how we can make popular layouts that you find around the web and create them using CSS Grid.

CSS Grid Layouts - One Third + Two Thirds

[Pattern Lab](http://patternlab.io/) is a way to organize your front-end modules and components. It uses mustache template language to make it easy for you to create variants of your components.

Pattern Lab was primarily built to be used with [atomic](http://bradfrost.com/blog/post/atomic-web-design/) design system in mind. But you can use it with any web design modular system you want.

In this video we are going to take a look at Node/Gulp version of Pattern Lab, and I'm going to show you how to create atoms, make variants, how to use json data to render your components and at the end how to combine atoms into molecules.

In this episode of front-end tips we are going to look at something called Pattern Lab. It's a way to organise your HTML and CSS components and modules.

Introduction to Pattern Lab

So as it turns out we already get every thing set up for creating success and error messages. If you don't have it set up on your machine you must first learn how to [make a contact form](http://watch-learn.com/video-tutorials/making-websites-with-october-cms-part-18-creating-contact-form) and then learn how to [validate it](http://watch-learn.com/video-tutorials/making-websites-october-cms-part-25-new-ajax-form-validation). 

If you got all of that set up then we just need to add a bit of styling and JavaScript magic to make all this work. As you will see it is very easy.

In this episode of Making websites with October CMS I'm going to show you how to create success and error messages for your contact form.

Success and Error Messages in Forms

In this episode we are continuing work with Builder plugin for October CMS and I'm going to show you how you can control the output of your details page, how to limit the text coming from your fields and also how to link items on your list page to the details page of your item.

We are also going to learn about the `raw` filter and `html_` function which will help us limit the output of our description field from our Movie model.

Now we are going to continue working with the Builder plugin for October CMS and learn how to display our lists and create and display details page for our movies.

Displaying Lists and Details

We are not going to do anything in this tutorial with WordPress REST API, but instead we are going to take a few minutes to make our filters look pretty.

Also we are going to use `v-if` statements to hide and show certain elements on the page. And we are going to learn how to do transitions with Vue.js, using `transition` function.

In this tutorial we are going to take a few minutes to make our filters look decent using Vue.js, HTML and CSS.

Making Filters Pretty

Also we are going to learn how to define our front page so that we don't use the same template as we would use on other content types. This way our front page will be able to have different type of design.

As for the header we are going to style a block that displays the header, add some css to it and I will show you how to change the path of your logo.

By doing all of this we will get better acquainted with Twigs template hints, and will learn where the stuff on our page is coming from.

In this episode of Drupal 8 Theming tutorial series we are going to theme our header the 'Drupal way', by using blocks, css, html and Twig.

Theming the Header

I'm also going to show you how to make a new region that will hold our navigation so that we can style it with css easily.

In this episode of Drupal 8 Theming tutorial series we are going to learn how to make main navigation that we are going to put into our header.

Tutorials tagged with: html

Get in touch