People love to save time. It’s no surprise to find that developers enjoy saving time
as well. Mentioned in a previous blog post, developers are very particular about which code editor they
use. As we saw with Sublime Text
2, some editors have built in features that allow users to save time and code
faster. In this week’s post, we
will go over another way in which people save time while working on projects:
CSS code snippets.
CSS can be very basic; it’s a markup language. In contrast to JavaScript, there is
usually just one or two ways to make the document behave or look a certain
way. As a result, you can easily
build something and share it with somebody. CSS is very easy to tweak as well, so why not allow users to
change up the code so that it suits their needs?
Some friendly and good-hearted developers have done just
that.
Let’s say you want to quickly build a div that has a border
radius. If you’re like me, you
still have trouble remembering the exact syntax to do so and looking up the
documentation for it can be time consuming. Instead of researching, try finding a tool for it. In the border radius example, you can
adjust the settings of the CSS to suit your needs. We will go over a few websites that have these types of
tools!
5 CSS Code Snippet Websites
The site provides 12 different tools including border
radius, box shadow, multiple columns, transition, and transform. One of the features that I really enjoy
is the browser compatibility feature.
For each tool, the site will tell you which browsers the code is
compatible with (including browser versions).
This site is a classic, fantastic resource. The author, Chris Coyier, is well known
in the developer community for his work on the site and his work with
Codepen. CSS Tricks provides a ton
of snippets; some of which are more complex than CSS3Generator’s. For example, he provides snippets for
useful LESS Mixins. He also
provides snippets for other languages, so you can definitely spend a few hours here
if you wanted to.
HTML5’s button tag is nice and all, but it looks extremely
plain. This fancy little tool
allows you to dress up buttons.
You can even create them with gradients and hover effects.
This site provides some really nice looking results. If you’ve got time, there are 11 full
pages of code snippets ranging from toggle switches, buttons, tables, bars,
etc. A lot of it is really trendy
looking as well. The site also
provides some nice looking UI kits.
No comments:
Post a Comment