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…
Chartist was developed for a very particular need: to create simple responsive charts. While other charting libraries do a great job of visualizing data, something is always missing to satisfy this simple yet demanding need. In this article, Gion Kunz will show you how to use Chartist to create your own beautiful responsive charts. You’ll learn some key concepts of Chartist, how to easily extend it and also some advanced features, like responsive configuration overrides and the animation API.
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…
Ruth John has met some resistance when talking about this API. People either can’t see a need for it with the web, or they would feel uncomfortable talking to their device — both valid views. However, he hopes he will inspire you to at least give it a go and think about it the next time you are building something. Start welcoming speech: It might be just what you’re listening for.
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…
Testing is a critical process that developers should integrate into their workflow to minimize the number of bugs that get caught in the quality assurance phase. In this article, Lawrence Howlett shows you what to consider when creating a front-end testing plan and how to test efficiently accross browsers, devices and web pages. Front-end testing also needs to be budgeted for — with time, resources and money. Whichever tool you pick, stick with it, define a process and put the effort in. The result will be a better website, with significantly fewer bugs.
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…
