CategoryCSS

December 21, 2015 — Single-page applications tend to take the form of runtimes, JavaScript executables deployed like popup shops into vacant  elements. In this article, Heydon Pickering will introduce a solution for architecting progressive single-page applications using little more than a couple of CSS tricks, less than 0.5 KB of JavaScript and, importantly, some static HTML. It is not a perfect or complete solution, but it testifies to the notion that performant, robust and indexable single-page applications are achievable: You can embrace web standards while reaping the benefits of sharing data and functionality between different interface screens on a single web page. Read more…

December 8, 2015 — One of the relatively recent tools introduced for styling is PostCSS, which aims to reinvent CSS with an ecosystem of custom plugins and tools. Working with the same principles of preprocessors such as Sass and LESS, it transforms extended syntaxes and features into modern, browser-friendly CSS. Over the next few years, the way you use CSS will change in many different ways. Every project will have different requirements, to which you will have to adapt your production methods. Working within a modular ecosystem like PostCSS allows you to pick and choose the features you want to complete a project. Read more…

December 3, 2015 — Have you used calc()? It’s a function that should work as a value in all places where a number value — with or without specified units — works. However, while basic support is really good, you might run into trouble depending on where you use it. In this article, Ana Tudor will look at a few examples of how to use calc() including what support problems they have (if any) and whether they’re ultimately the best solution. Read more…

November 13, 2015 — Microsoft restarted conversations about system UI fonts with its original Windows Phone design language, which relied heavily on typography in general, and on a font named Segoe in particular. No wonder that the idea of using those fonts is spreading through the web world as well. Whether you want your website to feel more like an app, to draw clearer lines between the content and user interface, or to use modern, beautiful fonts with zero latency, you might be interested in using system UI fonts on your website. But it’s not as easy as it could be. That’s because the CSS support is curiously schizophrenic. Read more…

November 3, 2015 — Flexbox today is very, very real. After many years of development, the specification has become much more stable, making it easier to achieve those CSS layout dreams. In this article, Dennis Gaebel Jr will discuss layout patterns well suited to flexbox, using the interface from the Tracks application, which also takes advantage of atomic design principles. He’ll share how flexbox proved useful and note the pitfalls of pairing it with particular layout patterns, and also look at those patterns that caused concern, provide suggestions for fallbacks and share additional tactics to start using this CSS property immediately. Read more…

October 21, 2015 — Did you ever take a walk through the entire Unicode table? It’s the history of our civilization expressed in typography. It might be organized in an arbitrary fashion and not explained well, but it’s all here: languages, cultures, concepts. Spaces are here, too. There’s the one with an agent good enough to have gotten it the biggest key on everyone’s keyboard, but there are many more: the very narrow hair and thin spaces, the super-wide en and em spaces, and a few others in between. Let’s find out what other space characters there are, what their heritage is, and how they can be useful today. Read more…

September 21, 2015 — Back in spring 2013, Smashing Magazine sported a <select> menu as its mobile navigation. It wasn’t considered an anti-pattern back then and Marco Hengstenberg still thinks it’s a viable solution to the complex problem of how to build accessible and functional cross-device navigation. Brad Frost wrote a few words about the pros and cons of this pattern on his blog and Marco couldn’t agree more. In this article, Marco will explain how he helped rebuild the mobile navigation in order to enhance the experience for the readers of Smashing Magazine. Read more…

August 17, 2015 — The future of web layout is bright, thanks to flexbox. The CSS layout mechanism lets us arrange elements in a truly web-like way. Some elements can be fixed, while others scroll. The order in which they appear can be independent of the source order. And everything can fit a range of screen sizes. Yep, it’s a great time to jump into flexbox if you haven’t done so yet. But flexbox has a dizzying array of features, and in this article, Ben Gremillion will take a look at how you could create a basic Gmail-like, flexbox-based interface. If you haven’t explored or fully understood flexbox yet, this piece will revisit and explain a few things that might be confusing at first. Read more…

August 13, 2015 — Most of the time, we develop websites without understanding what the browser is actually doing under the hood. How exactly does the browser render our web pages from the HTML, CSS and JavaScript that we create? Google’s PageSpeed Insights tool can be very helpful when trying to profile a web page and find areas for improvement. You simply enter the URL of the page that you want to test, and the tool provides you with a list of performance suggestions. Fortunately, the solution to this problem is simpler than it seems! The answer lies in the way that the CSS and JavaScript are loaded in your web page. Read more…

July 29, 2015 — CSS quantity queries follow the concept of changing the styles based on a condition: the condition within a quantity query being the number of sibling elements. An example would be navigation where items are 25% wide when four items are available; yet when there are five items available, the width of the navigation items changes to 20%. This is a common problem with dynamic site frameworks like WordPress or Ghost. Can you avoid too many media queries and JavaScript workarounds? Yes, you can. This is where quantity queries are best used. By being creative with CSS selectors, we can count the number of sibling items and apply styles if they meet the conditions. Using these queries, we can future-proof our designs and projects, and allow them to scale gracefully. Read more…