Foundation 4 responsive grid layout for large screens - css

I've used compass to create new sass project with zurb foundation 4 framework. My screen.scss file looks following:
// Reset and normalization settings
#import "normalize";
// Global Foundation Settings
#import "settings";
// Comment out this import if you are customizing you imports below
#import "foundation";
Default settings contains following line:
$row-width: 62.5em;
It means that our grid row has to be 1000px (62.5em) for screens that are at least 768px.
What is the proper way to add one more media condition, which will increase $row-width variable up to 75em (1200px) for screens that are at least 1280px?

Create breakpoints for .row in app.scss, like this:
.row{
#media #{$medium} {
max-width: 75em;
}
}
Foundation has variables for screen sizes that are used for media queries in _visibility.scss, for example $medium translates to "only screen and (min-width:80em)".
I haven't tried it myself yet, but should work.
Also, look at this answer, i just modified it a bit:
https://stackoverflow.com/a/14247136/961064
You can find other variables for different screen sizes in _visibility.scss: https://github.com/zurb/foundation/blob/master/scss/foundation/components/_visibility.scss

Related

Zurb foundation - setting the row width in sass settings not working

I am using the zurb foundation v6. in my project, and I would like to set the width of the row to different value than it is set up by default, I have tried with setting up variable $grid-row-width in my _settings.scss:
$grid-row-width: 1400px;
But, that is not working, the row still has the width set to:
max-width: 75rem;
Change the $global-width: rem-calc(1200) to something equal to or wider than you want. The default is $grid-row-width: $global-width. I think you are attempting to make it wider than the allowable global-width.
It was the wrong order of importing files in my app.scss file, for some reason when I was importing settings.scss after including foundation-everything it didn't work, but after I imported settings file before the foundation-everything then the row had a width of 1400px.
#import "foundation";
#import "settings";
#import "motion-ui";
#include foundation-everything;
#import "top-bar";
#import "front-page";
#import "article";

Create custom col sizes in bootstrap

I'm taking advantage of the xs sm md lg columns in order to define how large the columns should be at different screen sizes. It is working fine but I would like to have more fine tuned control and define my own custom sizes.
For instance I'd like to have a col size that exists between xs and sm.
I added a col-ss class like so:
#media (min-width: 600px)
.col-ss-4 {
width: 33.33333333333333%;
}
#media (min-width: 600px)
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
float: left;
}
And added the class like so:
<div class="col-sm-5 col-ss-4">Content Here</div>
But it seems to have no effect.
Bootstrap is a really big framework. If you're looking to change the foundational structure then you're no longer using bootstrap, which is fine. However, you'll want to modify the foundation of bootstrap by using the preprocessors like LESS and SASS. This at least allows you to keep the code modularized. Something like this could very easily be added by modifying the following.
github variables.less
github grid.less
If you're looking for an answer more specific than this, you'd be better off following a tutorial that will take you step by step.
add-xl-grid-size-option
For a time estimate, expect about 30-45 minutes your first time doing this.
You might want to try the code below. you don't minimum multiple media queries for the same min-width size. if you can use less, you had be able to copy classes.
You can customize bootstrap files using bootstrap customize
#media only screen and (min-device-width: 600px){
.col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
float: left;
}
.col-ss-4 {
width: 33.33333333333333%;
}
}
Go through this page to "customize" everything bootstrap. Then you can export your results.
Bootstrap customize files here

How to override #media (min-width: 992px)?

bootstrap.css contains:
#media (min-width:992px)
I would like to change the 992px to 650px. How do I do it by overriding it from another file and prevent the 992px line in the original bootstrap.cs file from taking effect?
In other words, I want all width of >650px to adopt my style, and I would like to do it without modifying the original bootstrap.cs file.
I don't see a way that you can do that.
I would suggest generating your own bootstrap CSS file. You can easily modify the media query breakpoints by going here:
http://getbootstrap.com/customize/#media-queries-breakpoints
Change the values to your prefered dimensions.
Scroll down to the bottom of the page and click "compile and download".
Ideally if you include your CSS file after the default bootstrap.css file, the styles that are rendered will be from your file. You will have to note that all the styles in the bootstrap.css that you do not want to reflect will have to be overwritten in your custom CSS file.
This is a only option there is if you do not want to modify the bootstrap.css file.
Hope this helps.
Create your own CSS file and put the styles there. #media (min-width: 650px) { .......}
If the styles don't take effect, use !important for the styles.

Changing Bootstrap default container width

I want to change bootstrap container default width, which is 1170px.
Is it OK to override settings like this?
#media (min-width: 1200px) {
.container {
width: desired_width;
}
}
Is that all I have to actually do?
It is not good to directly edit a compiled (and perhaps minified) CSS file. It's considered a bad practice and should be avoided.
If you want to change the default width you have to recompile your Bootstrap. This depends on how you are currently using Bootstrap; if you are using a CSS preprocessor such as SASS or LESS you can just edit the variables (see variables.less). Otherwise you can go to http://getbootstrap.com/customize/ in order to get a custom build.
If you are not using any preprocessor, you can fiddle with the grid system and the media queries breakpoints.
Answering your question you probably just want to change #container-large-desktop and #screen-lg using a custom build (assuming you are not using a preprocessor).

Force LESS to import a file twice

I am building a variable-driven LESS framework in which a child theme can override variables set in the parent theme. This framework includes responsive design, so variables have different values set for every media query. In order for the media query specific variables to take effect, the same styles that create the main layout have to also exist within the media queries. To make this as dynamic as possible, I have created layout less files that I want to import at every media query. Unfortunately, LESS only imports styles once and ignores all subsequent imports of the same file.
Here's the gist what it looks like:
style.less:
#import "variables"; // has the variables for the main layout
#import "variables-calculations"; // has all the dynamic element size calculations that change with the defined variables
#import "layouts"; // has all of the styles that incorporate the variables
#import "responsive-tablet-wide";
media-query-tablet-wide.less
#media screen and (max-width: 1199px) {
#import "variables-responsive-tablet-wide"; // has all the variables for the current breakpoint
#import "variables-calculations";
#import "layouts";
}
The resulting output for the media query? Empty:
#media screen and (max-width: 1199px) {
}
I am using LESS compiler Prepros.
How can I force LESS to compile "layouts" twice? Or 5 times, for that matter.
I should define your variables in one file and append the target / device to it to discriminate between them
so variables should define:
#var1: 15;
#var1-tablet: 30;
etc.
Main reason, see http://lesscss.org/:
When defining a variable twice, the last definition of the variable is
used, searching from the current scope upwards. This is similar to css
itself where the last property inside a definition is used to
determine the value.

Resources