May 6, 2015 in Learn
Intro to Neat — A Semantic Sass Grid
Mobile devices came to conquer the planet, and they won. Well . . . mobile devices at least seem to dominate the way in which we access the Web. As a result of the mobile revolution, we no longer have…
February 5, 2015 in Learn
How to Create a Sticky Navigation
Many websites use a “sticky” feature in their main navigation menu. The menu scrolls with the page, then sticks to the top once it reaches the top of the viewport. There are lots of jQuery plugins we can use to…
January 21, 2015 in Learn
How to Create a Simple CSS Dropdown Menu
Many dropdown menus we see on websites use JavaScript in some way, but it’s possible to build one entirely with HTML and CSS. In this short video tutorial, we’ll take advantage of helpful CSS selectors to build a simple dropdown…
January 14, 2015 in Learn
Create an SVG Sprite Sheet
Image sprites are still a useful feature in web design. They’re also important for website optimization because they combine several images into one image file to reduce HTTP requests. In this tutorial, we’ll learn how to create an SVG sprite sheet…
October 13, 2014 in Learn
Cutting-Edge CSS Features You Can Use Today
The last wave of new CSS3 features introduced in-browser design features like border-radius, gradients, multiple backgrounds, and box-shadow. CSS continues to evolve and today’s native features are becoming closer to tools we’d normally use in our favorite graphics editor. In…
September 8, 2014 in Learn
Customize Ordered Lists with the ::before Pseudo- Element
Web browsers let you customize the look of most aspects of a page using CSS. But when rendering some page elements, web browsers are resistant to your styling efforts. For example, form elements like select menus, radio buttons and checkboxes…
September 4, 2014 in Learn
Smarter Sass Mixins with Null
With Sass mixins we’re able to pass a list of arguments to set the values of properties. For example, the following mixin uses four variables as arguments to define the display, padding and margin properties of an element. @mixin display ($disp, $padding, $l-margin, $r-margin)…
July 31, 2014 in Learn
Modular Pseudo-Elements with Sass
When generating pseudo-elements with CSS, we usually need to define certain properties to display the elements. This often means repeating CSS declarations for content, display and position, the most common properties used for generating shapes with pseudo-elements. With Sass, we’re able to…
June 11, 2014 in Learn
Box-Sizing: The Secret to Simple CSS Layouts
(Photograph from Flickr user Rachel Kramer) Box-sizing is a CSS property that makes CSS layouts work intuitively. If you’ve been working with CSS for any period of time, you know that using properties like width, padding, and border can be confusing….
May 12, 2014 in Learn
3 Quick Tips for Less Repetition in Stylesheets
When you hear the word “Sass,” what comes to mind? For a lot of people it’s the most popular CSS precompiler to date. Sass takes vanilla CSS and adds variables, nesting, functions, math and more to your stylesheets. With Sass,…
April 10, 2014 in Learn
How to Create Smoother Animations and Transitions in the Browser
In order to achieve smooth transitions and animations, a browser needs to avoid doing extra work on its main thread, the part that’s in charge of handling tasks like JavaScript, style calculations, layout, painting and compositing (more on these later)….
April 3, 2014 in Learn
How to Evaluate Front-End Code for Inefficiencies
There’s more to writing good front-end code than knowing every HTML tag, CSS selector, or the latest front-end features and techniques. And as I mentioned in a recent blog post, writing good code takes a lot of patience and practice….