Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there such a CSS framework? [closed]

I'm searching for a CSS framework that is responsive, large (more than 1000px), and where I can do the folowing :

Large design :

large design

Normal design :

normal design

Mobile design :

mobile design

Any suggestions ? I have tried 960.gs, Titan framework, 1140 css grid, and the Golden Grid System, but I'm not sure I can do everything I want in any of them.

like image 799
Manu Avatar asked May 10 '12 13:05

Manu


People also ask

Is there a framework for CSS?

A CSS framework is a prepped and ready-to-use CSS library (Cascading Style Sheets). The stylesheets collection makes the job of a UI developer easier. Rather than starting every project from scratch, a CSS framework gives them tools to quickly create a user interface that they repeat and tweak during a project.

Do you really need a CSS framework?

CSS frameworks make it simple to create websites compatible with multiple browsers and browser versions. This reduces the likelihood of bugs popping up during cross browser testing. Since these frameworks have ready-to-use stylesheets in place, using them allows faster and more convenient web development.

Is CSS open-source?

css is yet another open-source CSS framework for semantic HTML. It uses native HTML classes where possible, meaning it has only 10 of its own . classes. It has no dependencies or JavaScript files which makes it truly lightweight.


2 Answers

You want to serve different css by detecting the screen size.

This tool does it: Adapt.js (Take a look at Less too)

With Adapt.js you can do stuff like this:

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // Optional callback... myCallback(i, width)
  callback: myCallback,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px           = 2520.css'
  ]
};
like image 112
blang Avatar answered Sep 22 '22 00:09

blang


ooh what you need is Css3 media queries..

http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/

Check the link

like image 23
Parv Sharma Avatar answered Sep 22 '22 00:09

Parv Sharma