12 Really Handy CSS Framework, Template And Snippet Sites For Smart Web Designer

Posted in Coding, HTML & CSS6 years ago • Written by 23 Comments

title-css

If You are creating and developing new web-sites regularly, You should think about template creation, collecting useful code snippets and things like that. You should do that to fasten development process, so I think You could use, change, optimize these template files to Your needs, however check out licence terms, if You use these for business purposes. However this is very generalize list for now, to clear out the best from the best sites. Use them well!

1. CSSTidy

csstidy

“CSSTidy is an opensource CSS parser and optimizer. It is available as executable file (available for Windows, Linux and Mac) which can be controlled per command line and as PHP script (both with almost the same functionality).
In opposite to most other CSS parsers, no regular expressions are used and thus CSSTidy has full CSS2 support and a higher reliability.”

I pasted their information, because it says everything better than I could.

For some people there can be a question – why You need to optimize Your CSS code?  Just if You want cleaner code, faster loading page, so You both – You and visitor benefit from optimization!

Get executable file here or use online optimizer!

2. Clean CSS

cleancss

You can also use this online optimizer version, which is very similar, but I am design geek, so I enjoy this site a little more. This calls, pick Your favorite one!

3. Blueprint CSS

blueprintcss

“Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.”

Very useful template files, helping You not to start always from big fat zero..and code everything again and again – now You can spend more time adding new features and think more about design, then reiterative process.

blueprint-test

4. Code-Sucks

code-sucks

Great collection of many different css layouts, code snippets (CSS, JavaScript, PHP), website templates. These really become handy in web development process. Put these in good use.

code-snippet

5. Snipplr

snipplr

Snipplr is very useful place storing and organizing many code snippets (Javascript, HTML, PHP, CSS, Ruby). You use regularly in Your development process. And also everybody can share and add their snippets, so the section  Popular Code Snippets clearly demonstrates the best and the most used codes for everybody. Pretty great. Also these snippets work with TextMate, too.

6. MaxDesign

Perhaps You know this site, I think I mentioned it somewhere before, but however this site must be included, because it’s really useful.

There You can find listamatic1 (one list – many different ways how to style it), listamatic2 () and several tutorials how to create CSS based lists, CSS floats and use CSS selectors.

maxdesign

7. MeyerWeb CSS Reset

Eric Meyer CSS reset is very popular. You should use resets to neutralize browser’s default style. Also Eric pointed, that this is just a starting point, but very good one.

meyerweb

8. YUI Library

“Every YUI Library component ships with a series of 300 examples that illustrate its implementation. These examples can serve as starting points for your exploration of YUI, as code snippets to get you started in your own programming, or simply as an inspiration as to how various interaction patterns can be enabled in the web browser via YUI.”

Very useful template files, which are great for starting points and You have good collection of examples to satisfy almost every web designer.

yui-library

9. 960 Grid System

960-grid-system

This grid system is becoming really popular – they offer commonly used dimensions, based on a width of 960 pixels offering 12 and 16 column grid systems. Designers use grids, to help their sites to look more harmonious and precise. You get several template files and mockups, when You download  that grid system, which are really helpful in the right hands.

Download / Demo

10. Sensible Standards CSS Framework

sencss

This framework is also based on Eric Meyer reset system, but also there are more features as basic styling, code is optimized without any double resets and more, go to their homepage to check for details.

11. Rounded CSS corners

spiffy

I guess You’ve heard about big discussions about rounded corners and how to create ones, here is great online tool where You can get rounded corners, style them online and get code immediately.

12. Content with style

Good framework collection to allow You rapidly fast develop new websites, thinking more about graphic design and less about coding.

content

I hope You’ll use these sites as a reference evolving Your skills and speed up Your development process! I am sure there are more sites out there, if You know some more, be honest and leave backlinks, will be appreciated!

192 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

