The Future of CSS – CSS GRID and Custom CSS Properties

1 May 2017 alan.monson@stgconsulting.com Comments Off on The Future of CSS – CSS GRID and Custom CSS Properties Design, IXD, Scripted Technologies

By Josh Porter
Custom CSS Properties are now supported in all major browsers except IE 11.
Custom CSS Properties used be called Native Browser Variables. They have since changed the name to distances the Custom Properties from SCSS variables. Lets dive in and see them in action.

SCSS vs. Custom Properties

You can see the top left example is SCSS and the bottom left is using Custom Properties. They render the exact same result on the right of each example.

Why Use Them?

• No pre-processor necessary
• They Cascade: You can set a custom property inside any selector to set or override its original value
• When their values change the browser repaints as needed (i.e. media query or other state)
• You can hook into the custom property via JavaScript

Drawbacks and Benefits

DEMO TIME

bit.ly/css-cp

In this example I am setting the custom properties to :

--width: 25%;
--margin: 20px;
--background-color: #177C9C;

In this codepen I am setting media queries to change at 600px and 400px max width so on window resize the custom properties are changing on the fly and there is no need to have the page rerender.
A better example of custom properties being scoped is bit.ly/css-cp-1.
In this example I am setting the font size to 5rem but scoping the property by class and it is scoped within that class.  For example:

So class .block__highlight redefines the custom property of –block-font-size as well as .block
Something else you can do is just assign a property on a pseudo class:

So I am assigning a new value for –bg-color in div.red:hover but I am not assigning a property(in this case background) it is inherited by the div.red class.

Changing Custom Property via Javascript

In my opinion the coolest thing you can with these is access custom properties via javascript.  Once you do the page doesn’t need to be re rendered. It live paints the changes. Here is an example: bit.ly/css-cp-2
I have a event listener on change and setting the custom property to the value of the input

CSS GRID

CSS Grid is the future of website layout…. In my humble opinion of course.
What is it?
Flexbox vs GRID
“Flexbox is for one-dimensional layouts – anything that needs to be laid out in a straight line (or in a broken line, which would be a single straight line if they were joined back together).
Grid is for two-dimensional layouts. It can be used as a low-powered flexbox substitute (we’re trying to make sure that a single-column/row grid acts very similar to a flexbox), but that’s not using its full power.
If you only need to define a layout as a row or a column, and you would like the flexibility to respond to the content of that row then you probably want flexbox. If you want to define a grid and fit content into it in two dimensions – you need grid.” – http://gridbyexample.com/what/ – Rachel Andrew

Given the above image to code this I would use Flexbox by doing this :

I would set the wrapper to display: flex and flex-flow: row wrap; I then have to set the children elements to have a width, height and margin.

The Grid way:

Before I start showing the way to code it in Grid. I want to go over some new terminology that comes with CSS Grid.

Grid Lines are the lines that make up the grid. These can be horizontal or vertical. We can refer to them by number, or by name.

A Grid Cell is the space between 4 Grid Lines. So it is the smallest unit on our grid that is available for us to place an item into. Conceptually it is just like a table cell.

A Grid Track is the space between two Grid Lines, either horizontal or vertical.

FR(Fraction Unit)
Fraction units, or fr, represent 1 portion of the available space left within the grid. Think of it like Flexbox’s flex-shrink and flex-grow. All fr’s are in relation to one another.
Keep in mind that frs used on row heights will behave differently than on columns.
So for example you will see CSS like:

The top example will give a grid with 4 columns with 1fr width.
The next one will give you the same. But it uses grid’s repeat function.
The width and height of the grid can accept mixed unit measurements.

GRID-GAP
Short hand for a combination of grid-column-gap and
grid-row-gap, this is what defines the spacing between cells. Again, it’s not picky on unit types.
However, the grid-row gap and grid-column-gap have to be the same for each column gap or row gap…..unfortunately

A couple things about grid-gap.

1. It is declared on the parent;
2. Grid-row spacing is declared first in the short hand version.

WHEN CAN WE USE IT?

Now I now showing you this is a BIG teaser but it is coming I promise. All the major browsers have shipped with this new feature in their next release. The rumor is that they will be releasing by the end of March 2017. However, there is a chance that they won’t release the version until the end of 2017.

How do we use it today?

Here is how you enable that feature in your browser today:

• CHROME: ITs live on the latest version.
• safari: menu: Develop > Expermenital Features > CSS Grid
• Firefox: It’s live on the latest version
• Opera: opera://flags/#enable-experimental-web-platform-features
• Epiphany: set the env var to WEBKITGTK_EXPERIMENTAL_FEATURES:$ export WEBKITGTK_EXPERIMENTAL_FEATURES=”CSS_GRID_

OK  now let’s code that same grid but now using CSS Grid.
You can follow along by going to this codepen and trying out the code yourself.
Here is what I did to create a 4 x 3 grid:

The declaration is only on the parent not the child. The grid is smart to layout the dom elements with 4 lines of code.

You can tell a child to start at a specific location by telling it : grid-column or grid-row.

For the 4 x 3 grid you can see the grid lines in green.
If you wanted box 10 to start at the top you write this:

.ten { grid-column: 1 / 2;}

This is short hand for grid-column-start and grid-column-end. Same goes for grid-row.
Let’s build this layout:

SOLUTION:

With declaring 4 classes I have created a pretty complicated layout.

TEMPLATE AREAS:

This feature gets me excited. This allows easy access to assign children to a specific area.

The above code renders something that looks like:

Final project: bit.ly/css-grid-final
Building this in flexbox you would have a number of parents  wrapping different sections of the page.

The solution using grid only has 1 parent!!!

In summary….I believe that CSS Grid is the FUTURE of website layout. That said it is not a replacement for flexbox. I think they can be used together to accomplish pretty complicated layout. So look for this new feature coming to all browsers coming soon.

Tags: