July 3, 2013 in Learn
Triggering CSS Animations with Sibling Selectors
Combinators describe the relationship between CSS selectors, and they’re commonly used to combine two or more selectors into a more specific selector. Examples of combinators are the greater-than sign (>), plus sign (+), and tilde symbol (~). If you’ve ever worked with descendant selectors,…
April 15, 2013 in Learn
Extending Placeholder Selectors with Sass
I recently wrote an article on creating a themable button set with Sass where I used a mixin to define all base styles, then a color value was passed as an argument when included in each theme. Example: @mixin btn-theme($btn-color)…
April 4, 2013 in Learn
Most Helpful Webapps & Resources for Building Modern Websites
There is a large number of online resources for developers looking to make better websites. These are all free tools for anybody to use, and they provide an exceptional push forward in quality. Designers have been striving towards a better…
February 21, 2013 in Learn
Adding Motion into Web Design with Animate.css
Lots of frontend web developers have been getting interested in dynamic interfaces using motion effects. This is all too common with many advancements within popular JavaScript libraries. But there has also been a lot of interest in CSS3 animated effects….
February 20, 2013 in Learn
Create an Absolute Basic Mobile CSS Responsive Navigation Menu
In this tutorial we will go over the process in coding a very basic CSS responsive navigation menu. We will transform a basic non-list style navigation to a drop down menu using media queries in our stylesheet. There’s no need…
February 18, 2013 in Learn
Take Control of the Box Model with box-sizing
I get asked a lot about the CSS box-sizing property, especially from beginning designers and developers who’ve dealt with broken layouts and misaligned grids. The CSS box model can be a little deceiving and tricky to work with at times,…
January 29, 2013 in Learn
Create a Themable Button Set with Sass
If you have yet to give Sass a try, don’t worry, this is a good place to start. And if you haven’t already read Andrew’s primer on Sass, give it a read for a better understanding of what we’ll be…
January 28, 2013 in Learn
How To Create HTML5/CSS3 Columns for All Browsers
There are many techniques you may follow to create generic HTML5/CSS3 website layouts. Designers often talk in terms of columns such as 2-col or 3-col styles. There are many CSS libraries based around grid design which also allows for easy…
January 16, 2013 in Learn
The Absolute Beginner’s Guide to Sass
What is Sass? Sass stands for Syntactically Awesome Stylesheets Sass, and was created by Hampton Catlin. It’s a way to simplify your CSS workflow, making development and maintenance tasks easier. For instance, have you ever had to do a find-and-replace…
January 14, 2013 in Learn
Creating Responsive Websites with Photo Backgrounds
The trend of large photographic backgrounds has become very popular in recent years. The improvement of Internet connections has allowed more data transfer per second, which means images can load a lot quicker in real-time. There are also plenty of…
January 10, 2013 in Learn
5 Useful CSS Selectors
Besides the usual type, descendant, class and ID selectors, CSS offers several pseudo-class and pseudo-element selectors that allow us to target HTML elements based on their positions in the document –– some even target virtual elements and generate content from…
December 20, 2012 in Learn
Responsive Design of the Future with Flexbox
In CSS, float and clear serve for layout much the same way as the tables they replaced: As stand-ins that work well enough. But they’re still limited. One proposed solution is called the CSS Flexible Box Layout Module, commonly called…