Looked through Foundation zurb documentation. Noted that rows, columns and container are not defined in width as in documentation, but if want the wrapper container to be set at 1000px to wrap header, body, sidebar, footer inside, does the wrapper need to be defined in width to contain everything inside?
Also the header, body, sidebar, footer are placed in each row with medium-# or large-# so that they can be resized according to browser size.
Sorry and I am trying Foundation for the first time.
Thanks
If you properly download all the foundation material (use bower from the command line or you can download a zip from the github page), you'll find:
$row-width: emCalc(1000);
in the sass files under _settings.scss
You can adjust this, and many other values that affect widths, within this file.
The specified .small or .medium or .large classes for rows are used for foundation's grid layouts and are designed especially for screen widths matching those relevant sizes. If you're new, I would work with "small columns" first as foundation is designed as a mobile first platform, and it has less problems scaling up than down. Good luck!
Related
I have a bootstrap container with an img inside. I'd expect the left side of the image to align
with the LHS of the container. Looking through the CSS with the browser debugger doesn't show any margin, border, etc that seems to be responsible. Playing with position and align doesn't fix this issue.
I can force it by styling the img with "margin-left:-15px".
I'd really like to know why this isn't working as I'd expect and where does the 15 pixel magic number come from.
Thanks,
Joe
#joe McGuckin. The magic number comes from the bootstrap template css file. Here is the snapshot from Bootstrap.min file.
Bootstrap is a frame work which provides some built in elements to make a page responsive. Please refer to the bootstrap documentation for guidance.
Was answering another question about centering a div that had the bootstrap's span12 class applied to it, and part of the solution was to reset the float as the span12, as well as the other span* classes, are floated.
Since span12 width is 100% when combined with row-fluid and 1170px when not (and other sizes that I suspect are meant to fill most of the area on different screen sizes)
This to me suggests that it is mostly a standalone grid item: not meant to have other grid elements floating along side it.
I could see if they wanted to allow for having other grid elements along side it for really huge sites (screen widths of like 2560px etc), except this would not work at all when using row-fluid as the first one in the row would take up all the space as it uses 100% width.
But I personally have not seen many, if any, sites that would use such a huge width that would allow for using a span12 grid element along side other grid elements.
So does bootstrap implement other styling methods that make it necessary to float the span12 class? Or are they just anticipating future use for huge sites?
As I use bootstrap myself, if it is necessary for other styling techniques I do not want to end up one day having removed the float when it is needed and also do not want to mislead others when answering questions if the resetting the float would end up messing up their layout when using bootstrap.
Edit
As DontFeedTheCode points out this has been addressed in Bootstrap 3, all the other grid classes get floated while the 12th one does not.
in the 2.3.2 version looks like they were using [class*="span"] as the selector for setting styles so span12 gets selected by accident
As bootstrap is written in LESS, and in 2.3.2 all span classes were generated using .gridColumn() mixin - all span classes had the float:left;. This is not for any large layout like 2500 or such.
I have a 960gs layout but I don't know which is the best approach to center the content of this page (http://andreapuiatti.de/screenshots/question.png) using the 960grid system.
The designer assures that this design is based on 960gs but hell... is everything out of the columns!
The only solution I come up with is that of using a grid_12 and then add custom elements which I will size myself but then why using a grid system?
Decide how many columns the image and text will span, say 12 and create your 12 column row as the parent container (all within the 960 grid framework).
Within that row, I would create a wrapper class (give it a class) and then for the image (or its container) apply a standard CSS rule like margin: 0 auto;. Apply display: block to the image if it is not wrapped in a block level element.
As for the text, the p elements will fill the wrapper element and you can adjust margins as needed.
In general, these CSS grid framework create block level boxes that contain your content, text and images and so on. It is up to the designer to decide how to lay out the elements within each block. 960.gs and similar CSS frameworks define your layout only, not the details of styling the content within each box/block/panel within the grid layout.
About the Screenshot and Designer
Your designer may not understand how grids work and you need to have a discussion with him/her to specify where the edges of the image should be. The problem is not with the CSS framework, but the design specifications need to be more precise. Nothing wrong with that!
From my understanding, gutters are the white space between columns. Questions:
In Bootstrap, I assume gutters are the spaces between .container and .container-fluid. Is this correct?
Gutter width seems to be between 20px - 30px based on display size. What to do if the design doesn't require spacing between containers?
1. Gutters
Gutters are the space between .span, whether it's in a .row or a .row-fluid. But the gutter width is defined by a different setting for the normal grid and the fluid one (one is fixed in px, the other is relative in %).
Additional values are set depending on the screen width, if you use the responsive layout.
Check this doc (same with v3)
Important : the gutter width is used in several others rules, for example the margin-left of the .row, or the width of the .container.
2. No gutters
Gutter widths are defined as LESS variables. If you want to use a grid that doesn't have gutters, you should download a customized version of bootstrap - see Grid System (same with v3).
I myself prefer to download the LESS files, import an override file after variables.less, set my own variables and compile it myself, so that I can upgrade Bootstrap without worrying about my previous modifications.
https://gist.github.com/2354116
If you view the above page in Chrome/Firefox then everything seems to be fine. The divs at the bottom (the two headings and the social icons) are wrapped in a container div and center without issue.
If it's viewed in Safari though then these three divs are not centered at all :/
I'm not sure why this is.... can anyone help?
Note: had to assume a lot with your design so modify anything that does not fit your original design.
First off, you are not properly containing your page elements (content, carousel, footer), you currently have multiple width containers trying to reside side-by-side and that is breaking your design in multiple places.
Your content container is width:940px, your .wrapper div is width:750px, your .paramWrapper div is width:870px, your .carousel div is width:735px. You have to pick one width and stick to it and just use margin to push content accordingly across your page. I used 860px, which is the width of the span11 class.
Next, you're modifying the bootstrap.css stylesheet directly, that means that whenever the bootstrap gets updated all of your changes will be lost if you overwrite the bootstrap stylesheet, so create a another stylesheet and put all of your custom styles there and just load it "after" the bootstrap stylesheet in your header.
Now onto your original issue, the bottom .paraWrapper div is not properly stacking because you have a width of 870px set in your container and the elements within do not add up to that width:
span3 + span3 + span2 + margin = 640px
So it was not an issue or a bug, its just your layout.
Here is a fixed version that i very quickly put up so you're going to have to modify the elements to fit your design once again: http://jsfiddle.net/rzSFa/3/, here is a demo of what it looks like.
By the way, you're using the responsive bootstrap stylesheet for naught, it is currently not doing much in your case so why even use it? You can easily modify a few media queries to support my fixed version though, but yours will not work at all because you're declaring all of your own classes with custom widths so there is no point in including it.