A dead simple, responsive boilerplate.

I have been writing and speaking about the CSS Grid Layout Module for some time now. In order to learn how Grid works I’ve put together lots of small examples, and I am publishing them here as a resource for anyone else interested in this emerging specification.

Yes, I know there are other efforts on the web to replicate this effect with pure CSS, but none of them seems to come as close to the original, without images and with such minimal HTML.

Why bother, you may ask? Well, it was a fun pastime during SXSW breaks or sessions that turned out to be less interesting than expected or in the plane on the way home. Besides, I think that it could be useful in some cases, perhaps if the styling is tweaked to not resemble iOS too obviously or maybe in iOS app mockups or something.

Ultra–Lean HTML5, CSS, & JS Building Blocks for Rapid Website Production

Давным давно (летом 2014), когда я усиленно работал с оформлением, передо мной возникла следующая проблема. Я хотел использовать CSS3 для создания эффекта прыгающего мячика с учетом естественных законов физики. Я прошерстил Интернет в поисках какого-нибудь способа, чтобы «вдохнуть» гравитацию в мой мячик.

The clip-path property allows you to make complex shapes in CSS by clipping an element to a basic shape (circle, ellipse, polygon, or inset), or to an SVG source.
CSS Animations and transitions are possible with two or more clip-path shapes with the same number of points.

Up-to-date data on support for type and typographic features on the web.

Turns out currentColor has been here for quite some time now, but I heard about it only a few months ago when I read Dudley Storey’s post. He states that it is supported very well across the browsers (IE9+). This was enough for me to start using it in production. I was quite surprised how useful the keyword is: it helps to keep CSS code shorter and smarter.

A curated gallery of Dribbble shots reworked as interactive CodePen pens.

Plunker is an online community for creating, collaborating on and sharing your web development ideas.

Prototype mobile apps with simple HTML, CSS, and JS components.

Cтайлгайды для кода: сборник статей, докладов, подкастов, книг, инструментов и примеров

Almost universally, professional web interface designers (engineers, whatever) have accustomed themselves to styling HTML elementsprescriptively. We conceive of an interface object, then author styles for the object that are inscribed manually in the markup as “hooks.”

In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device. Lets say your screen's resolution is 1440 x 900. This means the screen is 1440 pixels across, so it has a device-width of 1440px. Most mobile phones have a device-width of 480px or lower, including the popular iPhone 4 (with device-width: 320px), despite it technically having a 640 x 960 resolution. This is due to iPhone 4's retina display, which crams two device pixels into each CSS pixel on the screen. This is true for the Ipad 3 as well; its reported device-width is 768px just like its predecessors, even though its actual screen resolution is 1536px x 2048px. In general width is more versatile when it comes to creating responsive webpages, though device-width is useful when you wish to specifically target mobile devices (and not desktops with a small browser window for example), as rarely do desktops have screen resolutions below a certain number such as 320px x 480px.

The accelerometer embedded in our smart devices is typically used to align the screen depending on the orientation of the device, i.e. when switching between portrait and landscape modes. This capability provides great opportunities to create better user experiences because it offers an additional layout with a simple turn of a device, and without pressing any buttons.

В этот день двадцать лет назад нынешний CTO Opera Хоком Виум Ли опубликовал предложение по каскадным таблицам стилей для HTML. 

CSS PRE is a project that aims to collect as much information about the popular CSS Preprocessors as possible, in order to serve as a one-stop reference.

This is a list of guidelines we've been compiling over the last couple years while building high-performance mobile frontends, as well as building the open source library impulse. Some of these are broadly applicable to any mobile website, some are specifically for people building apps.

Click the Rainbow. Spectral is a math-based HSL color exploration tool built with Vuejs and TinyColor

We still build things the way machines read them - not the way we intuit them. Jeet allows you to express your page grid the same way a it. No more needlessly nesting elements. No more rigid twelve column rules. with less code, and more flexibility with