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…
As developers, we know how important it is to sharpen our tools and continually add new ones to our workflow. The command line is one of the best tools you can master as a developer. With tools like Grunt, Gulp and Bower leveraging the increase in productivity that comes with working in the command line, we are seeing it become a much more friendly and comfortable place for beginners and experts alike. In this article, Wes Bos provides insight into some of the best tools to use in your day-to-day workflow in the command line and gets you started with a totally customized setup.
Read more…
Today, Rachel Andrew will be taking a look at how to build a simple yet robust workflow for developing sites that require PHP and MySQL. She’lI also demonstrate a process for using a hosted service to deploy files in a robust way to your live server. By the end of this article, you should be in a position to develop one or many sites locally, using a setup similar to how the site will run on the live server. You will deploy in the confidence that what ends up on the live server is exactly what should be on that server — no more, no less. Once you understand this type of workflow, you can explore how to streamline it further, making time to do more interesting things than fight with servers and hosting!
Read more…
The number of Flux implementations available can feel overwhelming, but overall Jim Cowart finds it an encouraging development. Solid and successful patterns like Flux will, by their very nature, encourage multiple implementations. In this article, Jim will take a look at some of the key lessons he has learned about React and Flux. Whether you’re new to React and Flux, or going as far as building your own Flux implementation, Jim thinks you’ll not only enjoy this journey, but find some thought-provoking questions and wisdom you can apply in your own endeavors.
Read more…
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…
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…
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…
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…
By inserting a single element in your markup, you can tell any web browser to render an interaction control, and you can completely modify that interaction – from a text field to a checkbox to a radio button – by simply changing a keyword. Now imagine a world where creating these interactions means also creating custom interaction controls, and you begin to realize how taken for granted inputs really are. That’s what the HTML 5.0 specification was intended to solve, by expanding the concept of the text input to allow for specific data types, such as numbers and email addresses, as well as rich interactions, such as task-specific on-screen keyboards and date- and color-pickers.
Read more…
The extend directive can produce undesirable side effects if it is not carefully implemented. Thankfully, there are many strategies for using extend effectively that can prevent these side effects and produce clean, organized CSS. Understanding how extend works and keeping the guidelines above in mind will enable you to use @extend to its full advantage — reducing CSS output and keeping relationships intact, no matter what exported selectors (classes, attributes, etc.) you use. Make wise use of both the @mixin and @extend directives — they’re meant to coexist in your well-organized style sheets.
Read more…
