CSS framework with no Javascript

Question

I need to built a website but I have specific instructions to not use javascript. In addition to that I also have to make one that work for iPhone/mobile devices (also no javascript). It's fine for me to switch style sheets base on devices with some PHP magic, so it doesn't have to be the same CSS file.

What I want to know is, what are some recommended CSS frameworks for either or both scenarios?

Answer 1

You would use media queries to achieve this.

https://developer.mozilla.org/en-US/docs/CSS/Media_queries

The basic idea is to design from mobile up, or "responsive" design. You should google search that for more insight.

You then use such operators as

@media only screen and (max-width: 480px){
    #content{
        display:block;
    }
}

for example, to define how a particular element changes for each view. There are tons of resources for this that can be found with basic searches, so the need to outline in detail here is none.

You can also add in specific style sheets like so:

<link rel="stylesheet" media="all and (max-width: 480px)" href="http://foo.bar.com/stylesheet.css" />

if you want to separate the style sheets for each view.

good luck.

If you have specific questions, feel free to ask and I can update.

Answer 2

As Kai Qing pointed out, media queries are really all you need to fill the criteria you mentioned.

If you want to use a CSS framework to make things easier for you, you could use Bootstrap, Foundation or any other framework out there, without the JavaScript part.

Here's a demo of how you could implement a responsive design with Cascade Framework. The demo does not use any JavaScript code and falls back to the desktop version for IE6 to IE8 (as these browsers do not support media queries).