Prior to CSS Grid Layout landing in browsers, many people saw flexbox as the answer to all of our design-related problems. However, flexbox doesn’t provide a grid system any more than floats do, although it does make creating one simpler. CSS Grid is such a different way of approaching layout that there are a number of common questions Rachel Andrew is asked as people start to use the specification. In this article, she will answer some of those, and will be one in a series of articles on Smashing Magazine about layouts.
Read more…
Uploading an entire folder or folders of files is usually quite a hassle, as files in each folder have to be selected manually. And then some folders might contain sub-folders as well. You can use webkitdirectory, a non-standard attribute that allows users to pick a directory via a file input. Currently supported in Chrome, Firefox and Edge. It’s important to note that the attribute is non-standard, so it will not work for everybody. However, it doesn’t break anything as browsers that don’t support it will just ignore it, so you can easily progressively enhance your file upload without relying on the feature being supported everywhere.
Read more…
Windows, macOS and Linux made up font-wise, and since then, all modern fonts have been compatible across those OS’. There’s no question, the future of web typography looks promising. At the 2016 ATypI conference, the world’s biggest type design conference, Microsoft, Google, Apple and Adobe announced that they have been working on a new iteration of the OpenType standard, called variable fonts. Because it gives a lot more control to the user to modify the typeface depending on the context and device, this new version opens new opportunities for web typography and will close the gap in quality between web and print. In this article, François Poizat will show you the ins and outs of these new tools and how to take control of our typography.
Read more…
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…
