-
CSS Architecture
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…
-
Using Bourbon, Neat, Bitters & Refills
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…
-
Start using Sass
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…
-
CSS3 Background-Image
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.
-
Grunt build error behind proxy
While working on a project, I used the Yeoman webapp generator and selected; Bootstrap Sass, jQuery and Modernizr. Everything has worked well, the ‘grunt serve’ and ‘grunt test’ commands, however when I want to run the ‘grunt build’ command to upload the contents of my ‘dist’ folder to a web server, I get prompted with…
-
CSS3 Grayscale Filter
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 via this Codepen CSS3 Grayscale Filter Click on the CSS tab in the Codepen example above to see how this filter effect can be implemented in your CSS. “Method…
-
Preprocessing is for Everybody
Preprocessing is for Everybody by Chris Coyier “You’ve heard about CSS preprocessors. If you have yet to take the dive or have only dipped your toes in, let Chris Coyier (CSS-Tricks, Codepen) convince you that you won’t regret it. Have you met resistance? Let’s try and convince your boss and colleagues. There may be some…
-
Responsive Images
The following video is from the post Responsive Images using <picture> and srcset/sizes – by Matt Steele Big heavy images are responsible for most of the bloat on a responsive website, but it doesn’t have to be that way. Here’s the latest HTML elements you can use to keep your images small, and your site…
-
Features of Compass
“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…
-
Learning Sass
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 To install…
You must be logged in to post a comment.