CSS Code Snippets

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

CSS3Generator

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).

CCS Tricks

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.

CSS Button Generator

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.

CSSFlow

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.

Tool Review: Sublime Text 2- make the switch to a better text editor

For developers, the debate over which text editor to use is along the lines of every other product comparison feud; each product has its positives and negatives for people.  However, there seems to be a text editor that is standing out more than others: Sublime Text 2.  Sublime Text is marketed as a code, markup, and prose editor.  It’s fast, available on all platforms, and has a few tricks up its sleeves.

One of the first things that sticks out about Sublime Text is the overall look.  The colorful text really contrasts the black background.  You really feel like you’re in one of those movies that has some guy coding on a black screen with green text all night.

On the right, another scrollable frame exists that shows your entire project zoomed out.  Sublime Text calls this the Minimap.  This is really useful for when you are working in a large project and need to quickly scroll through the text.

Most code editors can be visually altered, so looks aren’t everything.  So what else makes Sublime Text special?

Navigating documents and Sublime Text is very fast.  One of their features, Goto Anything, allows users to open a document with ⌘P and then they can begin typing the name of the document. Once the document is open, they can type @ to quickly jump to symbols, lines, or words.

Sublime Text 2 in action

You can also be at several places in the document at once. Multiple Selections allows users to type on multiple lines at once.  Instead of making ten changes across the document, you can change all of those lines at once.  This is especially useful for when you need to rename variables or make batch edits.

You can also quickly change the syntax of documents.  If you're working in a CSS documents and it hasn't automatically changed the syntax to CSS, you can do so.  This syntax has special color coded tags that allows for easier editing and navigation within documents.

Another appeal is that it is the same across all platforms.  Currently, Sublime Text 2 is $70, but your purchase extends your license across all platforms.

With that said, Sublime Text 2 is highly customizable.  This is probably the most important feature and why Sublime Text is so popular.  There is a huge library of plugins, which allow for further customization.  In a future blog post, I will discuss some further enhancements you can make to get the most out of this text editor.