I'm standing at a precipice about to make an important decision that will affect our long term development regarding Bootstrap and I want to be sure I have a good understanding of the reasoning behind their use of Column Padding.
We run a multi-tenant cms system that offers bootstrap as one of the available frameworks from which to build a site, and then our system adds layers of functionality on top of it, so any decision we make affects all tenants.
One of the basic features is when working with a Bootstrap Columns (i.e. col-lg-6), or what we would call a Section, a user can choose to have the content inside Bleed to the edge, or be surrounded by padding.
In bootstrap, columns use padding-left:15px; padding-right:15px; for the horizontal, but padding-top:0; padding-bottom:0; for the vertical.
In our system, we would use padding:15px; all the way around, because users can also set a column/section background colour and/or image, and the logic is that you would want to see colour/image around all sides when not using bleed and vice versa.
I understand that the horizontal margins in bootstrap overlap as a function of the grid system, but padding is cumulative between columns. So my question is: is there a reason why vertical padding is not also set explicitly? What are the potential repercussions of forcing this on our clients?
N.B. Anything can be overridden via a Custom CSS editor, similar to the one in Wordpress, although this capability would obviously be essentially reserved for those "in the know" and not something I would expect a regular user to utilize.
EDIT: The following is a test helper we've created to remove margins from the top of header tags which are the first child of one of our sections (specifics removed for clarity).
section h1:first-child, section h2:first-child, section h3:first-child,
section h4:first-child, section h5:first-child, section h6:first-child
{ margin-top: 0 !important; }
This can also be done for last items as well to remove bottom margins/padding.
If we expand this to cover elements noted below (i.e. forms, p, h1-6, etc.) so the normal spacing persists, would this complicate things further or be adequate to preserve Bootstraps intent while allowing our own features to work?
It's because inside those columns with the default gutter of 30px between columns there's generally forms, ul, ol, p, h1-h6, and other content that have bottom margins, so when it stacks there's vertical spacing, if you were to add bottom or top padding on the column would be quite odd looking when stacked, two paragraphs inside two 50% (col-*-6) columns would have additional padding between the first and second. And nesting columns would be odd and have even more spacing issues. The only time when the vertical stacking wouldn't have space is if you were to stick images in them, but then you can add a custom class to the image to get some bottom margin on the un-floated version.
Related
I'm having trouble working with Twitter bootstrap 3 to render a web page composed of different slices. The end-product would be a page composed of rows containing img-responsive slices that stay in their respective rows (i.e. They don't wrap)
But Bootstrap CSS does something funny with the images. They're nested in the predictable structure, container>row>col-xs-12>Images, but even when I set the image margin: 0;, there's still a small gap between adjacent images. Moreover, I can't get the rows with multiple slices to stay on the same row no matter what (because the page makes no sense if slices wrapped to a new line) and still be "responsive."
Alternatively, if someone could instruct me how to set up a responsive image map (or shoot me a solid link), I could try that route.
You need to put each image in its own col-xs-*, override col-xs padding, and add max-width:100% to the img. Also, don't get confused by .row's usage. It's not meant to restrict items to a visual row, and doesn't. Frankly, the name is misleading. Just use the single .row within the .container, and make sure your col-xs's add up to 12 and you'll avoid unwanted wrapping.
Here's an example: http://www.bootply.com/aYOdYaV4Gq
.col-xs-3{
padding-right:0px;
padding-left:0px;
}
.img{
max-width:100%;
}
In my bootply, I've actually added classes with these attributes rather than overwriting the bootstrap classes like above. Either works, but adding custom classes means it's easier to turn it on and off later.
First up, for extreme clarity, here a JS fiddle demonstrating what I'm trying to achieve:
http://jsfiddle.net/bb_matt/VsH7X/
Here's the explanation - my rationale:
I'm creating a responsive site using the 1140 grid framework.
It's a fairly complex layout.
I've created a re-usable simple gallery class which can drop into any defined column size & using media queries, I apply relevant percentage widths to the li elements.
Each of the li elements has a right margin of 5%.
I'm using nth-child(xn+x) in the media queries to remove the right margin at the end of each row.
Everything works well - images resize as the layout resizes, the number of gallery items in a row work as I've defined based on percentages.
The only remaining issue to fix is to clear between rows.
I can't add additional html markup and I want to steer clear of overly complex jquery fixes.
I know of two ways to fix this, but I'm not keen on either of them.
First fix, simply using display: inline-block on the li elements, with a vertical align of top, would flow everything correctly... however, all the percentages get shot and the gallery items no longer neatly fit in the allocated space.
Second fix, give the list items a height. This is the route I will go down if necessary - it will require a different height depending on the resolution - no big deal, but not as neat.
I updated your fiddle here: http://jsfiddle.net/VsH7X/5/
I added a clear: left to the first item in each new row.
ul.gallery li:nth-child(5n+6) {
clear: left;
}
Keep in mind that the :nth-child pseudo class does not work in IE6-8, or FF3 and under.
I have some very simple sub-navigation that I'm trying to build across the top of the content area within my web site, but CSS doesn't seem to have any simple solutions for such a common problem: I want either 3 or 4 equally spaced DIVs across the top of the page.
1) e.g. 3 Variable-Width, Equally-Spaced DIVs
[[LEFT] [CENTER] [RIGHT]]
2) e.g. 4 Variable-Width, Equally-Spaced DIVs
[[LEFT] [LEFT CENTER] [RIGHT CENTER] [RIGHT]]
My solution for the first problem with only 3 DIVs was to float the left and right DIVs, and then assign an arbitrary size to the middle DIV and give it "margin: 0 auto". That's not really a solution, but assuming there are no changes to the navigation, it gives a rough approximation of what I want the results to be.
The solution I have for the second problem with 4 DIVs is to simply center a DIV in the same way as before, but then float two DIVs within that, e.g.
[[LEFT] [[LEFT CENTER] [RIGHT CENTER]] [RIGHT]]
But again, this requires applying an arbitrary size to the middle DIV for alignment, and if any language or image changes are made to the site, alignment values will have to be recalculated. As well, it's simply an over-complicated solution that requires merging structure with presentation.
Any help is greatly appreciated.
EDIT 07/20/2012 5:00PM
Alright, I put the "table-cell" solution into place using percents, but I encountered another issue within my slightly more complex implementation: the issue at hand is that each DIV I was referring to is actually a container for two more DIVs which are icon-label pairs, inlined either by float or by display:inline-block.
e.g. http://jsfiddle.net/c3yrm/1/
As you can see, the final element in the list is displayed improperly.
Any help is again greatly appreciated!
EDIT 07/20/2012 7:16PM
Final solution with arttronics' help: http://jsfiddle.net/CuQ7r/4/
Reference: jsFiddle Pure CSS Demo
The solution was to float the individual breadcrumbs while using a simple formula to determine the percentage of breadcrumb width based on the number total breadcrumbs.
You could use percentages, then it just comes down to simple math:
[[LEFT=22%]2% margin><2% margin[LEFT CENTER=22%]2% margin><2% margin[RIGHT CENTER=22%]2% margin><2% marginRIGHT=22%]]=100%/??px
You could then specify a width for its container and use
display:inline;
to keep them inline.
Note: If you use borders to see what the divs are doing that will add space unnaccounted for so you would need to reduce your elements width by 1% or so OR just change their background colors.
ol {
width: 400px;
/*width: 800px;*/
display: table;
table-layout: fixed; /* the magic dust that ensure equal width */
background: #ccc
}
ol > li {
display: table-cell;
border: 1px dashed red;
text-align: center
}
like here: http://jsfiddle.net/QzYAr/
One way I've found to do it is using flex boxes (or inline-flex).
Here is a great explanation and example of how it can be done.
I think in the future, flex boxes will be the superior way of handling this sort of thing, but until other browsers catch up with Mozilla's way of thinking for how to use the flex-basis attribute (with min-content, max-content, fit-content, etc. as values), these flex boxes will continue to be problematic for responsive designs. For example, occasionally the inner content (a_really_really_long_word) can't fit in the allotted space when the window is squished down, and so sometimes some things might not be visible off to the right of the screen if you're not careful.
I think perhaps if you make use of the flex-wrap property, you might be able to ensure everything fits. Here is another example of how this might be done (in Mozilla browsers anyway).
I tend to use flex boxes for letterheads or tables where the width is fairly fixed (not too small) because they usually space themselves nicely; I tend to use nested float and inline-block objects for websites where the content must squish down very small (as suggested in some of the other answers here).
I'm building a site which makes use of the popular 960.gs 16 column grid system. Here's a screenshot of the relevant part of the design, with the grid columns overlaid on top:
The issue is the white "popular right now" box. Since this has a white background, I want some padding inside the box. Simple enough: I added a <div> inside the parent one and styled it appropriately with padding: 10px and a white background.
The problem comes when I try to re-use the grid inside an 'inner' <div> like this. for example, inside that white box, I want the link list to be inside a 5 column container, and the image in a 3 column container (sorry, the screenshot doesn't show it at this size).
I tried redefining my grid column sizes inside the .inner class, which partly works - I removed 10 pixels from each column size, since the total width needs to be 20px less than before to account for the margins. This works in the case where there are exactly two child <div>s inside the .inner container, but obviously if there are more or less than 2 then things start to look wrong.
Does anybody have a good strategy for dealing with this kind of thing? I'd be willing to just put the padding on all columns, regardless of background colour, but couldn't get this working like I wanted when hacking the grid.
thanks
Matt
the 960gs has an .alpha and .omega class for allowing nesting. Usually this removes the leading 10px and trailing 10px margin from the elements you apply it to. You might be able to reverse these and misuse them to give you the padding you need - the overall column widths would add up, but the padding would be on the "wrong" side
<div class="container_12">
<div class="grid_12">
<div class="grid_5 omega">...</div>
<div class="grid_3 alpha">...</div>
</div>
</div>
I haven't tested this though so not sure that it would work
I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.