Many of the libraries which support responsive technique uses the 12 column grid system. e.g. the default Bootstrap grid system utilizes 12 columns
Is there any reason or logic behind using a 12 column system and not something else ?
12 is a superior highly composite number which can be divided in 2, 3, 4 and 6, which makes it very convenient when you want to buy eggs or layout a page.
(too bad our ancestors didn't decide to stick to the duodecimal system, far superior in practice over the decimal one as soon as you're past counting over your digits)
It's because 12 is dividable by 1, 2, 3, 4, 6 and 12 without remainder. Lot's of combinations to achieve desired layout. If you need more columns, use something bigger, like 24 or so.
It's an important part of the grid system.
Bootstrap includes a responsive, mobile first fluid grid system that
appropriately scales up to 12 columns as the device or viewport size
increases.
So it's not something you'll be using for mobile screens, but it's really handy if you want to code a bunch of smaller pieces in a row for bigger screens. It just breaks down everything in 12 pieces and gives you more flexibility design and code wise.
AND it's dividable as some have already mentioned which makes it also easier to work with.
It's one of those things you'll start appreciating once you start developing a website that requires multiple columns on the same row for whatever reason that may be.
Cheers,
Related
I am a back-end developer and new to Foundation as well as to CSS. I have seen few of the front-end developers generally struggles in converting a design into CSS if the designer has not considered the grid structure while designing. This generally happens because the 12 grid (default) column structure doesn't provide the flexibility to place the elements exactly as desired.
Since, Foundation provides us to use custom grid count, is it wise to use it? Most of the grid structure uses 12 grid column because 12 is a good number. What if we use a 60 grid column structure with the same gutter as we would use it for 12 grid (say gutter is 20px)? I believe it should give us more flexibility to place the elements in place.
Let me explain. Suppose we need a three column structure for my webpage, with a ratio 3:3:4 and I do not want to leave any offsets. I am not sure how can we achieve this using 12 grid columns except for may be positioning the elements manually. But in 60 grid column, we can easily achieve this by using large-18, large-18, large-24, with gutter as required, say 20px.
Some may say that if we use gutter as 20px in a 60 grid column structure, the gutters between the columns would take most of the space of the webpage. But no, gutters are imaginary till we use the actual columns. So here space for only 3 gutters will be used and rest will be the columns with the ratio 3:3:4.
This is precisely my understanding about the grid structure. Can someone with more knowledge let me know, if whatever I am assuming actually makes sense or are there some other points which I am missing and may haunt me if I use a 60 grid structure?
Great questions.
I'm definitely no expert, but I have used Foundation quite a bit. I'll assume you're using Foundation 6. There are a couple ways you could go about accomplishing these tasks, and I've used both successfully in projects.
First way is to change the default grid to fit as many columns as you feel comfortable with maintaining. Personally, the most I've ever used is a 24 column layout. It's flexible enough to fit most layouts. Change this in your _settings.scss:
$grid-column-count: 24;
If that, generally, won't be flexible enough for you, you can use the regular grid, and also make a custom grid and call it with a class. That way, you've got the regular 12/24 column grid to use for most pages, but you can call on the custom grid for special cases. http://foundation.zurb.com/sites/docs/grid.html#grid-row
#include grid-row($columns, $behavior, $width, $cf, $gutter) { }
Lastly, if you don't want to use any of that special stuff, you can use percentages in your columns and omit the standard large-# column classes. So you custom scss would look something like this: http://foundation.zurb.com/sites/docs/grid.html#columns
.special-column{
#include grid-column(30%);
}
.slightly-larger-column{
#include grid-column(40%);
}
Not sure if this answers all your questions, but sounds like there's just some confusion as far as best practices? You can make you grid as large as you want, but you'll have to maintain it either way.
I know there are a lot of questions regarding input groups and their size in bootstrap 3, but I've tried every solution and I can't get it working properly (ie. with col-*-12). I've solved it temporarly messing around with col-xs-14 (yeah, I don't know why 14 works and 12 not).
I would be very thankful if someone can give me a solution with col-*-12 or an explanation of why 14 and not 12. And... the limit was not supposed to be 12 columns per row?
I've also read Bootstrap 3 documentation about the Grid System.
My working example can be found here: index12.html uses col-xs-12 (not displaying properly) and index14.html uses col-xs-14 (displaying properly)
I would like to make email responsive, but I have some problems with data table (no layout table). The deal is make 2 tables : one for desktop and another for mobile. Until there, no problem I can hide/show the table depending on the screen size. But I have a problem when displaying mobile table.
Take a look at this codepen ...
When the mobile table is displayed I would like the 2nd column has an "auto-size" in order to have the text on one line.
Do you have any ideas ? I can't find the correct css ...
Thank.
The 2nd column for the mobile layout needs a min-width (e.g. 100px).
I.e.
However, this table no longer works in today's email clients, if it ever worked. I have tested it using Litmus and Outlook (any), Gmail, iPhones - all have critical faults.
A much better way is to use one table - easier for maintenance as well - and you can either keep it in the old-fashioned datatable manner, or use card UI design to massively improve its readability, flexibility, and accessibility.
The essential features of the single datatable are to use a hybrid structure for the email, three columns, and repeat the header in each column. Then hide the headers for desktops (or show them for mobiles).
Like so:
Read the linked article for full details.
The essential features of the card UI design is to gather all the information for one row together, and display it on multiple lines, using hierarchy and gestalt laws to aid readability.
For example:
If you want to keep text in 2nd column in one line, maybe check this:
Keep a line of text as a single line - wrap the whole line or none at all
To adjust the width of this column, try playing with: width: auto.
Next time consider using responsive Twitter-Bootstrap framework, bro.
I am trying to split the row space I have to 13 columns, not 12. Every time I had the 13th column my row breaks into rows, regardless of the width of the container. So 12 is fixed/
How do I define 13 columns?
I tried:
<div class="col-lg-13">
<div class="row little-padding">
I also tried:
<div class="row little-padding col-lg-13">
But still, 12 per row remains...
You can create a custom version of Bootstrap, and specify the number of columns you want it to work with via the official site.
http://getbootstrap.com/customize/#grid-system
That link takes you directly to the grid system components.
If you would like your grid system to be 13 columns instead of 12, then you would have to modify the bootstrap LESS template. You can download this from getbootstrap.com.
(13 is an odd choice though)
The variable you are going to need to modify is: #grid-columns which is defined as 12 by default. You may also want/need to modify some additional things such as #grid-gutter-width which is 30px by default.
Bootstrap was made for a 12-col usage.
If you want to have more columns, you need to define your custom responsive grid, with the help of Bootstrap Less variables (see here). You'll mainly need to change these variables :
#grid-columns: Number of columns in the grid.
#grid-gutter-width Padding between columns. Gets divided in half for the left and right.
You can customize your bootstrap and get more col's, but ist not recommended. 12 is a good number - stay with it.
updated
If I'm not mistaking, bootstrap switched to 12 from 16-based grid for several reasons: a) reduces amount of supported css and b) division by 3 which provides more flexibility for different devices.
Keep in mind, Bootstrap promotes mobile first designs, which kind of assumes you taking to consideration tablets as well.
Please see my awesome graphic below which is neither too scale or complete. BUT, I wanted to show the structure I'm going for instead of describing it.
I am creating a space rental system wherein a calendar, structured similarly to the below image, both shows the "taken" spots and also allows a user to click an "open" slot to reserve it themselves. I don't need help with the functionality though, just the layout.
Since this is tabular data at it's finest, with headers and everything, I was able to easily create the desired layout that way. However, tables render from left to right, so in the example below, it renders SPACE 1 9:00am, SPACE 2 9:00am, SPACE 3 9:00am, etc. I need it to actually render SPACE 1 9:00am, SPACE 1 10:00am, etc.
The reason is that in order to make each reservation into a "block" represented by the blue squares below, I need to be able to loop through the columns vertically and not through the rows horizontally.
I also want the columns to be a consistent width and be flexible if more spaces are added or if one/some are removed down the road.
I've been playing with flexbox, which I've barely used before, and I'm having no luck at all. I'm not even sure that's the right direction.
My question would be either 1) is there a way to get a standard table to load the way I want or 2) how can I do this without tables?
Maybe bootstrap's grid system will fit your needs. http://getbootstrap.com/css/
You can create a grid like structure by adding columns, up to 12 in a row, and locking those into rows.