Im using ZURB Foundation 3 on a project of mine. I love grid systems and responsive sites but my issue is I still strongly believe they should be built wider then 1000px.
I have a few questions:
1) First off I would love to make certain sections (divs) full width. Now I have read I can just replace <div class="row"> with <div class="container"> for instance and it will generate that effect. Now for some reason this does not feel right, should I just create my own class thats full width, or what would be the proper way to do this?
2) I would love to have it based for a larger resolution, maybe a max 1440px wide or even a fluid 100% full width. How could I go about doing this, and/or is Foundation not the correct framework for me? I love the fact it comes with all the templates so is super quick and friendly to do mockups.
Thanks in advance.
Update: Please stop down voting this post. The framework has changed significantly since the question was answered. If you are using Foundation 4 or higher, please see the updated answers and up vote them.
For Early versions of Foundation 3 only
Add the following override to your CSS (This must appear after or at the end of foundation.css)
.row {
width: 100%;
}
This will override the default with of the framework and make the design go full screen. Feel free to change this value to suit your needs.
There is also a customized download available at http://foundation.zurb.com/download.php (which probably does the same thing, overrides or replaces .row width)
Editing/overriding foundation is easy. In Foundation 4 you can edit your _settings.scss file. Uncomment out $row-width: emCalc(some_number.px); to a row-width you'd like to use.
Uncommenting $row-width: rem-calc(1000); worked for me
Related
So I have a nasty project in my hand with a lot of bootstrap in it. The thing is, I need to make lock at a certain 1024px and I can't think of how. I'm locking the body at 1024px but bootstrap still changes the layout regarding the width and I can't simply remove all the column classes to use only 1 since it would not adapt itself any more.
What ideas could I use to achieve this?
You can use your own customized Bootstrap css (create one here)
instead of the original/regular one. In the 'Media queries breakpoints' section, just change #screen-xs, #screen-sm, and #screen-md to 1024px and then download the customized version.
Bootstrap is designed to be mobile first and scale up rather than down.
You could reverse this by having a lot of fixed values in your own css file that overrides the bootstrap media queries below 1024. Essentially this would be a lot of work because you would be reversing bootstrap's mobile first design.
This has been already asked on SO, and the steps to make Bootstrap 3 non-responsive are described in the docs. In your case, it sounds like simply using the col-xs-* classes will work as these columns don't stack vertically and "change the layout". From the docs:
For grid layouts, use .col-xs-* classes in addition to, or in place
of, the medium/large ones. Don't worry, the extra-small device grid
scales to all resolutions.
https://www.codeply.com/go/g1dEHU6EOX
I had experience with Twitter Bootstrap and Foundation, and I personally think the only thing I want to use is their grid system. Other features are just bloated.
So I read about the prospect of a grid layout. All of the articles I found are oriented toward an 'artistic' explanation (golden ratio ect). I am a coder at heart, I need a clear & logical reason to use a grid layout (for example: 'columns can be easily stacked on top of each other on mobile screen, and expand horizontally on larger screens'). Can someone give me the pros and cons of applying a grid system to my website? Personally do you think using a grid system is good?
If the answer is yes, should I use a premade grid system like from Twitter Bootstrap/Foundation or just make one for my own? All of the other features are unnecessary for me an irrelevant to my problem.
Thanks! :D
I agree with #kunalbhat that this might not be the best area to ask this but since you did I will try to answer it.
The grids are designed allow for speed and adaptability. Speed in multiple senses. The first part of the speed is the speed of writing the code. You can easily get the layout you want when you are using the grid system and everything aligns correctly. You don't have to remember your tables and columns and col-spans, etc.
The second speed is modifying your code. Inevitably you will need to go back and make changes, with a grid this is easily to do. Changing a col-md-7 to a col-md-6 easily makes a little tweak in the layout of your page that can easily be tracked and performed.
You mentioned responsive design, both Bootstrap and Foundation have responsive grids. The grids will snap to different sizes based on the viewport size. However you have control as well. For example if you want something to take 1/12th the screen in desktop, 1/4th on a tablet, and 100% on a phone that is easily done with Bootstrap and Foundation, both have grid classes that target specific viewports.
The also provide visibility classes based on those viewports.
For the "bloated" part that is easily solved. Using SCSS you can easily only import portions of a library. For example for one project I was on I only imported the Grid and it was considerably smaller.
I happen to think that this is a SO question, simply because of one of the main cons of CSS grid systems: semantic.
I think semantic is important for a web developer and having a class named col-md-7 is not the most semantic thing to do.
But I like grids, because they are easy and quick to use, so I started to use LESS. Because it allows me to use variables and functions(mixins) in CSS, I can build my own grid system on my CSS rather then on my HTLM.
You can start on Frameless and customize your own 'classes'.
I was wondering is there anyway to get a exclusive tablet view in foundation with its grid. I want an specific grid layout for desktop [achieved], one for tablet [not achieved] and one for mobile which is done perfectly. but after it's major breakpoint at 768px there's no difference between mobile view and tablet view regarding the columns lining upon each other. If you get what I'm saying some of columns get too big in tablet view which isn't absolutely necessary. There's no necessity to show them with 12-column mobile grid.
Second issue, I downloaded the RTL version of Zurb Foundation (the problem stays when using the original copy), the "row" element which has a role similar to "container" or "wrapper" or something like that, is started from the right side (left side in original version) and it's not absolutely centered. The problem becomes more critical when we enter mobile view and using block grid. Elements are not centered.
I really appreciate your answers guys :)
To answer your first question you can only get the tablet only grid if you are using SASS or SCSS.
*This experimental feature is currently only available by using SASS and importing the _grid-5.scss file into your Compass project. You can also simply download the grid-5.css file, and link to it in your HTML head after your foundation.css.
Medium Grid
As for the RTL can you post a example showing how it looks in RTL and LTR so I can get a better idea of what you are seeing. Also its easier to have one question per post.
I am looking to know if there is any simple solution known to change the gutter with on the fluid default 12 grid bootstrap system (2.3.0).
I am not familiar with LESS but if that is the answer, please also describe how to could be changed. The same with Sass.
Please note that it is perfectly acceptable to change the gutter width, by half or one fourth, for example if that may make things simpler.
The following goals must be met:
Must be able to update bootstrap in the future. This means not editing the actual bootstrap files.
Functionality should remain for all other objects.
Must be simple. Less than 10 lines of CSS. For example, an added class or something.
I have searched throughout Stack Overflow and still have no idea how I may go about doing something like this. To the best of my understanding, downloading a customized Bootstrap only renders custom gutter widths for non-fluid grids. I have coded my own fluid grid system before, so I understand the math, but I am worried there may be consequences and it would be helpful if any known issues on class overrides could be shared.
I promise to give credit where it is due.
UPDATE:
Changing the less variables as described in Yoda's answer is the way to go. Does anyone have any experience changing these less variables? For example, I believe the variables that have to be changed are the following:
// Fluid grid
// -------------------------
#fluidGridColumnWidth: percentage(#gridColumnWidth/#gridRowWidth);
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth);
// 1200px min
#fluidGridColumnWidth1200: percentage(#gridColumnWidth1200/#gridRowWidth1200);
#fluidGridGutterWidth1200: percentage(#gridGutterWidth1200/#gridRowWidth1200);
// 768px-979px
#fluidGridColumnWidth768: percentage(#gridColumnWidth768/#gridRowWidth768);
#fluidGridGutterWidth768: percentage(#gridGutterWidth768/#gridRowWidth768);
How does one go about changing something like this? Perhaps:
#fluidGridGutterWidth768: percentage(1.5);
If anyone has done this before, I would appreciate a shove in the right direction.
The easiest way is probably to use the Customizable download that Twitter Bootstrap provides. Change the #fluidGridGutterWidth variable to suit your needs in the form. Download the less files from here. You can access the variable.less file from the github bootstrap project and then change this piece of code:
// Fluid grid
// -------------------------
#fluidGridColumnWidth: percentage(#gridColumnWidth/#gridRowWidth);
#fluidGridGutterWidth: percentage(#gridGutterWidth/#gridRowWidth); // <= this one
I thought you had access to less files at first, then I realized you are using the customized gui on the website. Just download the less files, and make your changes. Then compile the less files to give you a css file or use less for development. You can use css or min.css for deployment.
I think you might be over thinking it. The problem with changing the LESS variables is that it will change it for all gutters. So if I like the 15px gutter for arranging the over all layout but want the gutter to be 5px for a form inside that grid it won't work.
Just create 2 css classes to override the areas you want to change the gutter.
Apply this at the "row" level.
.row-5-gutter{
margin-left: -5px;
margin-right: -5px;
}
Apply this at the "column" level.
.col-5-gutter{
padding-left: 5px;
padding-right: 5px;
}
demo: http://jsfiddle.net/tg7Ey/
I was looking for a simple solution for this problem, too. My goal was to use simple CSS, not LESS. This answer as like any other i found, based on compiling LESS or using the online compiler of bootstrap. So i tried to find my own solution.
Reading the documentation you will find the following about the gutter-width: Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows.
Based on this i tried the following:
.container {padding-left:1px;padding-right:1px;}
.row {margin-left:-1px;margin-right:-1px;}
.row > div {padding-left:1px;padding-right:1px;}
From now the gutter width was only 2 pixel. My next problem was, that my intended width was an odd number. My solution was to remove the paddings and margins on the left and put them completely on the right:
.container {padding-left:0;padding-right:5px;}
.row {margin-left:0;margin-right:-5px;}
.row > div {padding-left:0;padding-right:5px;}
Now i have a 5 pixel gutter width.
I did not tested this in all possible scenarios you can use bootstrap. Especially you have to pay attention to use only column-div's inside a row-div inside a container-div. But in my case it was a very effective solution without touching the origin source code of bootstrap or using a LESS compiler.
I'm trying to create a couple of static HTML pages for demo purpose. I decided Less 4 CSS framework
For now, I have two pages to demo:
Login page: contains a header and a login form at the center of the page.
Usual suspect page: header, footer, main content.
I don't know how to partition Less grid to fit my requirements. How to divide and partition Less 4 grid?
I'm learning it too. As far as I know, LESS framework and its successor http://framelessgrid.com/ require you to manually write the CSS and HTML first. Then you use Joni Korpi's LESS to adapt it for mobile devices. Will update you as I progress myself.
Check out this answer. Basically, every element is set to certain column widths using .col1, .col2, etc
How to effectively use the Frameless grid?
And I asked this question to understand LESS css.
How to read this LESS css?