CategoryCSS

April 18, 2016 — Imagine a web component distributed as a single .js file and containing everything. We would still have our basic style sheets, but the dynamic CSS would be a part of JavaScript. Now this is possible, and one way to achieve it is with CSSX. Similar to JSX, CSSX offers encapsulation. Being able to see all parts of a single component is a big step forward. The separation of concerns defined development for years, but the web is changing. Understanding what is going on is easier when everything is in one place. Read more…

March 24, 2016 — Houdini is a new W3C task force that introduces a new set of APIs that will give developers the power to extend CSS itself, and the tools to hook into the styling and layout process of a browser’s rendering engine. In this article, Philip Walton is going to talk about how Houdini will solve CSS feature problems and list some of the more exciting features currently in development. He’ll also offer some concrete things you as web developers can do today to help make Houdini a reality. Read more…

March 21, 2016 — Finding little techniques and tricks to help you get to results faster can immensely improve your productivity, so you don’t have to waste time on solutions that will never see the light of day. Vitaly Friedman loves finding those little useful front-end goodies that make our lives easier. Since technologies emerge and evolve permanently, keeping track on what’s going on is often difficult, especially since specifications change and so does the browser support. Read more…

February 23, 2016 — In this article, Cosima Mielke has collected tips, tricks, and tools To give you a head start into Flexbox and provide you with ideas on how to use it to master common coding challenges, that will help you get the most out of its power already today. Flexbox gives us a new kind of control over our layouts, making coding challenges that were hard or impossible to solve with CSS alone straightforward and intuitive. It provides us with the means to build grids that are flexible and aware of dynamic content. The list is by no means complete but includes the resources which we found helpful and useful. Read more…

January 13, 2016 — Using a preprocessor does not automatically upgrade one’s code: A thorough foundation in CSS is a prerequisite. In Karen Menezes’ experience, badly architected and overly abstracted preprocessor code is much harder to debug and maintain than a large CSS file created with basic structure and common sense. Variables can be seen as the backbone of a well-constructed project. Well-commented and well-defined variables set a great foundation for a project of any size. By maintaining a variable-centric approach, we can structure our style sheets with a meaning and modularity that persist beyond the trends that come and go. Read more…

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…