Wastholm.com

One of the most powerful features of the CSS preprocessor Sass is the mixin, an abstraction of a common pattern into a semantic and reusable chunk. Think of taking the styles for a button and, instead of needing to remember what all of the properties are, having a selector include the styles for the button instead. The button styles are maintained in a single place, making them easy to update and keep consistent.

As reported by Cameron McCormack, Firefox Nightly (version 29) now supports CSS variables. You can get a quick overview in this short screencast:

As you can see, the tiles overlap and interact to generate new patterns and colors. And as we’re using magical prime numbers, this pattern will not repeat for a long, long time. § Exactly how long? 29px × 37px × 53px… or 56,869px! § Now this was something of a revelation to me. I actually had to triple-check my calculations, but the math is rock solid. Remember these are tiny graphics — less than 7kb in total — yet they are generating an area of original texture of almost 57,000 pixels wide.

Ever wanted to pin something to the side of a text? Ever needed a subtle sticky element to quietly hang around as you scroll down? jQuery.Pin is here to help! Pin any element to the top of a container. Easily disable it for smaller screen-sizes where there's no room for that kind of shenanigans.

mincss (code on github) is a tool that when given a URL (or multiple URLs) downloads that page and all its CSS and compares each and every selector in the CSS and finds out which ones aren't used. The outcome is a copy of the original CSS but with the selectors not found in the document(s) removed.

Responsive web design is the practice of building a website suitable to work on every device and every screen size, no matter how large or small, mobile or desktop. Responsive web design is focused around providing an intuitive and gratifying experience for everyone. Desktop computer and cell phone users alike all benefit from responsive websites.

Features

* No images, no external CSS

* No dependencies

* Highly configurable

* Resolution independent

* Works in all major browsers, including IE6

* Smaller than an animated GIF (3K minified, 1.7K gzipped)

* MIT License

...

How it works

Spin.js uses the CSS3 to render the UI, falling back to VML Internet Explorer. If supported by the browser, @keyframe rules are used to animate the spinner.

The reality is that IE9 is 2 years late. Microsoft is glad to come out with the <video> tag, the <canvas> tag, SVG, and some CSS3. Like other vendors did years ago. Firefox 3.5 had the <video> tag, the <canvas> tag, Geolocation, SVG in 2009. Canvas and SVG existed 5 years ago.

The idea of the reset style sheet is to globally target every markup element and set all of its possible attributes to zero, default or inherit. This gives the developer a “clean slate” with no browser default styles. Many say that this is the first thing you should add when you start building a web page, but I firmly disagree.

I’m sure that I am one of the small minority of web developers who’s saying this, but reset style sheets are bad practice, and it’s time to stop using them.

Usage: Click the "Add Fonts" button, check the agreement and download your fonts. If you need more fine-grain control, choose the Expert option.

|< First   < Previous   11–20 (48)   Next >   Last >|