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.
Related
I am making a basic screen which simply shows a grid of data, but the grid can have more columns than the screen can cope with. I plan to use Bootstrap, but just for it's controls, look and feel. The page, however, does not need to scale for mobile.
A very basic example of the data I am showing looks like this:
https://jsfiddle.net/bunwt5cy/1/
So, first column is just an incrementing number, followed by a date, and then the data. The number of columns can range from 1 account, to 20. Each column (cell) then has 3 financial values (2 shown in demo) ranging from 0.00 to 99,999.99 (To show sizes required).
I'm currently using <TABLE>, but is there a better way, using bootstrap, to do this? Can it be done better with DIVs? And if I do, am I limited to 12 Divs per row? If so, that's not an option then, as my grid may have > 12 columns.
Here is an example of some rows. I'm trying to make it neater, and use 'as best as possible' best practice, but also, make pretty.
As a best practice, you should continue to use table element for such spreadsheet-like, tabular data, while using CSS to make it "pretty".
The div element according to the HTML5 specs:
The div element has no special meaning at all ...
Authors are strongly encouraged to view the div element as an element of last resort, for when no other element is suitable. Use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.
In this case table is available, it is appropriate for tabular data, so in terms of best practice, you should continue using table element for such tabular data rather than div.
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.
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,
I am playing around with designing my own grid system. I decided to go with something that splits columns on percentage i.e. 10% 20% 30% etc. So I have Col-10 for a column that is 10%.
However, instead of doing a lot of coding, I want instead to use some sort of additive method. Think of it like money.
You have 100 note, a 50 note, a 20 note, a 10 note a 5 note and a bunch of small coins usually of the same denomination 100p coin, 50p coin, 20p coin, 10p coin, 5p coin and of course the all important 2p and 1p.
There is no 77 note. That would be made of 50, 20, and 5 notes, and 2 x 100p coins.
I want to do likewise with CSS. Instead of defining and using a specific width, lets say I want a column of width 77%. I would like to be able to do a class like this:
<div class="Col-50 Col-20 Col-5 Col-2">Content</div>
and in my CSS I would have these classes defined according to their respective percentages.
My problem is. The last class here, would be all that is applied. giving me a 2% column instead of the 77% column I intended.
Is there any magic CSS trick that will allow me to do some sort of additive % like what I am thinking or is this a JavaScript the only option.
I could do this in JavaScript but I want to avoid using JavaScript / jQuery or other code apart from HTML5/CSS3 at all costs because I want to remove external dependencies. While rare, it is still possible to disable JavaScript in browsers and I want my system to work without it if possible.
I also know I could us SCSS / LESS etc but ultimately the end result would be a very large CSS file filled with almost every % between 0 and 100. This is not my goal.
I don't believe this is possible with CSS alone. CSS is a styling language, so (with the exception of calc() https://developer.mozilla.org/en-US/docs/Web/CSS/calc) it doesn't have math calculations. It really isn't designed to compound values in that matter. Even a preprocessor like SASS/Less, I don't believe, would be able to accomplish that since the preprocessing is on the CSS side, not the HTML side. Perhaps an HTML preprocessor?
Either way, I'm not sure I follow the benefit of the class; adding 4 classes just to specify a width seems superfluous.
Maybe if they come out with "Compounding Style Sheets"? :)
no it isn't possible, At some point you would have to have 100 classes for the width. If you are set on staying css only. I would write a CSS generator that basically loops through and creates the redundant code and saves it to a file for you. Then you could go in and add to the file as needed.