Introducing the Codrops CSS Reference

Codrops is one of the most inspirational places on the internet. Yes, I am biased, but I am sure you can agree that that’s true.

If you’re looking for inspiration, the many, many creative resources you can find here are sure to spark an idea or two in your head. That’s one of the things I adore about this website—Manoela and Pedro never fail to impress us with what they have to offer.

If you’re looking to learn about how to use a CSS property, you will find a lot to learn by digging into the source code for the resources you get here. But what if you want to learn more about a property’s basics: property definition, different possible values and what each value means and does, etc.? Wouldn’t it be nice if you were able to find everything you were looking for right here, too?

A little over a year ago, we thought that it would be fantastic if Codrops had some kind of section where you can read and learn all about a CSS property, therefore turning Codrops into a perfect destination for anyone looking for inspiration and wanting to learn about the CSS behind it. Manoela approached me with the idea, and only a few days later, I started writing.

So, over the course of (slightly less than) a year, we’ve created a new department for Codrops: the CSS Reference. And we are beyond thrilled to finally share it with you.

Like any knowledge base, this reference is a work in progress and we strive to improve it and make it better. If you have any suggestions for improvements or see an error, please open an issue on this GitHub repo.

The Reference

The Codrops CSS Reference is an archive containing a list of entries categorized by type: CSS property, CSS function, CSS data type, CSS at-rule and CSS pseudo-classes/selectors/elements. Each entry is an article defining and explaining a CSS property, function, data type, at-rule or pseudo-class/selector/element.

In addition to these five categories, one more category exists: CSS concept. An entry in the CSS Concept category is a complete guide to a specific CSS concept or feature.

CSS concept entries serve as a ‘global’ entry for a group of related properties. For example, Flexbox and Counters are two concepts that have their own entries. Each entry explains what the concept means, what it does, and includes a definition and usage examples of its properties.

So, what does a CSS entry look like?

Structure of a CSS Entry

Each entry has a header that states what category this entry belongs to, and a live search module. We’ll talk about the live search feature in a following section.

Each CSS entry is also made up of several sections, the main ones are: Description, Official Syntax, Values, Examples, Live Demo, Browser Support, Further Reading and Related Entries. Every section may or may not have subsections.

The description section is where you learn what the CSS property/function/selector/etc. does. It’s basically where the definition and further explanation goes.

After the definition, you get an overview of the official syntax, initial value, what element(s) the CSS feature applies to, and whether or not its values are animatable. Some category types do not require this section, so it may or may not be there depending on what feature you are reading about.

Then each value is defined and described in the Values section. Again, if a CSS feature does not have a set of values (for example, an at-rule), this section is omitted.

The Examples section is where you will see examples of the feature in use—they are mainly snippets with or without screenshots of the result.

The Live Demo section will contain one or multiple live demos. The demos are sometimes live demos of the snippets in the Examples section, and sometimes they are that along with additional examples. Depending on browser support, the live demos might be accompanied with screenshots showing how the example should look like.

Note that many entries include several live demos, some of which are embedded within the description section.

Make sure you check the Browser Support section to determine whether or not the browser you are using supports the feature you are reading about.

Because there are many great reading resources about different CSS features and topics, the Further Reading section includes links to some good resources that are worth reading, along with a link to the specification(s) where the CSS feature at hand is defined.

Codrops Playground

While I wrote the entries, Manoela and Pedro worked on one of the best features of the reference: the playground.

The live demos you will see in the entries are all demos you can edit and play with yourself—and we strongly encourage you in the entries to do so, to get a better feel of how a certain feature works and what the different values do. Note that the playground is still in alpha stage and a lot of features are yet to come. Feel free to send any bug reports, suggestions or comments to playground ‘at’ codrops.com.

Live Search

For each entry, you get a live search module that you can also find in the Codrops homepage, right below the featured post, to the left.

The live search, as the name suggests, will give you a list of all CSS entries that match your search string. So if you search for a specific string (or even a letter), the search module will show all the entries that have that string in the title as a drop-down. This is particularly useful for getting related properties as you search for a specific property (for example: border, border-top, border-bottom, border-right, etc.).

Browser Support

Whenever available, you’ll see a CanIUse.com browser compatibility table embedded in the Browser Support section, so the compatibility table will always be up-to-date.

For the entries that don’t have a CanIUse support table, we wrote the browser support information by hand. The browser support for the majority of features is well-known and tested. Support for other features may or may not change in the future, so if you notice any outdated compatibility information, please do let us know, and we’ll update the entry accordingly.

Moving Forward

There are a few missing properties that have little or no current browser support, or whose specifications are unstable and still in flux. Our hope is to add the entries for those properties some time in the future when—hopefully—browser support gets better and specifications are stabilized.

We also all know that, in our field, something new emerges every day, so our hope is to continue growing and extending the reference, adding any additional properties and features to it with time. Even the current entries will get more improvements slowly with time.

We set milestones, and the first one was to deliver you a great reference to start with, and we’ll be working on gradually and continuously improving it in the future.

Your Feedback

Of course, your opinion and input is important to us. After all, we made this reference for you, so we want to make sure you find everything you need in it.

As such, we will be gathering your input and suggestions in a Github repository dedicated for collecting your issues and suggestions for the reference.

Found a bug? Found a piece of information that needs to be updated? Typos? Got a suggestion to improve the reference? Want us to add a concept entry for a specific CSS concept? Feel free to open an issue on Github. I will personally be looking into the issues frequently and answering your questions and making edits and updates as needed as much and as soon as possible. You can also tweet at me on Twitter if you’ve got a quick note about an entry or a request.

Final Words

We put our heart into the reference, hoping to have provided you with a very useful source of learning. I hope that you learn from the reference as much as I have learned in the process of writing it. 🙂

And we also hope that you like the subtle makeover Codrops got with this release, too!

Thank you very much for reading, and don’t forget to go check the reference out!