Flexbox cheatsheet

Digital experiences are emulating real life more and more every day. This may seem counterintuitive, considering the hate that rains down on skeuomorphic visual design, but there’s a lot more to emulating real life than aesthetics. Interface designers can emulate real-life physics and movement on a digital screen. This type of motion is becoming more common, which is why it’s becoming easier for people to understand computers. We’re not getting better, the interfaces are!

Menu -> X transition

Create and share beautiful images of your source code.
Start typing or drop a file into the text area to get started.

Each of these illustrations contains the title/name of a membership. There are no actual titles in the HTML to represent these memberships otherwise, which means that the text in each image is the title of that particular membership. This, in turn, means that this text needs to be as searchable, selectable and accessible as real (HTML) text.

In other words, the text inside the images needs to remain real text and not be converted to outlines, for starters. SVG text — wrapped in elements within an

In a website or application, arrows can determine how you navigate them by performing specific actions like “go to next page”, indicating to scroll “top or bottom, left or right” and many other. With the help of CSS pseudo-elements and borders, it’s easy to create different arrow styles that will look great on both mobile and desktop. So if you’re currently using arrow images in your projects you can easily replace them with CSS arrows. Doing so, will reduce the number of requests when loading a website or web app.

Grid layouts are fundamental to the design of websites, and the CSS Grid module is the most powerful and easiest tool for creating it.

The module has also gotten native support by the major browsers (Safari, Chrome, Firefox) this year, so I believe that all front-end developer will have to learn this technology in the not too distant future.

sunset water forest sand snow art flowers fire black and white

By Val Head

I hope you enjoy the book! All the example files can be found in the live example codepen collection. (Bookmark that so you can reference them as you read.)

Animista is a place where you can play with a collection of ready to use CSS animations, tweak them and download only those you will actually use.

Learn some interesting animation techniques involving Sass and SVG filters for realistic motion effects on the example of animated animals.

Animating elements in your mobile applications is easy.

Animating elements in your mobile applications properly may be easy, too… if you follow our tips here.

While everyone is using CSS3 animations in mobile these days, many are not doing it properly. There are best practices to take into account that are constantly and considerably disregarded. This happens mainly because there are still people who don’t really understand the real reasons why those practices exist and are so vigorously endorsed.

The Basics of Node-KSS

To achieve our goals of a platform agnostic, low-friction style guide, we landed on kss-node, which is itself a Node.js implementation of Knyle Style Sheets (KSS), a Ruby library that:

... provides a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format.

The basic principle is that your style guide is generated via comments you create in your CSS, SCSS, Sass, LESS, etc.

People are starting to ask: where can I learn about CSS Grid?

There are a lot of fantastic resources out there. When it comes to the technical how-to, most of what’s out there was written by Rachel Andrew. If you don’t know her work, take some time to get to know her and follow her.

So here are the links to resources I recommend. I will keep updating this list:

My favorite CSS “trick” would have to be these 3 lines of CSS:

• { background-color: rgba(0,255,0,0.1); }

I’ve been using this snippet for years! It makes debugging layouts a breeze and is quite insightful when dealing with the box model.

Today, we are in the early stages of such a revolutionary shift, brought about by CSS Grid Layout. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by this new layout module, and in their place we find new possibilities, limitations and best practices that will take us into the next era of web design.