This is a quick demo of what we are working on right now
... about Atomic CSSS. This file
is linked to a atomic.css file
A refresh shows that this file is empty.
If I had a bunch of classes onto the heading
to style it with a background and foreground colors
a width, some padding, margin auto, 
and with some text-alignment
all styles are applied when I save the file
all the styles are created on the fly
Because I've added all these classes in the markup
All the new rules are now into the atomic style sheet
Everything is done on the fly, if I change things again
Like removing these classes
Then save the file and check the style sheet again
We can see that the file is cleaned up
That's it!
This demo is a bit different, it is about
introducing a new syntax for more complex styling
those are advanced classes in Atomic CSS
I'll go through them one by one
This first one simply sets the opacity to 0
it will make the element transparent
This one is about text-decoration
it will set it to none only on :hover
as the ":h" in the class name suggests
This one will make the element opaque
on :focus, as the ":f" suggests
This one is a bit more complex
it is referencing an ancestor, in this case: "myList"
and it is telling that when hovering over the list
we'd make this element, the list item in "myList",
opaque. Let me show you how this works
First, I demonstrate the opacity on "focus"
if I go and tab through the 
different links, they show up
now I'll demonstrate the more complex class
If I hover over "myList" in the web page
all the list items show up
Yes, it is working
Now text0decoration will be "none"
If I mouseover over the links
I get close to it, and yes... it is working
This is it!
Atomic classes follow the Emmet syntax
they are more or less abbreviations
we will have a page online
to help people find what they are looking for regarding
matching property or value with Atomic classes
in this case if I wanted to look for padding
padding-top. I can see the value. I can see 
the Atomic classes I'll be using to get the style I want
and it goes for everything
you can look for background
or for border, or for 
box-sizing
(if I could type)
and see all the values if there are defines values 
That's it!
