Skip to content

holdicon/css-resources

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 

Repository files navigation

css-resources

Because, sometimes you have to.

Preprocessors

CSS preprocessors offer alternative syntax but compile to basic CSS. Things like selector nesting, loops, mixins, and interpolation are just some of the many features they offer. In terms of basic features they're all at pretty much the same level (although, I haven't done an in-depth feature comparison). Looking at just the GitHub repos, Less has 10k followers while Sass has just 4k. However, Sass boasts 5600 commits and nearly 150 tagged releases. Less has about 1800 and 30 respectively. Real usage statistics are hard to come by, but in my experience Sass the most popular, followed by Less. Stylus is only a minor competitor (although it does have nearly 4500 stars and 3400 commits).

It has two syntax variants: .scss which looks very much like CSS (i.e. it has braces and semicolons everywhere), and .sass which does away with extraneous punctuation. It seems like .scss is more popular, for some bizarre reason. Sass is written in Ruby. The Compass gem provides a huge set of Sass mixins for dealing with vendor prefixes, positioning, etc.

Less is the main competitor to Sass. It's written in JavaScript. The Bootstrap framework is written in Less (although it does now have an official Sass port). The .less syntax is pretty similar to .scss.

The .styl syntax is about as minimal as it gets. Forget semicolons and braces; you can even drop the colons too. Further, Stylus is less picky about syntax — you're free to keep using punctuation if you want. Stylus is written in JavaScript.

Which One?

Shoot, I dunno. Maybe these will help:

Frameworks

Frameworks provide a foundation upon which you can build your project's visual style. They also provide features like built-in responsive grids, which are tricky to implement from scratch. Most frameworks are built on either Sass or Less, which makes customizing them pretty painless, since you can jump into the source files and change variables easily, then recompile.

Bootstrap

Bootstrap is the most starred repo on GitHub by a massive margin. It gives you a quick way to start building a nice-looking page with very little overhead (aside from looking up the proper class names in the docs). However, in a serious project that will involve lots of custom CSS, Bootstrap can be a nightmare. Overriding styles is a tedious exercise in selector specificity. Further, the popularity of Bootstrap means that sites that use it heavily don't really stand out. They just look like everything else. Bootstrap covers just about every element you'd conceivably use, and as such, is quite large — around 100KB minified.

Others

Foundation is the most prominent Bootstrap competitor. Other CSS frameworks include Pure, Gumby, and Blueprint.

None

I've found that the best way to keep CSS light an manageable is to not use a framework. You'll probably want to start with a responsive grid system and build out from there.

OOCSS

Object-Oriented CSS applies some of the principles of object-oriented programming to CSS design and structure. The goal is to write modular CSS that scales well.

Responsive

I feel like whenever someone tries to define exactly what constitutes "Responsive Web Design" they get torn to pieces. So, uh, basically, your site or web app should look good on all devices. In the context of CSS this means, basically, media queries. Read the docs for your responsive grid system, and use them. If you want to go the extra mile, implement some responsive typography.

About

Because, sometimes you have to.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published