With CSS Grid being now supported in all major browsers, most of the hacks that helped to achieve complex layouts have become obsolete, and we’d love to invite you to a little contest to explore the possibilities and features of CSS Grid together. You create an interesting, accessible layout with CSS Grid, or use CSS Grid to rebuild an existing layout, and at the end of the contest, all templates and layouts will be made available to everyone for free download under the MIT license. The aim is to build a community repository full of CSS Grid goodness that inspires fellow developers and helps spread the wide adoption of CSS Grid.
Read more…
In order to really know whether your work is any good, you need a higher level of principles that can be used as a measuring stick for implementing design. You need something that is removed from a specific language like CSS or an opinionated way of writing it. To bridge this gap, Tom Greever’s compiled nine principles of design implementation. This is a set of broad guidelines meant to preserve an underlying value. It can be used as a guide for someone working on implementation or as a tool to evaluate an existing project. To make it easier to follow along and see how each principle applies to a project, Tom will use a design mockup from one of his projects as the basis for this article.
Read more…
Take a look on CSS grid layout for making websites with a demo to see different levels of enhancement. You can use the hottest cutting-edge technologies and fancy techniques, as long as you don’t forget who you are making websites for: users. Your users aren’t all the same, nor do they use the same device, OS, browser, Internet provider or input device. By providing a basic experience to begin with, you can get the best out of the modern web without compromising accessibility. In this article, Manuel Matuzović explains how floating, flexbox and grid work inviting to provide an accesible and usable experience for various browsers. Integrate progressive enhancement so you can build resilient websites!
Read more…
Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways. Much of what we know of the possibilities, limitations and best practices surrounding web layouts is effectively rendered obsolete by the CSS Grid Layout module. In this article, Morten Rand-Hendriksen will bring you some concepts into practical use. What you’ll get is a starting point for exploring what new layout opportunities and challenges CSS grid brings, what old problems it solves and how to start using the module in production websites today.
Read more…
When working with creative designers on web page designs, it’s fairly common to receive multiple Sketch or Photoshop artboards/layouts, one for each breakpoint. In this article, Jake Wilson is going to examine how to create scalable, fluid typography across multiple breakpoints and predefined font sizes using well-supported browser features and some basic algebra. The best part is that you can automate it all by using Sass.
Read more…
In this article, Serg Hospodarets will teach you more about CSS custom properties, including their syntax, their advantages, good usage examples and how to interact with them from JavaScript. You will learn how to detect whether they are supported, how they are different from CSS preprocessor variables, and how to start using native CSS variables until they are supported across browsers. This is the right time to start using CSS custom properties and to prepare for their native support in browsers.
Read more…
In this article, Jeremy Wagner will teach you everything about server push, from how it works to the problems it solves. Server push allows you to send site assets to the user before they’ve even asked for them. It’s an elegant way to achieve the performance benefits of HTTP/1 optimization practices such as inlining, but without the drawbacks that come with that practice. Jeremy will also show you how to use it, how to tell if it’s working, and its impact on performance. Let’s begin!
Read more…
In this article, Lea Verou explains what an HTML API is, why they’re useful, and which important lesson developers can learn from them. Keep reading to find out how to design a good one. You might be wondering, “All HTML and CSS authors know JavaScript, right?” Wrong. Take a look at the results of following poll.
Read more…
Creating responsive email is not an easy task. If you want to stand out, no matter how beautiful your emails are, you need to make sure they render correctly in your reader’s inbox, regardless of what email client they’re using. There are a few techniques out there to help email developers. You might be familiar with some of them, such as the hybrid approach, the mobile-first approach or even the Fab Four technique by HTeuMeuLeu. But because of the reasons stated earlier, and especially the lack of a standard, none of these techniques will enable you to tame all email clients at once.
Read more…
Sometimes animation that is nice and smooth in a simple demo runs very slowly on a real website, introduces visual artefacts or even crashes the browser. Why does this happen? How do we fix it? In this article, Sergey Chikuyonok aims to help you to better understand how the browser uses the GPU to render, so that you can create impressive websites that run quickly on all devices. Let’s do it!
Read more…
