Based on a Dev Tips video I recently watched, “How To Make A Full Screen Video Background in HTML + CSS”, I managed to get the background video to work with an overlay of text, except the vertical and horizontal scroll bars were appearing in Firefox (version 43.0.4).
There are times when using z-index, it doesn’t always appear to work the way we’d like to.
So to define z-index, “it is the attribute that lets you adjust the order of the layering of objects when rendering content.” – Mozilla Developer Network.
According to Angelina Fabbro: CSS In Your Pocket – Mobile CSS Tips From The Trenches (video), we should “set z-index to the body element to properly stack elements”, for example:
How have you used z-index in your projects?
I’m attempting to compile a comprehensive list of how developers and front-end engineers structure their CSS using the SMACSS (Scalable and Modular Architecture for CSS) approach.
What is SMACSS?
“SMACSS stands for Scalable and Modular Architecture for CSS, and is more a style guide than a CSS framework. On a high level SMACSS aims at changing the way we are turning designs into code. Instead of working in a page mentality where you try to turn a single page design into code, SMACSS aims to identify repeating visual patterns. Those patterns are then supposed to be coded into flexible/re-usable modules, wich should be independent as possible from the individual page context. This is not a revolutionary point-of-view for a programmer, but in the web design world this is indeed a newer way of thinking.”
So why am I contemplating using Thoughtbot products when Bootstrap is so popular and much widely used in the web community?
- Bourbon – “A simple and lightweight mixin library for Sass.”
- Neat – “A lightweight semantic grid framework for Sass and Bourbon.”
- Bitters – “Scaffold styles, variables and structure for Bourbon projects.”
- Refills – “…prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat.”
I really wanted to point out the reasons why web developers should start using Sass and I came across the Clean out your Sass junk drawer slides by Dale Sande. It shows just how much the thought process of well structured CSS has changed over the years. So if you still work with fellow front-end web developer/engineers who aren’t using any CSS Preprocessor, point them to these slides.