CategoryCSS

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…

July 28, 2015 — 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…

July 15, 2015 — 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…

June 17, 2015 — There are various ways to approach responsive typography and consistent vertical rhythm, and they are not limited to my suggestion. However, Jonathan Suh finds that this works for him more times than not. Managing consistent, typographic rhythm isn’t easy, but when the type is responsive, things get even more difficult. Fortunately, Sass maps make responsive typography much more manageable. This is where Sass maps and loops are powerful: They’ve helped him manage z-index values, colors and, as you’ll see in this article, font sizes. Read more…

June 2, 2015 — 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…

May 26, 2015 — There is a gap between pure CSS layout and custom design elements created in software such as Photoshop or Illustrator. Sophisticated SVG filters give us more independence from third-party design tools and bridge this gap by enabling us to create visual styles directly in the browser.Wouldn’t it be great if we could style letters the same way we usually style text with CSS? In this article Dirk Weber will show you how SVG filters help you to create playful, decorative web typography. Read more…

May 11, 2015 — With CSS’ clip-path property you will begin to think outside the box, literally, and hexagons, stars and octagons will begin to take form on your web pages. Once you get your hands dirty with clip-path, there’s no end to the shapes you can generate, simply by tweaking a few values. In this article, Karen Menezes will provide demos referenced to an inline SVG, in order to gain additional support on Firefox. Generating a responsive SVG clipped shape is trivial once you have created a responsive shape with CSS’ clip-path. We’ll look at this in detail later. Read more…

April 14, 2015 — Living style guides help front-end developers transform front-end codebases into well-described pattern libraries with the minimum of effort. But to make them really efficient, we need to choose the proper tools — so let’s have a closer look at what our community has to offer. In this article, Robert Haritonov has arranged the tools by function, highlighting only the most powerful ones worth knowing about. You can find more tools, plus videos, articles and other material about style guides at styleguide.io. Read more…

March 27, 2015 — Bugs erode trust, which in turn loses customers. So when Ben Gremillion began updating Foundation, a responsive CSS framework, he wanted to ensure everything worked. In this article Ben will teach you his methodology for testing responsively, not just on a case by case, page-from-PSD comp. He developed a certain system to make sure that nothing’s broken at launch on different devices. It’s not enough to look for blatant bugs. You have to be thorough: in execution, in accountability, and in direction. Read more…

March 17, 2015 — Using SVGs can reduce the number of HTTP requests for image replacement. it’s also easy to make an SVG scalable to its container for responsive development. In this article Sarah Drasner will cover a few ways of using SVG sprites to describe motion on the web. She’ll show some techniques for using SVG sprites in complex animation that takes advantage of these factors. All examples shown will assume the use of an auto-prefixer and some basic knowledge of CSS animations. Read more…