How do you layout ?

[arjen]

And then there is Susy. Imho the ProcessWire approach to creating layouts. It does not force anything upon you except good coding

[MatthewSchenker]

Greetings,

Just want to notice how a question about layout became a discussion about frameworks. I rest my case

Yes, sorry -- I hope pwired is not to upset about this!  But I do think the issues are closely tied together.  Or maybe we should start a new "How Do You Use CSS FrameWorks?" discussion.

Regarding PHP frameworks: for myself, I can't help but think that somewhere in the near future there is going to be a joining up of all the framework developments, and we might go full circle in a way on some of these issues.

If you look at the new directions of the latest PHP frameworks, it's all about creating "looser" systems.  For example, Laravel makes heavy use of Symfony components.  And Composer is allowing various frameworks to pick and choose libraries as needed.  Then there are all those wonderful standalone PHP libraries for a whole range of actions.  I wonder whether one day soon we may move away from specific frameworks and just have "suggested packages" of PHP libraries that comprise your own framework?  You would still be using best practices and not re-inventing the wheel, but you would not be using a specific framework either.

Sorry, now we are even further astray...

Thanks,

Matthew

[yellowled]

It's funny how CSS layouts haven't really changed over the past couple of years since everybody stopped using table layouts.

If you google “css layout types”, it's pretty likely you'll find articles on fixed vs fluid, on responsive, maybe even some on hybrid and elastic. Most of these (responsive being the exception) aren't even about types of layout, but about the dimensions used. (Layout beginner's, don't bother with anything but fluid and responsive.)

Also, (probably) the most popular layout technique these days – floats – technically wasn't even meant to be used for layouts. Just like using tables for layouts (Beginners: don't. Just don't.), using floats to align boxes next to each other is actually a hack. But since the new CSS3 modules for layout are far from being usable even in modern browsers (Flexbox and Grids), we're left with what we've been using for years now for the time being – floats and absolute or relative positioning.

[kongondo]

Thanks yellowled. Thing is that I am getting better and better in processwire's api and controllers but am still stuck in the positioning relative and absolute design. I have read about flexible's grid system and responsive design. Is it difficult ? Would you know a good place to start ?

Just want to notice how a question about layout became a discussion about frameworks. I rest my case

Greetings,

Yes, sorry -- I hope pwired is not to upset about this!  But I do think the issues are closely tied together.  Or maybe we should start a new "How Do You Use CSS FrameWorks?" discussion.

Well, in his 2nd post, PWired specifically asked about "flexible grid systems and responsive design" and by his 3rd he was happy to go and try out Foundation   . CSS Frameworks do many things one of which is layout (grid).

[diogo]

This looks nice! http://learnlayout.com/

And it does end with listing some frameworks, although they state:

Because CSS layout is so tricky, there are CSS frameworks out there to help make it easier. Here are a few if you want to check them out. Using a framework is only good idea if the framework really does what you need your site to do. They're no replacement for knowing how CSS works.

Edited May 1, 2013 by diogo
corrected the url

[Soma]

I always start blank and do my custom css with some exceptions. For me layouting is easy once you know the ins and outs and css frameworks mostly just get in the way for my needs. And for special things and micro layouts they never provide what I need anyway. That of course is from a guy who does website layouts since over 15 years.

[kongondo]

This looks nice! http://learnlayout.com/frameworks.html

And it does end with listing some frameworks, although they state:

Nice find to teach one the basics!

[janlonden]

CSS frameworks are way too bloated in my opinion. I guess they might be useful if you have a huge site with lots of content.

I like to keep things as simple as possible.

Here's my "framework":

Grids sizes:

/*

	1	8.333333333333333%
	2	16.66666666666667%
	3	25%
	4	33.33333333333334%
	5	41.66666666666667%
	6	50%
	7	58.33333333333334%
	8	66.66666666666667%
	9	75%
	10	83.33333333333333%
	11	91.66666666666667%

*/

Box-sizing, for layout elements especially, allows you to add margin/padding/border without having to worry about changing width to fit margin/padding/border – best thing since ... ProcessWire.

* {
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

Layout elements, for example:

#content {
	float: left;
	width: 66.66666666666667%;
}
#sidebar {
	float: left;
	width: 33.33333333333334%;
}

I also use normalize and boilerplates cross browser normalizing stylesheet.