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!
Related
What are the differences between CSS Grid Layout and existing layouting frameworks like Bootstrap or other layouts like CSS Flexbox or CSS Tables (not HTML tables, I know they are supposed to be used for table contents only)?
What's it's concept and what use cases does it cover?
CSS grid layout is not attempt to supersede HTML tables, flexbox and grids in Twitter Bootstrap. CSS grid is a new way of creating markup.
Purpose of creating grid layout is in declaring your layout in CSS only. If you have container with plain list of children you can add 2D layout only via CSS. Not need to wrap items in row containers and so on. But it's not a benefit of grid, sometimes you need your cells to be wrapped in rows in HTML.
Twitter bootstrap and tables have the same conception: you have some rows and their children declared in HTML. It's not a shortcoming, it's how it works. And before flexbox we used these ways more often than we should due to lack of other ways.
Long long time ago (before CSS) we used only tables in frontend. That doesn't mean that tables are bad. This was the only way. But the tables are good when you really need a table. You just shouldn't use them for everything.
Flexbox is all about 1D arrangement of element. Of course in some cases it will look like 2D. In some cases you will have to use some hacks because you really need a grid! But it's due to relatively low browser of grid, not due to correct application of flexbox. It's perfect for some layouts, for others which really need 2D (where you'd better use tables or grid) it may be hacky.
So just use a grid layout where your layout is elegantly expressed in grid terms. In other cases it won't be maintainable and elegant way.
CSS Grid
CSS Gird is actual a whole new way of creating website layout.
It will give you more flexibility than any other framework or layout
system. Its very easy to create a 2D layout using CSS grid.
Websites load faster since you will skip loading heavy framework files (ex Bootstrap).
CSS grid are basically used to design the overall website layout.
Please check browser support before you actually start using it.
CSS Grid vs CSS Flexbox
Flexboxes are not a solution for website layouts.
Unlike CSS Grid you should not use Flexboxes to design the base website layout.
Flexboxes are one dimensional, that means elements only flow in one direction i.e. vertical or horizontal.
Check this image, The entire layout can be designed using CSS Grid and only the yellow section area where I might want to show an profile picture and a name below that, to achieve that I can use Flexbox instead of CSS Grid.
Use Flexbox to solve only uni-directional layout issues in your website.
CSS Grid Vs Bootstrap
You don't have to load unnecessary styles when using CSS Grid, but if you go for Bootstrap for grids then you are loading stuff which your website might not need.
Get rid of ugly markup. In Bootstap you need to use additional elements
with class row and col to design your layout. I personally feel
they makes my HTML look very ugly.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Bootstrap is not flexible, in order to change the layout you have to change the Markup. CSS job is to look after the presentation of your document, but when you use Bootstrap you are changing your HTML to to achieve your layout. When you use CSS grid you can change layout of the website without touching HTML code.
Below is an example where without changing the HTML I need section 1 to be shown first followed by section 2 and section 3. Look how effortlessly CSS Grid did the job. Where as for Bootstrap I have to update the HTML code and swap section 1 and section 2.
.wrapper {
display: grid;
grid-template-columns: 1fr;
}
.section-2 {
grid-row-start: 1;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" />
<h1>Bootstrap</h1>
<div class="row">
<div class="col-sm-12">Section 1</div>
<div class="col-sm-12">Section 2</div>
<div class="col-sm-12">Section 3</div>
</div>
<h1>CSS Grid</h1>
<div class="wrapper">
<div class="section-1">Section 1</div>
<div class="section-2">Section 2</div>
<div class="section-3">Section 3</div>
</div>
CSS Grid Layout allows to create a two-dimensional grid to lay out items on it. It is used to generate responsive user interface designs.
The main difference to layout systems like Bootstrap and CSS Flexbox is that it is two-dimensional. In Bootstrap and Flexbox layouts are defined one-dimensionally. This means, in CSS Grid Layout the grid items are aligned horizontally and vertically to each other like in a table. The differences to CSS tables is that it is more flexible in regard of sizing and aligning elements within a grid and allows items to overlap each other.
While the 2D effect can also be achieved (to some extent) by the other systems, Bootstrap's grid system is based on a 12-column layout and both Bootstrap and Flexbox align elements in one direction wrapping to the next line when they don't fit into the size of their container.
Furthermore, CSS Grid Layout allows to place the containing elements in different "grid areas" independently from their position within the DOM.
In Grid Layout, only items placed within implicit grids wrap elements similar to Flexbox or Bootstrap based on the available viewport or container size. Elements placed in explicit grids do not get rearranged that way, but this can be achieved in combination with media queries.
Bootstrap is a huge framework but I assume you are only refering to its grid in this comparison.
To me, the shining part of css flexbox and css grid is that they bring the grid system in the web world a bit closer to the grid system in the desktop world - it is more responsive and dynamic. What flexbox/css grid enables is that items/columns/rows can be described to adjust their sizes not only based on the size of the container, but also in response to each other.
For example, flexbox allows you to specify some item to have a fixed size (100 px), some item to have a size relative to container (20%), some item to fit to content (auto), and all the other items to share the rest available space in the proportion you want. If window size changes, all the items auto adjusts. Moreover, if the auto-sized item changes, the others will also adjust to absorb the refreshed free space. This is very much how desktop app layout works.
CSS grid shares the same capability of flexbox, but it is a grid, meaning it operates on two dimentions. If you ever try to use multiple flexbox rows to simulate a grid, you will run into the issue where you cannot ask the first item on each row to have the same size without giving it some kind of less flexible width (either a percantage or px). CSS grid can size them as a column, hence set the width to the widest item no matter which row it resides.
Bootstrap v3 simply just doesn’t have this flexibility. Its responsiveness only means responsive to container and devices, it cannot make columns/rows responsive to each other.
Bootstrap v4 is a different story, it is built on top of flexbox so the flexibility is greatly enhanced. But still, if you are just talking about gird system, I would say go for css grid and flexbox first.
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 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.
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.
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