Monday, April 28, 2014

Build a Dribbble Portfolio Grid With Flexboxgrid and Jribbble

Flexboxgrid

Building with a grid has become an everyday requirement for front-end developers. Not only do grids provide a sense of rhythm and consistency in design, but when a well-known grid structure is used it provides a simple collective design language for cross–team work.

Monday, April 28, 2014

12 Little-Known CSS Facts

12 Little-Known CSS Facts

CSS is not an overly complex language. But even if you've been writing CSS for many years, you probably still come across new things — properties you've never used, values you've never considered, or specification details you never knew about.

Saturday, April 26, 2014

Using Media Queries in JavaScript

Using Media Queries in JavaScript

If you practice responsive design then you use a lot of media queries. Media Queries are a CSS feature that gives designers the power to add something like if statements. By this I mean that it allows you to apply rules only if the current page meets certain conditions. In this article I'll show you how I use media queries in JavaScript.

Saturday, April 26, 2014

How to Make Any Website Responsive

How to Make Any Website Responsive

According to Verisign's Domain Name Industry Brief for 2013, it is estimated that 85% of all .com and .net TLDs (top-level domains) have websites: that's over 100 million websites (being that .com and .net domains collectively number over 120 million). Now, that is a lot of websites! So how exactly are we going to make them all responsive?

Saturday, April 26, 2014

Why Element Queries Matter

Element Queries
A sketch of our main component

At work, many of our pages present one or more collection of items, like products, shops, or whatever. It's basically a list of thumbnails, with a title and a location and/or a price. When you click on it, it leads you to the page related to the item. We call this the elements component (we could have called it thumbs-list or something but that doesn't matter).

Saturday, April 26, 2014

How to Create Custom HTML Elements

Custom HTML Elements
Photo by Kenny Louie / Flickr

An exciting feature of the HTML specification that's been getting a bit of hype recently is custom HTML elements. These allow you to create your own HTML elements along with their own JavaScript API. This can be useful when building interfaces with components that are reused throughout an application.

Saturday, April 19, 2014

New HTML5 Attributes for Hyperlinks: download, media, and ping

New HTML5 Attributes for Hyperlinks
Hyperlinks have been around since the dawn of the Web. But with the dawn of HTML5, three new attributes have been added to the humble <a> tag to keep existing attributes like href, rel and others company.

The new attributes are: download, media and ping. In this article, we'll take a quick look at what these new attributes are and how they can be used once browser support improves.

The download Attribute

The download attribute is new in HTML5. It supplements the existing href attribute by telling the browser that the resource the href points to should be downloaded directly, instead of visited (which could happen with a file that the browser can open, like a PDF). The value of the download attribute is used for the name of the file that is downloaded.