Wednesday, April 03, 2013

Horizontal centering using CSS fit-content value

Horizontal centering using CSS fit-content value

Further reading: Centering Things

The other day I read a good article on horizontal centering by Roger Johansson in where he explains the shrinkwrapping effect. Basically, it's about one of the most common problems you can find in the wild, namely how to center a navigation bar which contains floated elements with undefined widths.

Wednesday, April 03, 2013

Automatic Table of Contents

Automatic Table of Contents
A live example of this can be found on CodePen's PRO feature pages like this one for Professor Mode.

Any long page of content with distinct and well marked up content can benefit from a table to contents. A table of contents provides a quick way to jump down the page to the desired section. Of course you can create a table of contents manually, but it may be smart to build it dynamically on-the-fly with JavaScript. This is true for several reasons:

Wednesday, April 03, 2013

Animations with SASS and @while

Animations with SASS and @while
A few months ago I was working on a looping Wi-Fi signal animation for Karma. Initially I wrote a bunch of SASS with a few mixins, until I discovered the @while directive which repeatedly outputs a given number nested blocks of styling. Resulting in 20 lines of SASS that generates as many animated signals as you could possibly want and automating the math as well.

Wednesday, April 03, 2013

Formatted Strings With PHP

Formatted Strings With PHP
When you are using PHP to output a string on the page most of the time you will use the syntax echo, which will take the following string and display that string in HTML.

Wednesday, April 03, 2013

Tricky Textarea Pulltab

Tricky Textarea Pulltab
The humble textarea

In desktop Safari, Chrome, Firefox, and Opera-under-Presto, (not IE, not mobile anything) <textarea>s have a little resizer nugget in the bottom right corner. Textareas are for writing in, so if users need more space to feel more comfortable writing in there, they can have it. Clicking and dragging that resizer literally changes the box model of that textarea, pushing other things away as needed. We can use that little ability to make a trick!

Wednesday, April 03, 2013

All In The Family: Grouping CSS Selectors

Grouping CSS Selectors

Grouped selectors are one of the most efficient ways of reducing your CSS to tight, clean, easily maintained code, while bringing the benefit of imposing a stronger, more consistent design.

Wednesday, April 03, 2013

How To Style A Checkbox With CSS

How To Style A Checkbox With CSS
Checkboxes is a HTML element that is possibly used on every website, but most people don't style them so they look the same as on every other site. Why not make your site look different by styling your checkboxes, you could even make them look nothing like checkboxes.

In this tutorial we are going to create 5 different checkboxes which you can use on your website.

Wednesday, April 03, 2013

Printing The Web

Printing The Web

While it is possible to consume nearly all means of content on your smartphone or tablet it seems like the dream of a paperless office comes true for a lot of web developers.

Saturday, March 16, 2013

The pro's guide to CSS layouts

CSS layouts

CSS's next big challenge is to make flexible, dynamic page layouts that work across our ever-broadening range of devices. With solutions proposed and under discussion, Peter Gasston offers a snapshot of the future.

Sunday, March 03, 2013

Functions Explained

Functions Explained

A Deep Dive into JavaScript Functions

Based on my readership I have to assume most of you are familiar with JavaScript already. Therefore, it may seem odd to include a post on functions. After all, they are one of the most rudimentary components of JavaScript. My assertion is this, just as a person can speak a language without the ability to read or write it, so too can developers use functions in JavaScript and yet be blissfully unaware of their complexities.