23 Comments Best Comments First
  • graphic design blog

    Saturday, January 10th, 2009 20:13

    1

    i am using 960 GS for a long time. its great! everyone have to test it :)

    0
  • Ofer

    Tuesday, January 13th, 2009 09:10

    8

    Wow, made my life a little bit easier…. :)

    0
  • Jymi

    Wednesday, January 14th, 2009 04:55

    9

    Nice list, but I suggest you lose the snow JS, it a real CPU hog, in fact I have to get out of here before my browser crashes ;)

    0
  • Dainis Graveris

    Wednesday, January 14th, 2009 12:41

    10

    @LunixLuigi I already saw even more template, I miss here. I’ll add another sites very soon. And Thanks for pointing out!

    @Jymi in that case, I am getting rid of that effect immediately. Didn’t want to get that kind of effect.

    0
  • Thomas | Santhos Webdesign

    Thursday, January 15th, 2009 00:07

    11

    Somehow I just can’t get into this kind of stuff. I’ve been coding everything from scratch as long as I can remember. I always have a feeling of losing control when working this way. I wanna know exactly what I’m doing.

    More people who recognize this? Cause I realize it can spare lots of time.

    0
  • Eric Shafer

    Tuesday, January 13th, 2009 00:10

    7

    Tracked back to from here: http://www.presidiacreative.com/web-picks-7/

    Eric Shafers last blog post : Web Picks #7

    0
  • Dainis Graveris

    Monday, January 12th, 2009 19:45

    6

    @social network – I know just that digg like site template.

    @Timothy – if You are interested in snow..it’s just a handy cute plugin :) thanks.

    0
  • joyoge designers' bookmark

    Sunday, January 11th, 2009 15:56

    2

    useful list thanks..

    joyoge designers’ bookmarks last blog post : Ultimate List Of 17 Quality Free Fonts For Your Inner Designer | The Theme Blog

    0
  • Dainis Graveris

    Monday, January 12th, 2009 00:24

    3

    @graphic design yeah, I am starting to be a fan of that system too :)

    @Bill thanks for good words!

    0
  • Bill Lowden

    Sunday, January 11th, 2009 17:13

    4

    Nice list of design info. You listed several that I’ve never seen. Thanks.

    0
  • Timothy

    Monday, January 12th, 2009 18:12

    5

    Nice list. Thanks! Whoa, snow…

    0
  • miky

    Tuesday, January 27th, 2009 17:40

    12

    well this framework also make things so easy

    0
  • Antonis

    Friday, February 6th, 2009 07:48

    13

    Nice collection! I love the round corner generators, thank you!

    Btw, I started to use Blueprint a few days ago. Easier and quicker development.

    0
  • krishna

    Saturday, July 10th, 2010 04:41

    20

    Thanks you for sharing this great post

    0
  • Ahnaf

    Tuesday, March 22nd, 2011 16:20

    21

    I just only heard about Blueprintcss, here is more wow! it amazing post.
    Thanks buddy!

    0
  • Razley

    Sunday, August 21st, 2011 10:29

    22

    Hi guys! Thank you for your appreciation. I hope this short study about effective titles creation could be helpful to the community

    0
  • Krishna Kumar

    Wednesday, December 21st, 2011 12:06

    23

    This was really helpful… Great article…

    0
  • Jen Oliver

    Saturday, May 1st, 2010 19:49

    19

    This is really handy, thanks! I’ve been looking for a good tool to make rounded edges, and the other sites look great, too. :)

    0
  • andy

    Wednesday, April 21st, 2010 13:50

    18

    I am still not sure what a CSS framework is. It seems like it’s simply a collection of CSS files .. so then why call it a framework.

    by the way the filter for sp*m on this comment is ridiculous – I had to enter it about 10 times

    0
  • Mihir Gokani

    Saturday, March 21st, 2009 10:28

    14

    Many many thanks

    0
  • Jason Bartholme

    Wednesday, May 13th, 2009 01:06

    15

    I’m a big fan of 960Grid as well. It is easy to manipulate.

    0
  • smokestack

    Friday, May 22nd, 2009 13:28

    16

    Refactory.org code snippet wiki.. great code snippet site

    0
  • Marko Gerbin

    Thursday, September 10th, 2009 21:18

    17

    Thanks for sharing. Great stuff.

    0
  • Krishna Kumar

    Wednesday, December 21st, 2011 12:06

    23

    This was really helpful… Great article…

    0
  • Razley

    Sunday, August 21st, 2011 10:29

    22

    Hi guys! Thank you for your appreciation. I hope this short study about effective titles creation could be helpful to the community

    0
  • Ahnaf

    Tuesday, March 22nd, 2011 16:20

    21

    I just only heard about Blueprintcss, here is more wow! it amazing post.
    Thanks buddy!

    0
  • krishna

    Saturday, July 10th, 2010 04:41

    20

    Thanks you for sharing this great post

    0
  • Jen Oliver

    Saturday, May 1st, 2010 19:49

    19

    This is really handy, thanks! I’ve been looking for a good tool to make rounded edges, and the other sites look great, too. :)

    0
  • andy

    Wednesday, April 21st, 2010 13:50

    18

    I am still not sure what a CSS framework is. It seems like it’s simply a collection of CSS files .. so then why call it a framework.

    by the way the filter for sp*m on this comment is ridiculous – I had to enter it about 10 times

    0
  • Marko Gerbin

    Thursday, September 10th, 2009 21:18

    17

    Thanks for sharing. Great stuff.

    0
  • smokestack

    Friday, May 22nd, 2009 13:28

    16

    Refactory.org code snippet wiki.. great code snippet site

    0
  • Jason Bartholme

    Wednesday, May 13th, 2009 01:06

    15

    I’m a big fan of 960Grid as well. It is easy to manipulate.

    0
  • Mihir Gokani

    Saturday, March 21st, 2009 10:28

    14

    Many many thanks

    0
  • Antonis

    Friday, February 6th, 2009 07:48

    13

    Nice collection! I love the round corner generators, thank you!

    Btw, I started to use Blueprint a few days ago. Easier and quicker development.

    0
  • miky

    Tuesday, January 27th, 2009 17:40

    12

    well this framework also make things so easy

    0
  • Thomas | Santhos Webdesign

    Thursday, January 15th, 2009 00:07

    11

    Somehow I just can’t get into this kind of stuff. I’ve been coding everything from scratch as long as I can remember. I always have a feeling of losing control when working this way. I wanna know exactly what I’m doing.

    More people who recognize this? Cause I realize it can spare lots of time.

    0
  • Dainis Graveris

    Wednesday, January 14th, 2009 12:41

    10

    @LunixLuigi I already saw even more template, I miss here. I’ll add another sites very soon. And Thanks for pointing out!

    @Jymi in that case, I am getting rid of that effect immediately. Didn’t want to get that kind of effect.

    0
  • Jymi

    Wednesday, January 14th, 2009 04:55

    9

    Nice list, but I suggest you lose the snow JS, it a real CPU hog, in fact I have to get out of here before my browser crashes ;)

    0
  • Ofer

    Tuesday, January 13th, 2009 09:10

    8

    Wow, made my life a little bit easier…. :)

    0
  • Eric Shafer

    Tuesday, January 13th, 2009 00:10

    7

    Tracked back to from here: http://www.presidiacreative.com/web-picks-7/

    Eric Shafers last blog post : Web Picks #7

    0
  • Dainis Graveris

    Monday, January 12th, 2009 19:45

    6

    @social network – I know just that digg like site template.

    @Timothy – if You are interested in snow..it’s just a handy cute plugin :) thanks.

    0
  • Timothy

    Monday, January 12th, 2009 18:12

    5

    Nice list. Thanks! Whoa, snow…

    0
  • Bill Lowden

    Sunday, January 11th, 2009 17:13

    4

    Nice list of design info. You listed several that I’ve never seen. Thanks.

    0
  • Dainis Graveris

    Monday, January 12th, 2009 00:24

    3

    @graphic design yeah, I am starting to be a fan of that system too :)

    @Bill thanks for good words!

    0
  • joyoge designers' bookmark

    Sunday, January 11th, 2009 15:56

    2

    useful list thanks..

    joyoge designers’ bookmarks last blog post : Ultimate List Of 17 Quality Free Fonts For Your Inner Designer | The Theme Blog

    0
  • graphic design blog

    Saturday, January 10th, 2009 20:13

    1

    i am using 960 GS for a long time. its great! everyone have to test it :)

    0

Comments are closed.

54.204.58.87 - unknown - unknown - US