I'm using http://960.gs grid system/framework
I'm having some head-to-wall punching trying to make a flexible layout that allows me to cover the width and height of visitor's browser client area, specially in "height"... Look at the following image
So, the grid layout should cover everything and there shouldn't be any scrollbars. If user adjusts the size, grid should adapt, until a minimum width-height is reached
Thanks for any tip/hack you can give me
That particular grid is designed for fixed width 960px layouts and is not really suitable for fluid layouts. What you want is a percentage based grid. You might want to have a look at Fluid 960 Grid System.
Related
It seems that to make responsive site, layout should be "Fluid". To make fluid layout many people use the width 90% . But suppose I design a site at 960 grid. so if I give the Width:960px; it will be stay exactly at 960px. So, it is very easy to calculate the width of other contents according to grid.
Unfortunately the frustrating moment is when I give 90% width to make responsive layout I see that the layout in browser is wider more than 960px. So, how can I calculate the layout according to 960px grid at 90% fluid layout width. ? Or what is the procedure regarding to calculating of width during build responsive design ?
Add max-width: 960px to the wrapper and the layout will never be wider than that.
I've built a dynamically sized grid layout that can adapt to reasonably in any sized resolution (phone, tablet, desktop) and handle resizing, all while being near pixel-perfect (sorry, I'm OCD -- and I say "near" because my math is broken right now and you can't fit two evenly sized elements inside of an odd sized container without padding being 1px off on one side).
Anyway, below is a link to what I've hacked together with JavaScript. It's an example of what I'm trying to pull off. Resize the width of the bottom pane a bit to see what I'm going for.
http://jsfiddle.net/langdonx/uFW2C/2/
It has some ugly manual JavaScript that's since been ported to Angular, but still the ugly JavaScript that calculates all the styles remains.
So my question... can I pull this off with strictly CSS? Or a lot more CSS and a lot less JavaScript? And by this I mean dynamically sized cells based on the width of the screen?
Here are the business rules:
Max cell width: 320px
Minimum # cells per row: 2
this might be impossible with CSS, so I'd be fine with settling on Min Cell Width: 178 for Chrome on my Galaxy Nexus(whose portait mode is 360px wide)
Cell border: 5px with a 2px outline
Visible margin between cells: 3px (margin is actually 5px, but outline bleeds out)
In this example, I'm redrawing the cells on resize every time, but in my Angular version, I believe that just the styles get updated. That said, I could probably get away with redrawing a table on resize, but I'd only have to calculate the cell width based on the document width, and well... I wouldn't be thrilled to use a table. =[
-end mad rant
Media queries
CSS media queries might get you pretty close to a CSS-only solution.
The key concept here is using different layout grids based on the width of the browser, to vary the number of columns.
Media queries are the natural CSS way to change the layout based on the browser width. And they require no JavaScript. If you use a set of media queries -- each one targetting a different range of browser widths -- to control which layout grid is used, then all each grid has to do is be responsive -- percentage widths for each column, and let the content stretch to fill the column width.
Responsive Design
The question then becomes: Is it possible to automatically stretch each piece of content to fill the column using CSS alone? That depends on the type of content, how it's expected to behave when it stretches, and if there's any room for compromise with the graphic design.
Typically, the graphic design for a responsive website has to be tailored to suit the limitations of Responsive Design (with the graphic designers having a rough idea of what's feasible and what isn't). But... whatever can't be done automatically, can be done using JavaScript.
Relevant search terms for attempting to stretch the content: Responsive Design, Adaptive Content, Fluid Grid
Note: "Columns" in this case may simply mean the percentage width used for the floated containers for each piece of content. It doesn't have to mean "physical" columns, in the traditional sense.
Im trying to build a mobile first page, usually I work out my container widths based on the overall container max-width.
So if my container should be 200px wide and my overall container has max-width 1000px then my percentage calculation is 200/1000*100. But how do I make this calculation if my overall container has no max-width but instead is set to 100%?
I apologize in advance if this is a lame answer but I'd look into an existing the Grid framework, such as http://foundation.zurb.com/ (or other) and build on top of that, rather than writing it from scratch.
I can't establish the difference between Fluid and Fluid Grid design. Arguably any elements in a fluid layout will share a lowest common denominator, so surely any layout is a grid based on the LCD.
Grid based layout is based on the use of pre-defined 'columns' which are used to set the width of elements on the page.
As you are probably aware, a fluid layout is something that will proportionaly adjust to the browser width. This still hold true with fluid grid systems with the added advantage of also using columns.
Grid layouts come with added advantages over standard (or non-grid) layouts:
design consistency
rapid, easy layout development
encourages correlation and consistency between different page elements
helps produce a visualy balanced layout
usualy allow for flexibility in terms of setting number of columns, gutters, etc.
Fluid grid systems are just a grid system with a fluid style (the column widths are proportional rather than fixed).
If you do not already use grid based layouts then I can definatly recommend getting into them!
Some refs for you:
(fixed grid) http://960.gs/
(fluid grid) http://www.tinyfluidgrid.com/
(fixed, fluid, fixed grid, fluid grid) http://twitter.github.com/bootstrap/scaffolding.html#gridSystem
I'm starting off building a site which should be responsive to different screen sizes. I'm using the Fluid Baseline Grid template which uses percentages for columns and adjusts according to screen sizes using media queries. Now that I'm adding my own custom CSS, I am wondering whether I should be using pixels, percentages or ems for positioning my elements (within the fluid grid elements). For example, margins and padding between divs, widths of input fields etc. Font sizes and line heights are the only things set to use ems for measurement.
Can anyone provide any pointers on this? At the moment I'm leaning towards just using pixels within the percentage based layout that the grid template has preset.
Ideally, you should be using percentages whenever possible, at least on the horizontal plane, so the margins and padding can expand/contract proportionally with the rest of the content. A 10px margin might be great at small resolutions, but it could look much too tight at much larger ones.