I have made a grid with the excellent Susy.
I want to add a box the content in my grid. When I do this, everything gets cramped, as the box aligns to the same edge of the grid as the content.
I can add padding to the box and then apply box-sizing: border-box. This removes the 'cramping' but it also causes the content to no longer align to the gird.
What I would really like to do is keep the content aligned to the grid and have the box extend into the gutter. Is there a way to do this with Susy?
I have attached a graphic to demonstrate what I mean:
The best solution currently is to add negative margins equal to your padding.
See: Susy: How to extend content box to cover grid-padding as well?
We've added a more complex version of that same mixin to Susy (here), but it hasn't been released in the gem yet.
Related
I'm trying to achieve a 50/50 panel layout using Bourbon Neat 2.x, where the left panel is going to have a background colour, but grid margins are causing me some issues.
I initially just had the standard grid-container as a parent, with two divs using the #include grid-column(6) mixin. Trouble is, that left a margin at the left and right of the grid so the 50% background colour panel didn't quite work.
I then tried adding the grid-collapse mixin to try and get rid of the margins (codepen example), but that seems to have the effect of making the page > 100% width, leading to a horizontal scroll for the user.
Is there a simple way to achieve this layout, or should I use a custom grid definition for the panels with no margins at all?
Neat can cover this use case but it requires slightly more html. the trick is that the object with the class grid-collapse (.container in your example) needs a wrapper around it with width: 100%; overflow: hidden;.
Here is a question that also answers this → Remove outside gutters in Neat 2
I have a 3 column grid in Twitter Bootstrap. Each cell has text. For one column, I'd like to right align text and adjust right side padding for those cells. Is there something built into Bootstrap for this?
Or do I need to write a class and attach it to each cell that needs this alignment?
The Bootstrap class is text-right.
For the padding, you'll have to manually add any overrides to your CSS somehow. Either a consistent container for your third column. Or add a wrapper with a class to increase the padding on the right. (Though extraneous divs are never good!).
Just in case: I don't recommend adding this additional padding to override text-right itself since that may have weird effects elsewhere in the site when you use this same class.
Source: http://www.getbootstrap.com/css/
I want to create something like this in the Susy grid system:
The different color demonstrate different sections of the website and also their background colors. The vertical lines are the grid columns.
If I use a simple grid container I can set the background color only within the div which is inside the grid, but I would like to have the background color stretched to the left and right edge of the website. The content stays inside the grid.
I found a solution using multiple grid containers (one for each section), but I heard that this approach is not recommended.
And I also don't want to use a fluid grid container.
As Eric Meyer, a developer of Susy, pointed out in the comments, the Susy grid is just a concept and there is nothing wrong with having multiple grids on the website, one in each section.
I was dealing with a similar issue.
I had used the following approach: Have a div (let's call it 'content') inside each of your sections.
Apply the container class to the 'content' div. .content{#include container;}
This way, when you set the background color of a section, it spans the entire width of the page while the content in the sections adheres to the rules of the grid.
Hope it makes sense.
I am confused. I have just discovered this CSS property: display:box;
I do not understand what it brings to CSS that was not already possible with display: block, inline, inline-block.
Anyone can enlight me on this ?
Thanks in advance.
It's part of the new flexbox module. From the working draft:
In the flexbox layout model, the children of a flexbox can be laid out in any direction, and can "flex" their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.
It's still a draft specification, but worth playing with until it's fully implemented by browsers. It will probably allow us to get rid of floats in many cases!
Please note that display:box is already deprecated in favor of display:flexbox.
Last but not least: do not rely on w3schools!
You may find more info here.
Brief summary:
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space.
This box model is similar to the one used by XUL (the user interface language used by Firefox). Some others languages use similar box models such as XAML or GladeXML.
Usually the flexible box model is exactly what you need if you want to create fluid layouts which adapt themselves to the size of the browser window or elastic layouts which adapt themselves to the font size.
...
By default, the traditional CSS box model distributes boxes vertically depending on the HTML flow. With the flexible box model, it’s possible to specify the order explicitly. You can even reverse it. To switch to the flexible box model, set the property display to the value box (or inline-box) on a box which has child boxes.
Take a look at the documentation from MDN:
The CSS box-orient property specifies whether an element lays out its contents horizontally or vertically.
For example, XUL box and hbox elements lay out their contents horizontally by default, but XUL vbox elements lay out their contents vertically by default.
HTML DOM elements lay out their contents along the inline-axis by default. This CSS property will only apply to HTML elements with a CSS display value of box or inline-box.
display:box allows:
Flexible distribution of boxes with box-orient, box-direction, box-ordinal-group... You can modify the normal distribution of boxes inside another box not only from vertical to horizontal (can be achieved by inline, inline-block or block with some float trick) but also in a reverse order (horizontal reverse order can be achieved by some float trick) and even in an explicit order.
Flexible sizing: the size of the boxes can be computed as the explicit size (using height, width, max-height, max-width...) or the size of the parent box and available space (with box-flex).
Handle the available space with box-align, box-pack, box-lines...
the new box model can do something the old model can't without additional javascript calculation, not much
I'm trying to implement a design with a shrink-wrapped left bar and a fluid main panel, which will allow as many pictures to be shown as the window width will accommodate, without a horizontal scroll bar.
I'm having massive trouble doing this. When I float:left the control bar, the content of the main panel begins to flow around it. Floating the main panel as well solves this, but causes the content to be shrink-wrapped, meaning that the images tend to be lined up in a single column.
Is there any elegant solution to do this?
I've made a mockup of the problem here: http://jsfiddle.net/PYKwg/2/embedded/result/
Try this: http://jsfiddle.net/CXvRn/10/ It's all in the code:
I wrapped #main in #mainWrapper
I added padding-left 220px to #mainWrapper.
I added float:left to "#top .thing" and "#bottom .thing"
http://jsfiddle.net/CXvRn/29/
here is the most basic jquery version:
You have to set some constants such as the total horizontal padding and the horizontal margin for the #main. you could derive those using jQuery but if they are never going to change them you might as well set them your self and save some lines of code.
If you'd like to do it with jquery you can figure that out here: Padding or margin value in pixels as integer using jQuery
The solution is "overflow:auto" on the main-content section. This establishes a new frame of block flow, which content won't flow out of (under/behind the floated control section). Reference: http://www.w3.org/TR/CSS2/visuren.html#block-formatting
See it in action here:
http://jsfiddle.net/PYKwg/3/embedded/result/
(Thanks Alex)