Using Foundation 4 buttons allows you to customize design using the mixins.
This is the same for most elements.
However, there are many settings that the mixins don't expose to customization, e.g.:
Font color
Hover effect
Border color
These are all calculated based on the button background color.
The button is just an example, but I have the same issue with all other elements.
Is there a recommended way to customize parts which are not exposed by the mixin?
I don't want to go into the source and change the actual mixin definition.
If my design spec is very different from Foundation defaults, would it be better to not use Foundation?
Almost every setting can be customized using SASS variables. The most common ones are accessible in _variables.scss, but you can overwrite any of the other variables used in the actual component SCSS files.
For values that don't already have variables, you can override the styles using CSS and include the overrides in a wrapper mixin. Ex:
#mixin my-button-style($bg:$primary-color, $radius:false, $disabled:false) {
#include button-style($bg, $radius, $disabled);
/* CSS overrides go here */
border-color: pink; /* etc */
}
Related
Vaadin flow theming and styles confuse me. Is there a way to disable it and apply natural css. I know how to reference a css file inside vaadin, and use setClassName but I would prefer to use ordinary css style for components.
Thank you
You can override the default lumo styling by providing yours. For instance, to remove the background color from a ComboBox, I can target the input as follows in a CSS file named vaadin-combo-box.css:
[part="input-field"] {
background-color: var(--lumo-base-color);
max-width: fit-content;
}
To set the colors for a disabled button, you can target it as follows:
filename: vaadin-button.css
code:
:host([theme~='primary'][disabled]) {
background-color: red;
}
And you get the following:
To change the primary color or any other global styling, explore your styles.css file.
For a better understanding, take a look at this video https://vaadin.com/learn/training/v14-theming
Like with all other styling you need to check the states / attributes of the component while the specific state is active and check the DOM - only caveat would be that you need to add those style in the specific files like vaadin-button.css to be applied inside the shadow DOM.
I have a custom sass setup with bootstrap 5 and bunch of my own SCSS files, all of this gets compiled in style.css using gulp. I have a _colors.scss file which stores all the colors according to our design language. We use this to generate a bunch of classes that can be used any where to change colors:
// Text Colors
$colors: (
"icon-color": $slate-500,
'slate-10': $slate-10,
'slate-40': $slate-40,
'slate-300': $slate-300,
"secondary": $secondary-text-color,
"green": $green,
"light-green": $green-color,
"blue": $blue,
"blue-200": $blue-200,
"blue-300": $blue-300,
"blue-400": $blue-400,
"dodger-blue": $dodger-blue,
"mariner-blue": $mariner-blue,
"light-blue": $blue-100,
"cadet-blue" : $cadet-blue,
"aqua-10": $aqua-10,
"gray": $gray,
"gray-light": $gray-light,
"light-gray": $gray-100,
"bright-gray": $bright-gray,
"gray-200": $gray-200,
"clay": $clay,
"clay-10": $clay-10,
"mandy-pink": $mandy-pink,
"aqua": $aqua,
"violet": $violet,
"white": $white,
"primary": $primary-text-color
);
#each $color-name, $color-value in $colors {
.text-#{$color-name} {
color: $color-value !important;
}
.bg-#{$color-name} {
background-color: $color-value !important;
}
.border-#{$color-name} {
border-color: $color-value !important;
}
}
Problem is certain classes like .text-gray or .text-blue are not working. My guess is that since bootstrap also uses variables called gray and blue, its conflicting with my variables in _colors.scss.
On closer look, the css does gets generated properly (I found below declaration in final style.css):
.case-study .case-study-right .card .data-bar p:last-of-type,.share .social-media>span,.text-color-gray-200,.text-gray-200 {
color: #69727A!important
}
But using .text-gray has no effect, the class is not getting applied.
How do I fix this? please help!
First, if you're sure that you see the correct selector and the correct rule in your CSS file: it should be applied. And so, the rule should be visible in the browser console (even if overridden).
If you see it in your CSS file, but not applied in the browser console: check that your CSS file is valid (and that your gulp production script compiles fine), as a bad character could mess some part of it.
If you see your CSS in the browser console, but it's overridden by some bootstrap rules, you can override bootsrap variables, and change bootstrap colors by yours like so (import bootstrap before this):
$theme-colors: (
primary: #121212,
success: #8bcea8
...
);
You could also try this to replace bootstrap values by yours:
$theme-colors: map-merge($theme-colors, $colors);
The simple answer is:
Use Bootstrap 5 the intended way!
Bootstrap is a complex framework. All that huge number of classes work together including overwriting color settings if provided and used the intended way. In your code example you additional create helper classes Bootstrap would provide to you out of the box if you use it the Bootstrap way. As you did not do it leads to conflicts which are not easy to handle ... and nearly impossible to solve without to have the possibility to analyize the page itself.
This is what you may check:
You may check: are there other classes which blocks your classes?
In your example you use !important to get higher specifity. But the color is overwritten by other classes ...
Maybe that are Bootstrap which uses !important as well. In that case you can try to add your classes at the end of your CSS (after the Bootstrap classes) so they are able to overwrite in case of identical specifity.
Additional: in your example you added a huge bunch of non-bootstrap-classes. Maybe this individual added classes blocks your styling by adding a color with higher specifity (using !important as well which is not a good technique at all) to your element than your added class do.
In that case same solution may be possible ... but individual classes with !important and an additional higher specifity (i.e. using two class names in the selector) will win over your helper classes also your helper class comes later in your CSS file.
To be honest: most often analyzing such an huddle of classes indeed is only possible in the browser on the page direct using the developer tools.
But best way indeed would be ...
Do a correct Bootstrap theming and use Bootstrap classes!!!
You really don't need to create the helper classes on your own. Just do a SASS setup of Bootstrap ... and add your needed/additional colors NOT (or not only) to map $colors but AS WELL TO Bootstrap map $theme-colors. Bootstrap builds up helper-/utility-/elements-color-classes not on $colors but on $theme-colors. That means: doing that this intended way ... all your helper classes you added in your project on your own will be provided by Bootstrap mechanic in the correct order and avoiding conflicts to your CSS.
Use Bootstrap classes to style your page. Now you don't need to create an additional class .case-study { color: gray }. Just use the Bootstrap helper class and add .text-gray to same element. (Note: In your example you use the incredible number of NINE classes to do the same styling. In case 'text in cards' here is a nice hint how to realize it the bootstrap way: https://getbootstrap.com/docs/5.0/components/card/#border).
Just thinking about using complex Framework...
Bootstrap is done to help you. As there is a lot of code using that Framework only makes sense to use the code as much as possible without writing new classes. So best way indeed to work with it is to use the Bootstrap elements and styling them the Bootstrap way. That makes it simple and avoids conflicts... And: you are able to do nearly everything with these elements.
And if you need to extend Bootstrap i.e. with additonal classes: avoid (deep) nested classes and !important as well so you are able to overwrite settings with simple helper classes.
i had the similar problem it was my scss was successfully converted to the css but not applied, after checking for hours i found out ,i have written B capital while the class name was btn
so when everything is working then the problem is always in your code syntax!
I have a simple html page that i am creating and in my panels i need the headers to have different colors without hardcoding the colors myself with custom css.
Is there a dropin css file i can have that contains colors that i can use in place of
.success, .primary, .danger etc.
To make this even clearer, i want my panel headers and other components that can be styled with
.success, .primary, .danger to have other colors.
Has anyone come across such helper?.
Here you can customize color of css class.
For each element you can change default colors and download the package with your own graphic elements colors.
http://getbootstrap.com/customize
To make this even clearer, i want my panel headers and other components that can be styled with .success, .primary, .danger to have other colors.
If you want to style only some specific panel headers inside your site with the mentioned classes you must wrap these inside an outer class like so.
<div class="specific-headers">
<div class="success">
// ...
</div>
</div>
Then in the CSS file you can override them like this.
.specific-headers > .success {
color: ...,
background-color: ...
}
So you can design your page with the given classes but elsewhere the standard colors are taken.
If you would like all elements with these classes applied to have another color. Just override them directly.
.success {
color: ...,
background-color: ...
}
Be aware of including your own CSS files after the Twitter Bootstrap. Otherwise your customizations will be overwritten.
I have a simple html page that i am creating and in my panels i need the headers to have different colors without hardcoding the colors myself with custom css.
Why would you not want to hardcode the colors yourself. Somewhere you have to specify your colors. I recommend using SASS or LESS so you have the benefits of variables to specify your colors.
I have 2 icons - a filled thumbs-down (reject) and an unfilled thumbs-up (approve). I need to have both a thumbs up and down image which fills in on hover.
I am trying to use FontAwesome's flip CSS to achieve this. The icons themselves are from an iconfont generated using ico-moon and relate to classes .icon-approve and .icon-reject.
.icon-approve-hover-fill {
#extend .icon-approve;
}
.icon-approve-hover-fill:hover {
#extend .icon-reject;
#extend .fa-flip-vertical;
}
.icon-reject-hover-fill {
#extend .icon-approve;
#extend .fa-flip-vertical;
}
.icon-reject-hover-fill:hover {
#extend .icon-reject;
}
My issue is that for the reject-hover-fill case that the .icon-reject-hover-fill:hover is still flipping due to the .fa-flip-vertical; in the .icon-reject-hover-fill base class.
I need .icon-reject-hover-fill:hover to effectively be it's own class and not inherit the useless extra flip from .icon-reject-hover-fill. I assume there's a way to achieve this without me needing to re-create my font with flipped icons? I need it to work down to IE 8 and can be either basic CSS or SASS (though it needs to work with Sencha's flavour of SASS in ExtJS 6).
The .icon-reject-hover-fill:hover selector is stronger than .icon-reject-hover-fill. If .icon-reject-hover-fill has CSS properties you don't want when the element is hovered, just specify the desired value inside .icon-reject-hover-fill:hover{}, in your custom CSS.
However, instead of adding a class that has properties you want to unset, just create another class, of your own, that contains only the stuff you want from the class you are importing. Trying to unset properties that have been set is the fastest path to CSS mess-up, quickly escalating into code that is almost impossible to maintain.
The usual way to reset an already set property in CSS is {property-name: initial;}. Please note that not all CSS properties can take initial as value.
Is there a simple custom CSS for making all icons follow a certain theme color? I have seen the post for editing each icon individually but I am looking for a master one.
Yes, using CSS it's possible. Either give them all the same class which contains your custom styles or refer all the icons using their common ancestors.
Let's assume you have all icons inside an element of class element then you can define all the custom css for icons like:
.element i.fa{
/* Your custom styles */
}
Change i.fa to the concerned element if you have icons on different element other than i . Hope this helps.
Often templates, like those used for Bootstrap, have separate CSS files for different color themes.
These are merely overrides over the default colors.
blue.css, green.css, etc.
You could extend Kamlesh's answer by centralizing your color properties in a separate stylesheet that allows for abstraction of the "theme."
blue.css Example:
i.fa {
color: #0c9;
}
.inverse i.fa {
color: white;
}