While creating a prototype for a project (using Bootstrap), I added the Jumbotron component which is described as: “a lightweight, flexible component that can optionally extend the entire viewport to showcase key content on your site” and found that my background image wasn’t responsive at all.
According to Bootstrap, “you can modify the variables to your own custom values, or just use the mixins with their default values.”
An example of writing semantic code using Bootstrap is using @extend:
As written by Brad Borrow in the article Using Sass To Semantically @extend Bootstrap, he says that Bootstrap “makes it incredibly easy to write cluttered, non-semantic and non-reusable markup that will render correctly across all browsers.”
He goes on to explain what writing semantically means, “HTML documents are intended to be descriptive of their contents from an information hierarchy perspective. One should be able to read them and know what they are about, not how they will look.”
I stumbled upon a quick video on YouTube on how to use the CSS3 grayscale filter when hovering on an image.
The results can be seen below:
Click on the CSS tab in the Codepen example above to see how this filter effect can be implemented in your CSS.
“Method of applying filter effects (like blur, grayscale, brightness, contrast and hue) to elements, previously only possible by using SVG.” – Can I Use
“It’s worth noting that right now, CSS Filter Effects are an unoffical specification – however, the editors of the spec include representatives from Adobe, Apple and Opera, and we have already got implementations in Chrome, Safari and iOS 6.” – CSS3 Filters
“Compass is an open-source CSS Authoring Framework.” – Compass
“Compass can do some really handy tasks like measuring images from the filesystem and writing them into your stylesheets. Asset URL functions are available that make it easy to move assets around in a project or even switch to a content delivery network (CDN) without having to rewrite your stylesheets. Compass can even combine a directory of images into a single sprite image and do the otherwise tedious task of calculating coordinates and writing the spriting CSS for you.” – Sass and Compass in Action (Manning)
What is Sass?
“Sass is a meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets.” – Sass