Starbeamrainbowlabs

Stardust
Blog


Archive

Mailing List Articles Atom Feed Comments Atom Feed Twitter Reddit Facebook

Tag Cloud

3d account algorithms android announcement architecture archives arduino artificial intelligence artix assembly async audio bash batch blog bookmarklet booting c sharp c++ challenge chrome os code codepen coding conundrums coding conundrums evolved command line compilers compiling compression css dailyprogrammer debugging demystification distributed computing documentation downtime electronics email embedded systems encryption es6 features event experiment external first impressions future game github github gist gitlab graphics hardware hardware meetup holiday holidays html html5 html5 canvas infrastructure interfaces internet io.js jabber jam javascript js bin labs learning library linux lora low level lua maintenance manjaro network networking nibriboard node.js operating systems performance photos php pixelbot portable privacy problem solving programming problems projects prolog protocol protocols pseudo 3d python reddit redis reference release releases resource review rust searching secrets security series list server software sorting source code control statistics storage svg technical terminal textures three thing game three.js tool tutorial tutorials twitter ubuntu university update updates upgrade version control virtual reality virtualisation visual web website windows windows 10 xmpp xslt

Revolutionising CSS with Grids

(Source: The header of Mozilla's Firefox grid inspector landing page. Mozilla neither endorse this blog post nor probably know that it exists :P)

You may or may not have heard about it by now, but browsers now have support for a new feature of CSS - the Grid. I'd argue that it's the single greatest addition to CSS since it was created, and to that end I wanted to post about it here.

First though, let's look at where we've been, as it will help us understand what's so great about the new grid specification.

In the days of CSS 2, the venerable HTML <table> was the de-facto method for laying out your website - though some websites would use a frameset instead. This worked, but it wasn't very flexible. It also sort of 'abused' the HTML <table> - as a <table> is meant to display data, not provide a tool for layout purposes.

Curiously, I found some educational courses called this an 'advanced' technique for building a website - I certainly wouldn't want a website laid out in a table!

To solve this, we got the float property. With this, we could get things to sit side by side - without having to use a table! This was much better than before, but still not very flexible.

Next up came the flexbox - This is like a sort of 1-dimensional grid - allowing you to set out your content in multiple nested rows or columns. It's certainly worth taking the time to learn, as it's very useful for things like spacing the items in a navigation bar out evenly, for example.

This brings us to the Grid. Basically, it's a 2-dimensional flexbox, but with some added extra features. It's probably best explained with an example image:

The above is a pair of screenshots of a little project of mine (hint: it's related to this) with Firefox's Grid Inspector turned on. As you can see on the left, I can split the page up into multiple discrete parts, and assign different elements to each one. This is known as an explicit grid.

On the right, however, I have simply told it that I want 2 columns, each row must be at least 10em high, and that there should be a 1em gap between cells - and it has worked out that it needs 2 rows in order for every element to have a place. This is known as an implicit grid.

Together, they form a powerful framework for laying out a page. Gone are the days of having a million container elements all over the place confusing things - it is now possible to lay out a webpage with a beautifully flat HTML structure.

(Source: A Complete Guide to Grid on CSS Tricks)

If you're interested in creating a website for your next project, I encourage you to investigate the CSS Grid to layout your page. With browser support like this:

Can I Use css-grid? Data on support for the css-grid feature across the major browsers from caniuse.com.

(Can I Use Embed from caniuse.bitsofco.de)

...there's really no reason not to use it! To get started, I'd recommend checking out CSS Tricks' A Complete Guide to Grid. It contains everything you need to know. If you prefer a more example-driven approach, then Grid by Example also provide a fairly comprehensive view.

(Found this useful? Got a brilliant resource not listed here? Found something even better? Comment below!)

Sources and Further Reading

SVG and CSS

Huge Purple Flowers

Recently someone mentioned that they knew someone else who had just brought a duvet cover that has "Huge purple flowers" on it. This gave me a most interesting mental picture - and I recreated in Inkscape (which has just been updated!) for you to see - the result is shown above. Note that those plants would be at least 3 times your size.

Anyway, I also learned that you can mix SVG with CSS (and Javascript, but I haven't got to playing with that yet). as a test, I created a quick square in Inkscape and then opened the resulting file up in my favourite text editor and plugged in some CSS animations. This is what I came up with:

A simple loading animation

The square above is actually black and set to have a low opacity, to it sets on the colour anything that is behind it. It is also done in percentages, so you can set the width and height of the containing <img /> tag and it should scale accordingly.

I might do some more of this in the future - it looks to me like a wonderful way to create a nice little self contained widget that you can use anywhere.

An (Almost) Pure CSS Spotlight

I made a spotlight demonstration using (almost) pure CSS!

A little bit of javascript is used to make the spotlight follow the mouse. You can also click through the layer in from of everything that makes the spotlight work because of the pointer-events: none; CSS styling rule.

It can be found below.

The (editable!) source code can be found here. A full screen version of the demo above can be found here.

Art by Mythdael