I have a project that requires zurb foundation css and dhtml scheduler and the css is not playing very nicely.
There are two issues in particular.
The monthly calendar is misaligned because of the .56em .62em padding on the table.
A bit more complicated is the appointments on the calender.
this is what it looks like. notice the hole in the side menu.
The styles by default that are the problem.
And I need to remove them to properly render the page.
We are using scss version of foundation but I'm not very familiar with its capabilities and the dhtmlx controls do not use it.
So my basic question is how should i change these styles with the least amount of impact to foundation or dhtml?
I'm sure I could use java script but I think that would be a pain as the calender changes having to find all the elements to apply styles again, and i'm really hopping there is a nifty css trick. =)
Thanks!
******* EDIT ***********
The table issue was quickly fixed for chrome and IE by adding another style sheet after foundation to override the conflicting styles. Short and simple.
<style type="text/css" media="screen">
#scheduler_here table tr td, #scheduler_here table tr th
{
padding: 0;
}
#scheduler_here *, #scheduler_here *:before, #scheduler_here *,after {
box-sizing: content-box;
-webkit-box-sizing: content-box;
}
</style>
If you use Foundation 4 (F4) you can pick and choose which parts of foundation CSS are generated by Compass / Sass. Don't forget to run compass compile after you make the change.
edit -> sass/app.scss
// Global Foundation Settings
#import "settings";
// Comment out this import if you are customizing you imports below
// #import "foundation";
// Import specific parts of Foundation by commenting the import "foundation"
// and uncommenting what you want below. You must uncomment the following if customizing
#import "foundation/components/global"; // *always required
#import "foundation/components/grid";
#import "foundation/components/visibility";
#import "foundation/components/block-grid";
#import "foundation/components/type";
#import "foundation/components/buttons";
#import "foundation/components/forms"; // *requires components/buttons
#import "foundation/components/custom-forms"; // *requires components/buttons, components/forms
#import "foundation/components/button-groups"; // *requires components/buttons
#import "foundation/components/dropdown-buttons"; // *requires components/buttons
#import "foundation/components/split-buttons"; // *requires components/buttons
#import "foundation/components/flex-video";
#import "foundation/components/section";
#import "foundation/components/top-bar"; // *requires components/grid
#import "foundation/components/orbit";
#import "foundation/components/reveal";
#import "foundation/components/joyride";
#import "foundation/components/clearing";
#import "foundation/components/alert-boxes";
#import "foundation/components/breadcrumbs";
#import "foundation/components/keystrokes";
#import "foundation/components/labels";
#import "foundation/components/inline-lists";
#import "foundation/components/pagination";
#import "foundation/components/panels";
#import "foundation/components/pricing-tables";
#import "foundation/components/progress-bars";
#import "foundation/components/side-nav";
#import "foundation/components/sub-nav";
#import "foundation/components/switch";
#import "foundation/components/magellan";
// #import "foundation/components/tables"; // prevent Table CSS from loading
#import "foundation/components/thumbs";
#import "foundation/components/tooltips";
#import "foundation/components/dropdown";
Another option, if you know how you would like to change the padding, borders, etc. to match your other included elements is you could edit the _settings.scss, lines 1064 - 1097 where it has variables for tables. I am showing the variables here unmodified to illustrate what can be changed.
//
// Table Variables
//
//// Background color for the table and even rows
// $table-bg: #fff;
// $table-even-row-bg: #f9f9f9;
//// Table cell border style
// $table-border-style: solid;
// $table-border-size: 1px;
// $table-border-color: #ddd;
//// Table head styles
// $table-head-bg: #f5f5f5;
// $table-head-font-size: emCalc(14px);
// $table-head-font-color: #222;
// $table-head-font-weight: bold;
// $table-head-padding: emCalc(8px) emCalc(10px) emCalc(10px);
//// Row padding and font styles
// $table-row-padding: emCalc(9px) emCalc(10px);
// $table-row-font-size: emCalc(14px);
// $table-row-font-color: #222;
// $table-line-height: emCalc(18px);
//// Display and margin of tables
// $table-display: table-cell;
// $table-margin-bottom: emCalc(20px);
If you have time and want to go even further, you can pull the foundation/components/tables.scss file into your local project, modify it however you like and link to the modified version as above. You can find the original files by running gem which zurb-foundation I have installed with rvm so I get something like ~/.rvm/gems/ruby-1.9.3-p286/gems/zurb-foundation-4.1.5/lib/zurb-foundation.rb from the zurb-foundation-4.1.5 directory the file is located in scss/foundation/components and called _tables.scss
Related
So, I have scss file with global styles. This file seems like that:
#import "colors";
#import "border-radius";
#import "box-shadow";
#import "paddings";
#import "margins";
#import "fonts-famalies";
#import "font-sizes";
#import "transition-durations";
#import "global-path";
#import "mixins";
#import "mixins-properties";
#import "../design/animations/fade-animation";
::v-global(*), ::v-global(*::before), ::v-global(*::after) {
box-sizing: border-box;
outline-color: var(--color-outline__global);
transition: background-color 0.2s linear;
}
::v-global(html), ::v-global(body), ::v-global(#application) {
font-family: var(--font-famaly__comfortaa);
background-color: var(--color-background__global);
color: var(--color-font__content);
margin: 0;
font-size: 95%;
height: 100vh;
overflow-wrap: anywhere;
}
v:global(a) {
color: var(--color-font__link);
}
Styles imports using vue.config.js with this configuration:
module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
sass: {
additionalData: `
#import "#/styles/global/global.scss";
`
}
}
}
})
All good, but when I open developer console in chrome I see picture like that.
When I checked header tag in HTML I see a lot of same css imports. If I comment all css styles - header have a lot of styles still. What am I doing wrong? I think that problem in loader
If you're going to be adding a global import (for example for shared SCSS variables and mixins), don't put ANY global styles in that import.
scss-loader's additionalData modifies each scss file it loads with the given string template. As a result, you're putting an import with your global style definitions at the start of every component's style block.
To fix this, move all your v-global(html) styles and the animations to a different file, which you import once in your index.html or App.vue. Ensure that the file you want to automatically import in your components only contains code that does not generate any styles by themselves (so scss variables, mixins, functions, etc. are fine). It's common that you name this file 'variables.scss' or similar, so no style definitions accidentally end up in this file or its dependencies.
I don't really understand about #import and partial file
But I want to ask for a little understanding.
I have 2 files. file2.scss must use the variable from file1.scss.
File1.scss
/* file1.scss */
$color-1 : #7E3D97;
#font-face{
font-family : AngsanaNew;
src: url(/font/AngsanaNew.TTF);
}
div.test1{
background-color: #222;
}
File2.scss
/* file2.scss */
#import 'file1'
div.content{
background-color : $color-1;
}
When I compile SCSS, It generates 2 files. Which is not what I want. I want it to be
/* file1.css */
#font-face{
font-family : AngsanaNew;
src: url(/font/AngsanaNew.TTF);
}
div.test1{
background-color: #222;
}
AND
/* file2.css */
div.content{
background-color : #7E3D97;
}
Because if I want to create a file file3.css, file4.css. while there is already a file1.css style rule. I will see #font-face and div.test1 contain in file3.css, file4.css.
I don't want that. What should I do?
P.S. Sorry my english. If you edit my text to make it easy to read. I will be very grateful.
If SASS is generating the CSS it does it for every 'normal named' file.scss. To mark a file for SASS that it should not be used to generate a separate css file use an underscore _ as prefix, - i.e. _partial.scss. That files will only be used to be imported to the main scss file.
Now you can organize your project:
// POSSIBLE PROJECT STRUCURE
// variables to whole project
// --> variables only, no classes
_defaults.scss
// partial files
// --> use vairables from _default.scss
// --> or if you want/need to define variables here
// --> use variables with default-flag: '$variable: value !default'
// --> so they will/can be overwritten by same variable set BEFORE in _default.scss
_partial-structure.scss
_partial-element.scss
...
// bring them together in main file
styles.scss
#import 'defaults';
#import 'partial-structure';
#import 'partial-element';
...
Our web application (Angular 1, Telerik Kendo, Bootstrap v4) has two themes: "light" and "dark". We produce our CSS using SCSS equivalent to the following:
html {
/* common css properties [snipped] */
&.light {
#import "./kendo/kendo.common-bootstrap.core.min";
#import "./kendo/kendo.bootstrap-v4.min";
#import "./variables.scss";
#import "components.scss";
}
&.dark {
#import "./kendo/kendo.common-material.min";
#import "./kendo/kendo.materialblack.min";
#import "./variables-inverse.scss";
#import "components.scss";
}
}
We set a class on the html element to set the theme. The site will always be "light" or "dark", nothing else. This works perfectly well for us. However, it also results in a lot of duplicated CSS rules, resulting in a larger-than-necessary CSS file. A contrived example of what I mean:
html.light a { margin: 2em; }
html.dark a { margin: 2em; }
If the site is always "light" or "dark", these rules are effectively duplicates that can be simplified to:
a { margin: 2em; }
We use Gulp in our build process.
Question: How can I de-duplicate my CSS rules OR avoid duplicating them in the first place?
I am trying to set a custom font-family for the button in foundation 6 with no luck I am running foundation 6 with sass and believe they have removed the $button-font-family variable that was in previous versions. What is the best solution to achieve this without the variable?
Ideally I would like to apply a text-transform on the button text as well which is also not a button variable in the _setting.sass foundation file. As you may have gathered I am very new to foundation and sass so any help would be greatly appreciated.
It doesn't look like a font-family is specified in scss/components/_button.scss and that's where button syles are defined. The $body-font-family is set in both scss/settings/_settings.scss as well as scss/_global.scss (if not already defined in _settings.scss). So, verify that you have updated the value of $body-font-family there.
Aside from that, if you are using foundation sass semantically (i.e. mixins), you should be able to use the button mixin like so:
#include button( false, #ebebeb, #a5a5a5, black, solid );
..and then set the font-family property after the mixin like you normally would.
----Update: Based on follow up question/comment----
Here's an example main sass file for one of the foundation sites I'm working on now.
// Author copy of Foundation settings/_settings.scss
#import "settings";
// Author copy of Foundation _globals.scss
#import "global";
// Import from Foundation
#import "path/to/foundation-sites/scss/grid/grid";
#import "path/to/foundation-sites/scss/typography/typography";
#import "path/to/foundation-sites/scss/components/button";
// Include Foundation classes/styles that we want to use
#include foundation-global-styles();
#include foundation-typography();
//
// Author Variables
//
$color-map : ( 'blue': #40578a, 'blue-tint': #7e8ba8, 'blue-shade': #364a75, 'dark': #3d3e41, 'silver': #bdc0c6, 'gold': #ab883c );
$blue : map-get($color-map, 'blue');
$blue-tint : map-get($color-map, 'blue-tint');
$blue-shade: map-get($color-map, 'blue-shade');
$dark : map-get($color-map, 'dark');
$silver : map-get($color-map, 'silver');
$gold : map-get($color-map, 'gold');
//
// Author Components
//
#import "common";
#import "btn";
#import "view";
#import "cover";
#import "header";
#import "hero";
#import "navbar";
#import "main";
#import "page";
#import "intro";
#import "services";
I'll go through this section by section. It's pretty simple and once you have a project set up this way, you'll love it.
// Author copy of Foundation settings/_settings.scss
Here, we are importing a copy of the Foundation _settings.scss file and modifying it for our needs. Don't mess with the original _settings file that ships with Foundation. Doing so will make it more difficult to update the library moving forward.
// Author copy of Foundation _globals.scss
Same concept as the _settings file.
// Import from Foundation
These imports are the only parts of the Foundation framework that I want to use in this case. These component files include the mixins used to generate these components. This allows us to use the mixins semantically in our code.
// Include Foundation classes/styles that we want to use
And this will output the pre-defined classes/styles that we want to use from foundation. Typically, you will at least want to include global and typography styles.
// Author Variables
This is where I put my custom variables (not related to Foundation). You could put this in another partial if you want - just a preference.
// Author components
These are the project's custom components which may or may not utilize Foundation's mixins. The point is, we can if we want to now that we have included the components/mixins we want to use.
So, in your case, you could simply do this:
// Foundation settings
#import "settings";
// Foundation globals
#import "global";
// Import from Foundation
#import "../path/to/foundation-sites/scss/components/button";
//
// Author Variables
//
$special-button-font: Georgia, serif;
.special-button {
#include button(false, #ebebeb, #a5a5a5, black, solid);
font-family: $special-button-font;
&.tiny { font-size: map-get($button-sizes, tiny); }
&.small { font-size: map-get($button-sizes, small); }
&.large { font-size: map-get($button-sizes, large); }
&.expanded { #include button-expand; }
}
I'm importing bootstrap files and rewriting the source variables, eg :
#import "./../../../../vendor/bootstrap/less/scaffolding.less";
#import "./../../../../vendor/bootstrap/less/type.less";
#import "./../../../../vendor/bootstrap/less/code.less";
#import "./../../../../vendor/bootstrap/less/grid.less";
#import "./../../../../vendor/bootstrap/less/tables.less";
#import "./../../../../vendor/bootstrap/less/forms.less";
#import "./../../../../vendor/bootstrap/less/buttons.less";
//etc ...
#font-size-base: 100%;
Then in my own variables.less I set something like that, a mixin for rem font sizing
.font-size(#sizeValue) {
#remValue: #sizeValue;
#pxValue: (#sizeValue * 10);
font-size: ~"#{pxValue}px";
font-size: ~"#{remValue}rem";
}
Now of course, I dont see how I can make that working, this is what I wanted, and it doesn't work (input not recognised) :
// In bootstrap import file, trying to overwrite their variable parameter with my mixin
#font-size-h2: .font-size(32);
Any way to do what I want ?