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

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";

Related

How do I load both ag-grid themes using SCSS and toggle between them?

I've tried using in my main.scss
#import '~ag-grid-community/src/styles/ag-grid';
#import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham';
#import '~ag-grid-community/src/styles/ag-theme-balham-dark/sass/ag-theme-balham-dark';
and then conditionally, I want to apply ag-theme-balham or ag-theme-balham-dark to the div containing ag-grid.
However, if both themes are loaded via scss, since they both build on some common theme files with variables it seems that one overrides the other?? My grid is ending up light even when I can verify through chrome inspector that the surrounding div has class="ag-theme-balham-dark" (even though dark is imported last).
Removing the import of the light theme first succesfully makes for a dark grid.
If I switch to use ag-grid's CSS instead of SCSS that does work, but the whole point of SCSS is so that I could override some theme variables?
To solve this, I ended up not importing their pre-built themes, and created custom themes. Creating the custom themes is still simple to do, since you can use the default variables as a base.
#import '~ag-grid-community/src/styles/ag-grid';
#import '~ag-grid-community/src/styles/ag-theme-balham/vars/ag-theme-balham-vars';
#import '~ag-grid-community/src/styles/ag-theme-balham/sass/ag-theme-balham-common';
.ag-theme-balham {
// $ag-params contains all values for the light theme
#include ag-theme-balham($ag-params);
}
.ag-theme-balham-dark {
$background: #2d3436;
$foreground: #F5F5F5;
// override the default params with the dark values
$dark-params: map-merge($ag-params, (
background-color: $background,
foreground-color: $foreground,
secondary-foreground-color: $foreground,
odd-row-background-color: darken($background, 3),
header-background-color: darken(#636e72, 30),
header-foreground-color: $foreground,
header-cell-hover-background-color: lighten($background, 5),
header-cell-moving-background-color: lighten($background, 5),
border-color: #424242,
hover-color: lighten($background, 7)
));
#include ag-theme-balham($dark-params);
}
https://stackblitz.com/edit/ag-grid-scss-themes?embed=1&file=src/styles.scss
Depending on what features you use in ag-grid, you may have to override more of the $ag-params values. I only overrode the ones that were needed for the example.

Remove border-radius from Bootstrap 4 breadcrumb - Sass

In Bootstrap 4 there is a Sass varaible called $enable-rounded which
"Enables predefined border-radius styles on various components."
(https://getbootstrap.com/docs/4.1/getting-started/theming/#sass-options)
I have a requirement to remove the rounded corners on the Breadcrumb component, but I don't want to remove it from any other components. Therefore I can't use $enable-rounded to do what I need.
However, I don't know what the optimal way to do this is.
The Sass for _breadcrumb.scss contains this:
.breadcrumb {
display: flex;
flex-wrap: wrap;
padding: $breadcrumb-padding-y $breadcrumb-padding-x;
margin-bottom: $breadcrumb-margin-bottom;
list-style: none;
background-color: $breadcrumb-bg;
#include border-radius($border-radius);
}
How do I override #include border-radius($border-radius); without modifying _breadcrumb.scss?
All of the CSS for my app is condensed into 1 file (app.css) which is built from a Sass file (app.scss) which first includes the relevant Bootstrap 4 Sass files. So I could do something like this:
// app.scss
#import breadcrumb;
#import // other_bootstrap_sass_files
// CSS specific to my app
.breadcrumb {
border-radius: 0;
}
This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Is there a smarter way to do this with Sass for Bootstrap 4?
I think that for your specific case where you want only breadcrumbs without border-radius and all other components still have it, your only solution is doing like you mentioned in your question:
.breadcrumb {
border-radius: 0;
}
This seems a bit too similar to Bootstrap 3 where you had to override what you didn't want.
Personally I dont't see any other solution, only because you don't want to edit the original _breadcrumb.scss
If you look at the _variables.scss file, you can see all the variables that are set with !default - think of this as a preferences file. When the SCSS is compiled, your new values are swapped for the default values without having to overwrite the CSS.
Seems like $breadcrumb-border-radius: $border-radius !default; is what you want.
Two ways of resetting that value:
1) Make a copy of the _variables.scss file and place it in your project directory (I like changing the name to, say, _myvariables.scss ), look for that variable, remove the !default and change it to $breadcrumb-border-radius: 0;
OR
2) Make a file, say _myvariables.scss, that contains $breadcrumb-border-radius: 0; (and any other default values you want to change later on).
Next, import that new file BEFORE your bootstrap scss. In your example that would be your app.scss file:
// app.scss
#import myvariables.scss; //no underscore because it's a partial
#import // other_bootstrap_sass_files including the breadcrumb component
Now, when the SCSS is compiled, the breadcrumb radius will be set to 0 without changing anything else or overwriting css.

