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…
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…
From a high-level perspective, web components will enable better composability, reusability and interoperability of front-end web application elements by providing a common way to write components in HTML.
In this article, Sebastian Metzger will show you why this will be such an important step, by showing off what can be accomplished right now using Polymer. Polymer is currently the most advanced and (self-proclaimed) production-ready library based on web components.
Read more…
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…
In this article, Heydon Pickering mixes old with new, taking a somewhat primitive art and breathing new life into it. With the help of Sass, he streamlines the necessary workflow and hopefully demonstrating that automation can, sometimes, be a friend to creativity. The reason he conceived the technique and wrote the necessary code for this article is because he really wanted to make cel animations of his drawings. There was already a goal. The design part is in determining what we want to make in the first place, for whom, and whether it’s really such a good idea.
Read more…
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…
Implementations usually involved either using an external image editor to create multiple images for multiple values of the pie chart, or large JavaScript frameworks designed for much more complex charts. Although the feat is not as impossible as it once was, there’s still no simple one-liner for it. However, in this article, Lea Verou will show you that there are many better, more maintainable ways to achieve it today.
Read more…
Quantity queries and quantity ordering are advanced concepts and might be scary for beginners. However, as we move presentational styling away from programming languages and into CSS, we should use these tools more and more. Even as many members of our industry explore content queries, we can now use quantity queries to modify the order of content simply by counting. If you had to create a table of items, you might assume that JavaScript would be the best solution — just loop over the items, and if there are more than three, update the styling. But what if I told you could do it with CSS alone?
Read more…
In Pieces is an interactive exhibition of 30 of the world’s most endangered species. The experience is an informational reminder of the beauty we are in danger of losing every day, but it’s also a showcase of evolutionary distinction. Users are told the stories and struggles of these unique lifeforms, as well as invited to dive into numerical data, download wallpapers and even obtain a poster featuring the entire collection. In this article, Bryan James explores the inspiration for the project and aspects of how different parts were built, and he’ll dive into how you can use this greatly underrated line of CSS for your own projects.
Read more…
In the first part of this series, David Tucker walked through a messaging application demo powered by the Kinvey application. He explored how to leverage user management, file storage and the data store. To complete the demo, you need to leverage two key pieces of Kinvey functionality: the permissions provided by the data store, and push notifications, which are enabled through the business logic functionality. With this article, you will have seen ways that an MBaaS solution can help you to create compelling business- and consumer-focused mobile experiences. This certainly is a space with a lot of focus at the moment, and David expects rapid maturity and evolution of these services over the next year.
Read more…
