Generate CSS Quantity Queries with the QQ Builder

Few developers know about or use CSS quantity queries on their websites. It’s a fairly complex feature but also useful when you have varying items in a container.

Use Quantity Queries to Make Your CSS Quantity-Aware

Use Quantity Queries to Make Your CSS Quantity-Aware

Quantity queries are specially set-up CSS selectors that allow developers to make their code quantity-aware. In responsive design,…Read more

A quantity query can change/update CSS properties based on pre-defined limits for child elements. For example, if you have more than three items in a list you might make the font smaller to save room. Another example is updating the width of a link based on the number of links in a navigation menu.

Tasks like these can get complicated quickly but thanks to the Quantity Queries Builder you don’t need to memorize any confusing syntax.

quantity query builderquantity query builder

This web app generates all the code for you to save time. You need to select from three dropdown menus that customize your quantity query. They work like this:

  • Selector – which child element(s) should be counted
  • Query type – choose between “at most”, “at least”, or a combo of “at most” & “at least”
  • Amount – total number of items to filter

This seems confusing in code but it’s a really simple concept. Quantity queries let you apply CSS properties based on the total number of child elements.

So you can add certain CSS styles when there’s, say, at least 4 child elements (4 or more). Or, you could add styles only when there’s at most 4 child elements (0-4 children).

The combo selector lets you define exactly how many minimum & maximum children are necessary to display certain CSS properties.

queries boxqueries box

In the example on the screenshot above, I’ve set the total “at most” items to 2. This means when I have 0, 1, or 2 children the blocks are red. If I add one more to get 3 children then all the blocks turn blue.

If you have no idea what’s going on you can click the small information box in the sidebar. It’ll bring up a modal window with facts and syntax explaining the quantity query feature.

what are quantity querieswhat are quantity queries

This is a very handy tool for both beginners and experienced developers. It’ll save lots of time in the long run and it’ll help you create more dynamic websites.

To get started, visit the QQ builder website and start customizing your features. You can toy with the results and check the live preview in the right pane to learn how your changes affect the child elements.

This project is also available on GitHub so you’re free to check out the source code or even download a copy locally. And if you love this app or have any questions/suggestions for the creator Drew Minns you can shoot him a quick tweet @drewisthe.

The Definitive Guide to CSS Pseudo-Classes

The Definitive Guide to CSS Pseudo-Classes

Whether you are a novice or an experienced CSS developer, you probably have heard of pseudo-classes. The most…Read more

Source: http://www.hongkiat.com/blog/quantity-query-builder/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s