Webpack Encore: unexpected SCSS import order

I use Symfony + Webpack Encore and try to split styles into "layout" and "page-based", but only to make development more comfortable: I still want to compile one css file for them (in fact, there is a limited number of such css files, each one for block of pages, but for easier understanding let's assume only one is necessary). So I do like this:
_global.scss
// ... bootstrap variables redefenition here
#import "~bootstrap/scss/bootstrap";
// ... common functions, mixins, font-face definitions here
.my_style1 {
padding-left: 12px;
padding-right: 12px;
}
.my_style2 {
#include make-container-max-widths();
}
app.css
#import "_global"
// other styles here
During the compilation (require('../css/app.scss'); only in my app.js) styles are ordered: [ global, bootstrap, app ] and I don't understand why. I mean, if you use them as:
<div class="container my-style1"></div>
container's padding will override defined in my-style1.
The most strange thing is that in dev app.css they are ordered as expected (my-style is lower than container), but in prod not (container is lower than my-style). When you work in dev (and Chrome display non-compiled styles, you also see that _grid.scss overrides _global.scss)
Sorry for this quick self-answer, I've really spent a lot of time before asking, but after it found the solution quickly. Hope, can save smb's time.
You should simply add other styles to app.js. This way they will recompile on any file change (in previous example they recompile only on app.scss change) and the order will become correct:
app.js
require('_global.scss');
require('app.scss');

How NOT to combine all CSS into one file with SASS and bootstrap

I'm relatively new to SASS and bootstrap. I use bootstrap with SASS and struggle a little bit with a concept.
I always used CSS like this: one base CSS-file with the basic layout (eq. base.css). Every template includes additionally a different CSS-file (eq. sitemap.css, team.css, news.css). This CSS-files only contain the parts of the respective templates. So I can overwrite the definitions in the previous files.
In SASS everything is compiled in one file. In combination with bootstrap I actually struggle with the concept I used until now.
Every time I want to add a new CSS-file to the existing definitions, I get an error because I have to reinclude the complete bootstrap structure. But if I reinclude it, the whole bootstrap code gets written into the additional files (eq. sitemap.css, team.css, news.css) too. If I include both files in my HTML-tree, the bootstrap definitions (like the whole normalize block) gets defined two or more times.
I have this setup:
- css
|-- source
| |-- base.scss
| |-- team.scss
| |-- vendors
| | |-- bootstrap...
└-- output
|-- base.css
└-- team.css
In base.scss I include the bootstrap stuff. I do also need the bootstrap stuff in team.scss, but not all the main stuff like the normalize things.
How do I achieve that? Is that even possible or do I have to switch my css needs by adding a css-class to the body tag (like body.team)? But then I have to carry the whole CSS stuff of every page in one file. Isn't this crab?
Edit to clear things up a bit:
This is in base.scss:
#import "settings/vars";
#import "vendors/bootstrap";
...
header {
#extend .container;
...
.contentbox {
margin-top: $mainGap;
}
...
}
...
and this is in team.scss:
header .contentbox {
#extend .sr-only;
}
It's absolutely clear that "#extend .sr-only;" doesn't work in team.scss because of the absence of bootstrap. But if I include bootstrap with
#import "vendors/bootstrap";
in the first line of team.scss, I would automatically add all the standard 16kb bootstrap things to team.css as well. However, these definitions are already in base.css. So I would have a preventable overhead.
I think I know there is no way to say: "Hey bootstrap. I already included you in base.scss. So you don't have to write the whole main definition of yourself into team.scss again. But I need you because I like you as an usable framework. So please provide me the functions and variables anyway.". But perhaps?
What I do in this case is to compile base.scss with Bootstrap and all the base code and my customized _variables.scss. Then if I want to add team.scss I just import the mixins and the custom variables that I will need to use from Bootstrap. Sounds great!
but...
Since .sr-only and other are just provided as classes instead SASS mixins, you can't #include it, like you could do with the .transition mixin for example.
So, for the moment if you are using SASS, you have 2 options:
Import the Bootstrap module with the class you want to extend/reuse
//contain the .sr-only definition
#import "vendors/bootstrap/_scaffolding";
#import "vendors/bootstrap/_variables";
header .contentbox {
#extend .sr-only;
}
Copy/Paste the class from the Bootstrap source and extend it:
#import "vendors/bootstrap/_variables";
// Copy/Paste the .sr-only class to reuse, very un-DRY
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
border: 0;
}
header .contentbox {
#extend .sr-only;
}
What you're searching for is named a partial in Sass I guess:
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do
#import "colors";
and _colors.scss would be imported.
FYI, in LESS it'd be an import option: #import (reference) "colors"

Foundation 4 responsive grid layout for large screens

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

Resources