Flex items are truly accommodating and a pleasure to work with. Most web apps consist of a series of modular, reusable components. You can use flexbox for those bits of layout that induce headaches and that depend on brittle CSS hacks to work. It takes a while to have your “Aha!” moment with flexbox, because it involves unlearning what you already know about CSS layouting. But once you speak the flexbox language fluently, your process of designing responsive apps will become effortless and your style sheets will get leaner!
Read more…
JavaScript is “real” programming. This means you not only have to learn a whole new and complex syntax but also have to “learn how to think.” The barriers to entry are high and prevent many designers from taking the plunge. uilang tries to fix that. In this article Benjamin De Cock will introduce you to uilang’s philosophy and syntax. You’ll start with a simple example to get you comfortable with the basics, before moving to something more exciting. At the end of this tutorial, you’ll be able to code many typical interface widgets, such as popovers, tabs, overlays and much, much more.
Read more…
Print style sheets is the main thing that comes to mind if you mention printing with CSS. But CSS is also being used to format books, catalogs and brochures — content that may never have been designed to be a web page at all. In this article, Rachel Andrew will take a look at the CSS modules that have been created not for use in web browsers, but to deal with printed and paged media. She’ll explain how the selectors, properties and values that they introduce work. She’ll finish up with a working example that you can use as a starting point for your own experiments.
Read more…
The World Wide Web is not static. Quite the opposite: It’s responsive, fluid, evolving and ever changing.
Web designers need to be familiar with HTML and CSS code and front-end technologies when they conceive a website or application’s interface. In Creative Suite version 6, a CSS Properties panel was added to its toolset — a tool that, if used properly, could help both designers with CSS coding experience and beginners alike. By the end of this article, you should have a better overview of this feature and also know how to use it with CSS Professionalzr, a free extension developed by Matt Stow to further optimize the code generated by the panel.
Read more…
Developing a polyfill is not the easiest challenge. On the other hand, the solution can be used for a relatively long time: standards do not change often and have been discussed at length behind the scenes. Also everyone is using the same language and is connecting with the same APIs which is a great thing. This is quite a technical article, and while Maksim Chemerisuk will try to minimize the code snippets, this article still contains quite a few of them. So, be prepared!
Read more…
In the wake of so much “CSS versus JavaScript animation” infighting, a new API specifically for web animation is coming out that might just unite both camps. In 2014, Rachel Nabors had the chance to travel the world to talk about using animation in user interfaces and design. She met and interviewed dozens of people who use and champion both CSS and JavaScript. What you’re about to read is purely observational and as unbiased an account as you will be able to find on the subject of web animation.
Read more…
In this article, Daniel Sternlicht walks you through the development process of a Chrome extension with modern web tools and libraries. It all begins with an idea. Daniel thought it would be nice to create a Chrome extension that enables you to mark your reading progress in articles so that you can continue reading them later — anywhere. “Markticle” is the name he chose for this extension. He’ll share here the technologies that he used to develop it. After reading this article, you’ll have a ready-to-use “Save for Later”-like Chrome extension.
Read more…
In this article, Sara Soueidan will go over the prerequisites and techniques for working with CSS in SVG.
She’ll also go over how to export and optimize SVGs, techniques for embedding them and how each one affects the styles and animations applied, and then we’ll actually style and animate with CSS. Make your SVGs accessible! You can do several things to make that happen. In addition to accessibility, don’t forget to optimize your SVGs and provide fallbacks for non-supporting browsers. We hope you’ll find this article to be useful.
Read more…
CSS is usually considered a language for applying styles to webpages. However, in this article Krasimir Tsonev will show you that it is more than that. It is also a handy tool for collecting statistics. What matters in the end is the impact for clients. Are they getting more products sold or are there more visitors for their campaign sites? The final results usually show if your project is successful. Google Analytics is a powerful way to collect data. In this article, you will see a CSS-only approach for tracking UI interactions using Google Analytics.
Read more…
Eight years is a long time on the web, yet for us it really doesn’t feel like a long journey at all. We’d love to share a few things that we’ve learned over the last years about the performance challenges of this very website and about the work we’ve done recently. If you want to craft a fast responsive website, you might find a few interesting nuggets worth considering. In this article you will find a little story about the things that happened on this little website over the last year. Thanks for keeping us reading throughout all these years. It means a lot. You are quite smashing indeed. You should know that.
Read more…
