I am new to Bourbon / Neat framework, and the past 2 days i've been setting my environment up, but i am having issues configuring the Grid.
The issue is that no matter how much i try, there are some spacing issue when it comes to the grid, there is a small space in between columns in the grid, which is giving me a headache, and i have no idea what is causing it.
As you can see from the image, the right column, is slightly on the left, is this a common occurrence in neat?
Thank you in advance.
If you are using the visual grid, this can be off by a few pixels. Please see the documentation here:
http://thoughtbot.github.io/neat-docs/latest/#visual-grid
The overlaid grid may be few pixels off depending on the browser's
rendering engine and pixel rounding algorithm.
Hope this helps
Related
Good evening! Probably a stupid question, but still. Need a bootstrap 3 grid with a width of 1500px, Gutter width is 30px, what breakpoints have to be adapted adequately ?
It is completely relative to your design.
My suggestion would be first design the whole page normally. Then check at which points the design breaks. Select those points as breakpoints.
The main thing which you should take into consideration is images. Because, along with super wide resolutions, we need to start looking at the pixel density issues.
also always start with mobile first approach.
Hope this helps!
I want to start a blog design from scratch as a week-ends project, but I have problem to see how I can render it via CSS.
In a CSS grid system you can define the size of a column based on the number of elements e.g. I have 12 based grid and I can decide to have 2 columns: 2 of the size of 6 or one of 5 and one of 7.
[EDIT] I found a website example that does what I would like to achieve: http://www.by-form.net/
Thanks~
The thing about vertical sizing is that it should grow as your content grows, that's why grid systems only include rows with 12 columns, because you'll need your page to grow as the content in it does. As stated before (and I'm not sure if you meant pure CSS grid system when you asked or if you were referring to bootstraps grid system or something similar), you can use a lot of different frameworks to achieve this like Bootstrap or Materialize or even create one yourself (which is a great exercise if your objective is to understand how this works, but not so much if you want to be productive about your project).
Thank you for your answers guys,
I found 2 ways to answer that issue:
the masonry grid Javasript layout that handle very closely to the original idea of how I wanted to handle it.
or a nested grid (a grid within a grid), e.g. profoundgrid
I don't have much knowledge about this but using bootstrap css you can achive the grid system.
check this out
Your grid in the image is very complex.
I don't think you can achieve a layout like this without any rows or columns that is flexible enough.
What I mean by that is, that you surely want the boxes to grow when the content gets bigger. This could be a big problem cause there are so many dependencies to next and previous columns.
I wrote an answer to a similar question showing a variety of CSS Techniques to do layouts. Check it out, it might be helpful here.
Anyway, if you reduce some dependencies and know exactly what the order of the content should be and look like, it would be much easier.
I needed to develop my own grid layout. I put my code here: http://codepen.io/anon/pen/fznyw
Problem is - grid should be 12 columns. Widths are in percents. But I can't get my last element to stay in a row. What did I do wrong?
I tried using margin-left:-30px on .container, but it didn't helped. Only solution was, to make a class .first-in-row with margin-left:0, but, since those blocks will be reordered, I can't use this solution.
I changed percentages a bit. I am not sure if there is better way of sorting those grids but I managed to find percentages for some of them, you could use this and finish all 12.
preview - updated
I've searched all over for the answer to getting the proper column widths for 16 column bootstrap responsive layouts.
I've found posts that suggest this can be done. But it does not work for me.
I've tried the Bootstrap customize page. But it doesn't update the responsive part at all. I end up with span16 widths that are 120%+
I tried using the less files and updating the variables. But, again, I end up with wrong widths – for 1200px+ screens, I end up with a 1600px-wide layout.
Perhaps I could update all the values for each screen size individually. But since it's not just the span widths but also inputs and other widths for each screen size, it really starts to get unruly. Especially since I'm not 100% certain what the widths are supposed to be, especially when you get to smaller screen sizes.
There must be others who've run into this issue. So, maybe I'm just being obtuse.
But any guidance or wisdom on this issue is greatly appreciated.
Much thanks.
It has been taken care of in the soon to come twitter bootstrap 2.1.0.
I'm trying to create a three column layout in CSS only with fixed left and right columns and a fluid central column. I have searched online but nothing has worked when I implement it. I don't know whether this is particularly relevant but my central column is (or contains, I've tried both) an iframe. This seems to be contributing to the complication.
Have you tried using an 960 grid ?
http://960.gs/
Otherwise there are many examples for using fixed and fluid grid layouts in the web:
http://matthewjamestaylor.com/blog/perfect-3-column.htm
http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
This is the one you are looking for.
Btw: Please provide some of your code, or do a jsfiddle about it !