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.
Related
I don't feel that neat's grid is truly fluid. A fluid grid would scale well all the way from mobile to a large tv screen such as 1920x1080. However the way that neat and bitters end up working creates a $max-width variable which is default set at 1088. Even if you change this however there is a size that the website will stop being fluid, the max-size. I feel a fluid layout would constantly grow and shrink no matter the size of the screen.
Currently my way around this is by using fill-parent
.outer-container {
#include fill-parent;
}
This works but it feels hacky, is there no way using neat to properly create a fully fluid grid? Setting max-width has it's limit.
You don't need to use outer-container on an element that's supposed to fill the entire viewport. The only thing that mixin does is centering an element, clearing its floats and giving it a max-width.
In CSS, element are width: 100% by default, so there is no need to specify anything if that's the expected result.
The 'fluid' part of Neat refers to the fact that it does't use fixed widths, but percentages.
I have a basic Bootstrap question regarding the grid system. When you use the standard grid and apply the container class your container width ends up being 940px by default. If I want my container to be larger do I then use the fluid grid system so my span classes expand to fill the entire container?
When you use a standard grid, the container, row and spans sizes are fixed (in pixels) and with a fluid grid that sizes are dynamic (in percentages).
As you said, container width is 940px by default in standard grid and 100% in fluid grid. It's not necessary to use fluid grid just to make your container larger, that depends of on your needs (if you need your design to be responsive or not). An easy solutions is just to override the width value of container class (.container) after the inclusion of bootstrap.css file.
.container {
width: 1024px;
}
Hope this helps!
EDIT: Also need to override span widths!
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'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.
How to convert any fixed width layout to flexi-width layout? any quick tips?
In a website should we make every thing flexi-width, i mean left or right sidebar and main content column ?
Should we make everything in 100% width or we should define a max-width for better readability?
Read this and you will know everything and too much. http://www.alistapart.com/articles/responsive-web-design/
To answer you question, i would assume you have lots of widths set to pixels. Figure out what percentages they are relative to the screen resolution, than change the widths to percentages and tweek accordingly.
I have noticed most sites now get screen resolution, then use fixed width for main containers.