I am currently working on a react project which uses DSM invision for the UI design, basicly, DSM provides a css file '_style-params' which contains style variables.
--color-primary: #00a2ff;
--color-secondary: #6c757d;
--color-success: #28a745;
--color-danger: #dc3545;
for this kind is easy to understand and use, i can just import the css file into my main css file and write:
background-color:var(--color-primary);
However, when it comes to font, I have some question:
below is from _style-params.css:
/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 16px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: Roboto;
--font-button-fonts-default-5-warning: {
font-size: var(--font-button-fonts-default-5-warning-font-size);
line-height: var(--font-button-fonts-default-5-warning-line-height);
text-align: var(--font-button-fonts-default-5-warning-text-align);
color: var(--font-button-fonts-default-5-warning-color);
letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
font-style: var(--font-button-fonts-default-5-warning-font-style);
font-weight: var(--font-button-fonts-default-5-warning-font-weight);
font-family: var(--font-button-fonts-default-5-warning-font-family);
};
Am I able to just use following varible (which is a object)
var(--font-button-fonts-default-5-warning)
I dunno which property to use this variable, i tried following:
font:var(--font-button-fonts-default-5-warning)
which is not working (obviously).
So, am I able to use this object CSS varible?
or I have to use the individual variables?
There is no object concept in CSS variables. You need to use them individually but you can also combine them in the same variable that you can use later relying on the shothand notation of properties.
Example:
:root {
/* button fonts/default/5-warning font style */
--font-button-fonts-default-5-warning-font-size: 30px;
--font-button-fonts-default-5-warning-line-height: 14px;
--font-button-fonts-default-5-warning-text-align: center;
--font-button-fonts-default-5-warning-color: #f0ad4e;
--font-button-fonts-default-5-warning-letter-spacing: 0.2px;
--font-button-fonts-default-5-warning-font-style: normal;
--font-button-fonts-default-5-warning-font-weight: 400;
--font-button-fonts-default-5-warning-font-family: "Roboto";
--font-button-fonts-default-5-warning:
var(--font-button-fonts-default-5-warning-font-style)
var(--font-button-fonts-default-5-warning-font-weight)
var(--font-button-fonts-default-5-warning-font-size)/
var(--font-button-fonts-default-5-warning-line-height)
var(--font-button-fonts-default-5-warning-font-family);
}
.warning {
font:var(--font-button-fonts-default-5-warning);
color: var(--font-button-fonts-default-5-warning-color);
letter-spacing: var(--font-button-fonts-default-5-warning-letter-spacing);
text-align:var(--font-button-fonts-default-5-warning-text-align);
}
<p>text here</p>
<p class="warning">text here</p>
We can use almost all the values inside font but not color, letter-spacing and text-align that you need use them individually.
Related
I got some example CSS code (well written and working) with many span statements inside, that I modified for my use. What exactly they do? VS Code shows me as an error, but browsers don't complain, and I couldn't find any references in the CSS documentation, as if this syntax does not exist.
Example:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
}
VS code complains:
"code": "css-colonexpected",
"severity": 8,
"message": "colon expected",
"source": "css",
If I add colon it would be suggesting keys right away, and would not accept anything in curly brackets{}
Thanks
the brackets { and } define scope so that
body {
color: #000;
}
Would define that the color (text color) of the body element type (css query selector) would be #000 (which is hex for black)
however, if you have an element in an element like this using a precompiler such as less for css using the less syntax.
body {
color: #000;
span {
color: #FF0000;
}
}
this would do as the previous css did, but in less you can create a hierarchy
the body's color will be set to black as before.
and then any span child of the body element will have its color set to red (#FF0000)
CSS/LESS are used in conjunction with the HTML DOM object model.
You're correct that this syntax doesn't exist for CSS, as it doesn't support nested selectors like this.
The correct syntax would be:
h2 {
letter-spacing: 2vw;
font-size: 2vw;
font-weight: bold;
text-align: center;
}
h2 span {
display: block;
font-size: 8vw;
letter-spacing: -1vw;
}
This syntax is of course perfectly acceptable if you use a CSS preprocessor, like SASS or LESS for example. CSS preprocessors compile CSS written like you've done into standard CSS syntax, and add extra functionality, like using variables and conditional statements.
I think that modern browsers are probably capable of understanding syntax like this in certain situations, but if you want to use to this sort of syntax then using a preprocessor is a safer option to avoid errors.
I am using Inter font in my vue-vuetify project. I wanted to know that is there any way through which I can use the Inter font classes in my project directly?
Thin, Extra-light, light, medium, etc. are the classes available in Inter font. How to use these classes in my project directly?
Please refer this link for more
https://fonts.google.com/specimen/Inter?selection.family=Inter:wght#100
How can I apply any class for example Thin in my project?
Currently, I am doing this by declaring CSS in my project and setting the font-weight property as per each and every class.
But, it isn't the same as these classes.
For example, I have declared a css class namely
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 23px;
font-weight: 100;
}
Which has the same class as of Inter Regular. Is this approach correct or any other way is possible?
Which has the same class as of Inter Regular. Is this approach correct or any other way is possible?
I think a good approch would be to create a base class for Inter Regular like:
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 23px;
font-weight: 400;
}
and a thin class modifier for it, just to update the font-weight like:
.headline-5.thin {
font-weight: 100;
}
Then you can use Regular and Thin font versions in any place you like:
#import url('https://fonts.googleapis.com/css2?family=Inter:wght#100;400&display=swap');
.container {
font-family: 'Inter', sans-serif;
}
.headline-5 {
letter-spacing: 0.46px;
color: #000000;
opacity: 1;
font-size: 30px;
font-weight: 400;
}
.headline-5.thin {
font-weight: 100;
}
<div class="container">
<p class="headline-5 thin">Almost before we knew it, we had left the ground.</p>
<p class="headline-5">Almost before we knew it, we had left the ground.</p>
</div>
This question already has answers here:
Do custom CSS properties use one leading dash or two?
(2 answers)
Is there a difference between CSS custom properties and CSS variables?
(4 answers)
How do CSS custom properties cascade?
(1 answer)
Closed 4 years ago.
I recently came across the website StuffAndNonsense.co.uk, which is a personal site for the digital designer Andy Clarke. I was astonished by it, using webpage technologies I didn't even know existed.
I looked into the styles and found this bit:
:root {
--font-family: tondo_rg,sans-serif;
--font-family-light: tondo_lt,sans-serif;
--font-family-bold: tondo_bd,sans-serif;
--font-weight: 400;
--font-size-xxx-display: 8vmin;
--font-size-xx-display: 4.11rem;
--font-size-x-display: 3.653rem;
--font-size-display: 3.247rem;
--font-size-xxxx-large: 2.887rem;
--font-size-xxx-large: 2.027rem;
--font-size-xx-large: 1.802rem;
--font-size-x-large: 1.602rem;
--font-size-large: 1.424rem;
--font-size-medium: 1.266rem;
--font-size: 1.125rem;
--font-size-small: 1rem;
--font-size-x-small: .889rem;
--font-size-xx-small: .79rem;
--lineheight-text: 1.5;
--lineheight-heading: 1.3;
--color-background: #fff;
--color-background-selection: #f0f2f3;
--color-border: #cacfd5;
--color-text-default: #0b1016;
--color-text-alt: #95a0ac;
--color-base: #f4f5f6;
--color-accent: #ba0d37;
--color-logo-enamel: #ba0d37;
--color-logo-highlight: #fdfdfd;
--color-logo-metal: #cacfd5;
--color-logo-lettering: #fff;
--color-logo-type: #0b1016;
--color-text-link: #2c4159;
--color-text-link-active: var(--color-text-link);
--color-text-link-focus: var(--color-text-link);
--color-text-link-hover: var(--color-accent);
--color-text-link-visited: var(--color-text-link);
--color-button-default: #2c4159;
--color-button-alt: #243449;
--color-button-border: #8586a4;
--color-button-shadow: #ecedee;
--border-radius-x-small: .25rem;
--border-radius-small: .5rem;
--border-radius-medium: .75rem;
--border-radius-large: 1rem;
--border-radius-circle: 50%;
--border-width-hairline: .5px;
--border-width-thin: 1px;
--border-width-thick: 2px;
--grid-gap: 4vw;
--max-width: 92rem;
--spacing-xx-small: .125rem;
--spacing-x-small: .25rem;
--spacing-small: .5rem;
--spacing: .75rem;
--spacing-medium: 1rem;
--spacing-large: 1.5rem;
--spacing-x-large: 2rem;
--spacing-xx-large: 3rem;
--duration-instantly: 0;
--duration-immediately: .1s;
--duration-quickly: .2s;
--duration-promptly: .5s;
--duration-slowly: 1s;
}
I was... confused to say the least. Not only had I never seen CSS properties prefixed by --, but I'd never seen stuff like font-size-xx-large: 1.802rem;. What is this doing? I tried Googling (and even Binging) it to no avail.
These properties are CSS Variables. You can see more on CSS variables here: https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables Here's an example of how to access CSS variables:
element {
background-color: var(--main-bg-color);
}
The reason they are in something called root: The :root selector allows you to target the highest-level "parent" element in the DOM, or document tree.
Variables in CSS starts with "--" which are case sensitive
:root is used to define global scope which is similar to defining for body selector
:root {
--font-size-xx-large: 16px;
--font-size-xx-small: 12px;
}
For referencing that variable, we need to use var() function
p {
font-size: var(--font-size-xx-large);
}
div{
font-size: var(--font-size-xx-small);
}
Note: Currently it is not supported by all browsers
Check compatibility details here - https://caniuse.com/#feat=css-variables
code sample for reference - https://codepen.io/nagasai/pen/aYmPYv
:root {
--font-size-xx-large: 16px;
--font-size-xx-small: 12px;
}
p {
font-size: var(--font-size-xx-large);
}
div{
font-size: var(--font-size-xx-small);
}
<p>Paragraph font size large 16px</p>
<div>Div font size small 12px</div>
I have a .tintTile that depends on parent, hence the & sas follows:
// Tint titles
.tintTitle {
text-transform: uppercase;
font-family: #fontDemiBold;
color: #colorOrangeKWS;
.Windows7 & {
font-family: arial, sans-serif;
font-weight: bold;
color: #colorOrangeKWS;
}
}
In many others classes, I use the .tintTitle as follows:
// titles, orange bold
.tab {
&>div {
.tintTitle;
// etc.
}
}
Unfortunately, I can't achieve the .Windows7 (provided the fact Windows7 is a class set to the body tag as follows:
<body class="Windows7">
<p class="tintTitle">Good, it works</p>
<div class="tab">
<div>This title doesn't make it</div>
Is there a way to achieve my goal with less beside duplicating every .tintTitle where it's required?
As far as i understand your question your code should work in Less, see http://codepen.io/anon/pen/KwNWmq
Less code:
// Tint titles
.tintTitle {
text-transform: uppercase;
color: green;
.Windows7 & {
text-transform: initial;
color: red;
}
}
.tab {
&>div {
.tintTitle;
// etc.
}
}
Your are using the parent selectors feature of Less to change the selector order
The only thing you should notice will be that properties set for your (not having .windows) will be also applied for your .windows selectors. That's why i have to set text-transform: initial;, otherwise the .windows * also get uppercased cause the also match .tintTitle.
I want, very strongly, to avoid littering my markup with non-sematic <i> tags and am attempting to use the icon-* CSS classes on other elements, such has headers, the primary use case.
I have the following markup:
<div class="box-header">
<h2><i class="icon-list-ul"></i><span class="break"></span>Unordered List</h2>
</div>
<div class="box-header">
<h2 class="icon-list-ul">Unordered List</h2>
</div>
The first is the original markup, the second is my desired markup. Rendered, they look like:
I'll worry about the divider later. Note, however, the difference in 'boldness' of the text. I notice that Font Awesome by default applies its font (and some other properties) to anything with a CSS class matching icon-*, and my first attempt to correct the problem revolved around changing this css:
[class^="icon-"],
[class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
Into the following to ensure the the font selection is only applied to the :before icon content:
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
Now I have a different problem, as can be shown in the following screenshot:
While the font weight is back to the normal (thin) value, the alignment of the text has shifted down substantially, both for the standard markup and my desired markup cases. What's going on here, and how can I use the icon-* classes on arbitrary elements without those elements own formatting getting out-of-wack?
Thanks for any assistance you can offer!
As this has lingered for a long time, I'll post a self-answer pointing out the methodology I utilize these days, which involves a SASS/SCSS mix-in.
Basically, follow the methodology of FontAwesome itself, with the exception that instead of populating a bajillion generic CSS classes for use with non-semantic <i> (italic) tags, populate the SCSS variables for each character, and dynamically apply via #include to the specific elements you wish to have icons applied to.
From the gist example, to automatically apply social media icons to links onto those platforms unless otherwise disabled, you can:
a:not(.no-icon) {
&[href^="https://twitter"],
&[href^="https://www.twitter"] { #include icon($icon-twitter-square, false, true) { margin: 0; }; }
&[href^="https://facebook.com"],
&[href^="https://www.facebook.com"] { #include icon($icon-facebook-square, false, true) { margin: 0; }; }
&[href^="https://linkedin.com"],
&[href^="https://www.linkedin.com"] { #include icon($icon-linkedin-square, false, true) { margin: 0; }; }
&[href^="https://youtube.com"],
&[href^="https://www.youtube.com"] { #include icon($icon-youtube-square, false, true) { margin: 0; }; }
}
Have login / log out links?
&[href$="/account/authenticate"] { #include icon($icon-sign-in, false, true) { margin: 0; }; }
Want icons defined in the HTML markup? Okay!
[data-icon] {
padding-left: 3.5em;
position: relative;
vertical-align: middle;
#include icon(attr(data-icon)) {
margin-left: -3.5em;
width: 3.5em;
text-align: center;
}
}
The difference in boldness comes down to alternate font-smoothing being applied. Forcing -webkit-font-smoothing: antialiased and -moz-osx-font-smoothing: grayscale help to mitigate.
your content inside of <h2 class="icon-list-ul"> will be affected by the awesomefont setting in [class*=" icon-"] ....
If you want to use different font styles for h2-tags and before-elements,
just keep [class*=" icon-"]:before and delete [class*=" icon-"]