jQuery Topics
jQuery Awesome
jQuery Delicious
jQuery Buzz

10 Lightweight and Minimal CSS Frameworks

Wednesday, August 3, 2011
Tagged: ,
By jQuery Aggregator on Wednesday, August 3, 2011 — Comments

The CSS framework should be based on your current web design projects complexity and functionality requirements, and not be based only on a personal preference, as most web designers tend to do. In this post, we collected 10 lightweight and minimal CSS frameworks. Enjoy!

1. 1 line CSS Grid Framework


This is the challenge of writing entire CSS layout system with one line CSS class.
1-line-CSS-Grid-Framework.jpg
Source

2. Tiny Fluid Grid


Tiny Fluid Grid ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.
Tiny-Fluid-Grid.jpg
Source

3. The 1KB CSS Grid


A simple, lightweight approach that doesn’t require a PhD.
The-1KB-CSS-Grid.jpg
Source

4. SenCSs


Stands for Sensible Standards CSS baseline, (pronounced “sense”). It supplies sensible styling for all repetitive parts of your CSS, and doesn’t force a lay-out system on you.
SenCSs.jpg
Source

5. FEM CSS Framework


A fixed layout, based on the 960.gs, but with a twist in its philosophy to make it more flexible and faster to play with boxes. It has only a 12 column grid, with the columns having 10px margin on each side, making a 20px gutter – giving some breathe between boxes.
FEM-CSS-Framework.jpg
Source

6. Elastic CSS Framework


A simple CSS frameworks, based on the printed layout techniques of 4 columns but with the capability to offer unlimited column combinations and capacity to make elastic, fixed or liquid layouts easily.
Elastic-CSS-Framework.jpg
Source

7. Baseline


Built with typographic standards in mind, Baseline makes it very easy to develop a website with a pleasing grid and good typography.
Baseline.jpg
Source

8. Atatonic CSS Framework


Works just like any other grid system, but with only about 10 lines of CSS and has its main focus on typography. The idea behind this project is to provide a solid, yet minimal, base to start every development project.
Atatonic-CSS-Framework.jpg
Source

9. The Square Grid


A simple CSS framework based on 35 equal-width columns. You can use the grid in a variety of columns: 18, 12, 9, 6, 4, 3, 2, with the total width of the grid is 994px – which the majority of modern monitors will support.
The-Square-Grid.jpg
Source

10. Less Framework 3


Has been built so that you design your default layout as normal, and then all additional layouts using inline media queries.
Less-Framework-3.jpg
Source

Read the full/original article at jQuery4u

    Related Posts

    Comments are closed.

    « Previous post:
    Next post:  »
    jQuery Resources

    Learn more about jQuery

    jQuery News & Links

    I only just found out that the jQuery validation plugins has a validation rule called “remote” which can be used ...

    jQuery function to check if horizontal scroll is present – hasHScrollBar() – (or vertical check below also, util function to ...

    jQuery function to Set any DOM Element to Top View (bring to front) using CSS Z-Index property.

    Is it possible to declare arrays in JavaScript object literal notation? Example 1 – this works with arrays Declaration: Storage ...

    To get the a variables type using jQuery there is a jQuery function called .type() which returns “array”, “string”, “number”, ...

    In this post you can find tutorials which explain step by step different API use cases with jQuery like Google ...

    For valuable work on creation of sites you need a good comfortable editor necessarily. There are many requiring paid products ...

    Today we are sharing with you a collection of awesome jQuery Camera Photo plugins. They offer a range of image ...

    Back in the day, if you saw something that was animated on a website it was automatically assumed to be ...

    In this post, we have compiled a list of 10 jQuery HTML5 Audio players available today, most allow native audio ...

    jQuery Mobile is a powerful framework for making mobile web applications. But can we use it to convert existing desktop ...

    I have jotted a quick post on a Basic JavaScript Regular Expression Example to give beginners out there a taste ...

    In April 2012′s edition of Interestingly Random JavaScript, jQuery and Web Development we bring you some very cool stuff such ...

    In this post we are sharing you a roundup of 10 really jQuery plugins as of today. Pretty cool plugins ...

    As always expected from the jQuery community, the compilation we have for you today are some good and impressive recently ...

    A collection of jQuery PNG/JPEG/GIF plugins that enables image animation, cartoon-like background, etc… let them help you design displays for ...

    A collection of JavaScript/jQuery Zip/File/Compressor plugins that allows you to minify your JS code and compress your JS files ready ...

    Quick jQuery code snippet on how to keep an element in view. For demo scroll down on any page on ...

    Here is what I think is the best and most reliable way to load jQuery library and jQuery UI Libraries. ...

    jQuery code snippet which outputs all attributes of element using the default .attr() function on any dom element(s). usage: output:

    More Links & News

    Community Resources

    Use jQuery and the Google Maps API to create your own map application.

    Super cool and easy way to get stylish tooltips with jQuery.

    The right way to include the jQuery library in WordPress.

    Share a resource