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
Related
I have a project that involves having a sidebar that floats over an image. The sidebar is set to position: absolute to keep it over the image and to help it scale along with it when the screen size changes.
Here is a codepen that basically recreates what I'm working on: https://codepen.io/gojiHime/pen/JmYqaz
The issue I'm having is with controlling the size of the contents within the wrapper container. I want the preview div to scale along with the wrapper container. Currently, it does not work as expected in that the preview div does not start scaling as the width and height change for wrapper and for thumbs-inner. The thumbs-inner div scales correctly for the most part, but the bottom of div is cut off so you can't see the bottom of the scroll bar in smaller screens.
I know I set overflow: hidden on wrapper but without it the content in preview would extend outside of it as the height of wrapper changed.
So, I'm looking for ideas on how to fix the aforementioned issues. wrapper must stay absolutely positioned and the thumbs-inner div needs to have a vertical scrolling feature, so I can't do anything with those. I don't think setting a height makes sense for wrapper since it needs to scale responsively in height and width.
EDIT: Not sure how much this will help but this is a screenshot of what the layout of everything should look like: enter image description here
The Kraftmaid logo, full-size thumbnail and the text below it (which are in the .preview div in the codepen) have to be visible at all times when changing the screensize.
I'm not sure if this is exactly what you're looking for, but generally for responsive layouts you would want to avoid fixed dimensions, such as specific widths set in x number of pixels.
This shows your code with responsive layouts for .wrapper and .thumbs-inner (note that I haven't addressed any content issues within those two divs since I have no idea what your intended layout is):
https://codepen.io/anon/pen/ZqrZaj
Note that:
I've switched the two layout divs to use box-sizing: border-box; which will allow you to use pixels for margin and padding but still use percentages for width.
I've removed width from .wrapper and switched to percentage based absolute left and right declarations - if you modify these values, the layout should still work.
I've added borders to make the layout more obvious.
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 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.
I have been playing with twitter-bootstrap to create my photography page. I am using the default thumbnail class within li tags to create the border and align them. I have a whole bunch of thumbnails with images which are both horizontal and vertical.
The default settings really does not create a pretty layout of the thumbnails. By adding fixed height in the thumbnail's CSS, at least a neat grid gets formed now. However, within the thumbnail block, the images always align to the top. This leads to odd shaped grids when there is a vertical image in the stack.
I tried adding "vertical-align: middle;" within the thumbnail class, but does not seem to be working. I am pretty new to CSS, so kindly pardon me if I am missing something really obvious.
Unfortunately the Bootstrap thumbnails don't really normalize for a fixed height. If you want to make sure you have a clean grid, you need to crop your images to the same size. You could, alternately, use some CSS of your own to set the height of the li manually and set the img max-height to 100%, then use display: table-cell on the li so your vertical-align: middle will actually be effective at vertically centering the img.
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)