Reflexbox is part of Rebass UI React components. These components are built for styled systems like Emotion, that we are using in this series. We are going to use just the Reflexbox part of Rebass, and Reflexbox is - "Ergonomic, responsive React layout and grid system" - as it's written in their documentation.

We are using it so that we don't need to polute our Next.js pages with unnecessary CSS just to layout our components. But you can of course use Reflexbox even inside your components, if you really need and want to. 

As you will see Reflexbox is very powerfull and flexible, and can be used on any React based project that uses styled system.

In this episode we are going to learn how to layout your React components using Reflexbox.

Layouts With Reflexbox

We are going to install Emotion library that is going to handle CSS in JS for us, through styled components and through our sites CSS theme. As you will see this is all pretty easy to setup, and the advantages of using this approach are numerous and pretty siginificat as you will see in this video.

Along with Emotion, we are also going to take a look at a very nice helpers library called Polished. Polished is going to make our stylings easier with an assortment of very helpfull functions.

In this video we are going to be talking about CSS in JS, which is a different kind of approach of styling your applications and websites.

CSS in JS

First I'm going to show you how to enable Sass in your Nuxt static site, after that we are going to learn how to create a global CSS file for all your global stylings. 

I'm also going to show you how to make your mixins, variables and functions available throughout your site and all of your components, and lastly we are going to learn how to extract all that CSS into CSS files instead of having all our CSS inlined at the head of our pages.

In this episode we are going to learn how to handle CSS and SCSS in Nuxt.

Handling CSS

In this episode we are going to install Sage, check out what the theme structure looks like, and what specific files and directories do. And then I'm also going to show you how to make compilation of SCSS a little bit faster. Because Sage is using Webpack for SCSS compilation, and that is unfortunate because Webpack is not very fast when dealing with SCSS.

In this miniseries we are going to take a look at Sage WordPress starter theme, and how it can make our lives as theme developers much  easier.

Install and Overview

Tailwind CSS is a utility-first CSS framework. And it's great. But it has some problems if you are going to be using it on a classical project, with something like WordPress or even vanilla October CMS. In this video we are going to install Tailwind and explain what these problems actually are, and why this framework is great for the type of project that we are building in this series.

And at the end we are going to create a component and style it with Tailwind, and show you how you can leverage Tailwind to create multiple variations of a Vue component.

In this episode we are going to add Tailwind CSS to our project and show how this is a great framework for creating single page applications with frameworks like Vue or React.js.

Tailwind CSS

Now I'm going to show you how I transformed video list on the homepage of my site to be CSS Grid. I'm doing this so that I can make that component a bit more visually appealing. 

Also you may learn something new about October CMS if you are into that type of thing :) .

In this video I'm going to be talking about using CSS Grid on my site.

CSS Grid Layouts - Gridify My Site

`grid-template-areas` is another method of laying out your CSS grid. And as you will see in the video it makes creating your grid a breeze and it also allows you to change the layout in dramatic ways when the resolution goes up or down.

In this video we are going to be talkig about grid-template-areas and as an exmple we are going to take a look at medium.com site.

CSS Grid Layouts - grid-template-areas (Medium.com Example)

Sass is a CSS extension language that shares some similarities with "normal" programming languages in that you can use variables, arrays (which are called maps in Sass), functions, mixins etc. of course since the browsers can't interpret SCSS files you have to compile them down to normal CSS. We have set up our task runner to do just that in the [previous episode](http://watch-learn.com/video-tutorials/basic-frontend-tools-gulp) so be sure to check that out.

In this episode I'm going to go over the basics of Sass and what it can do, this is in no way, shape or form everything the Sass can do, because I would need to create a whole series of videos to cover everything. But I think I covered most used things for Sass that you would find in th wild and they are a good starting point for you to start learnig Sass for yourself.

In this episode I'm going to show you how you can supercharge your CSS development by using CSS extension language called Sass.

Sass

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.

Tutorials tagged with: css, CSS

Get in touch