I'm a no expert in CSS, but have this task to increase font size on the site.
The site uses a downloaded CSS-theme. As I see there is a single file main.css which contains definitions of fonts. In other css-files font-size is set using percentages.
However, there are 102 matches for the word font-size in main.css itself, because it sets sizes for all possible html elements and their combinations, like
body { font-size: 13px; }
h1 { font-size: 32px; }
h1.smaller { font-size: 31px; }
h2 { font-size: 26px; }
and so on.
I am thinking to write a script that would extract values of font-size $1 and replace them with $1+1.
In a while, probably there is a more elegant solution? Maybe I can redefine font sizes some way using CSS itself?
I used the following PHP script to convert all font-size: [0-9]+px values into em:
<?php
$filename = "MyCss.css";
$css = file_get_contents($filename);
$css = preg_replace('/font-size\s*\:\s*([0-9]+)\s*px/ie', '"font-size: " . ($1/16) . "em"', $css);
file_put_contents($filename, $css);
Your example CSS above became:
body { font-size: 0.8125em; }
h1 { font-size: 2em; }
h1.smaller { font-size: 1.9375em; }
h2 { font-size: 1.625em; }
I'd then recommend setting a baseline font-size on the HTML element:
html { font-size: 16px; }
Then, if you want to globally affect all font sizes on the page, you can change this single value, and all fonts using em units will scale.
You could also use percentages if you'd rather, but em's are usually preferred.
(Sorry, Ruby is one of the few languages I don't know)
Related
In one file, I have typography.css:
.p.xl {
font-size: 1.375rem;
}
.p.lg {
font-size: 1.25rem;
}
.p {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem;
}
And in another file, I want to apply .p.lg to my .links:
.link {
#apply p lg;
}
The following code is generated and shipped to the front end:
.link {
font-size: 1.125rem;
}
Even if I change the order of lg and p and even if I inline it in the link itself with class="p lg".
Hell, even if I specify for the p styles to explicitly NOT target the lg elements it STILL generates the incorrect CSS:
Input:
.p.xl {
font-size: 1.375rem;
}
.p.lg {
font-size: 1.25rem;
}
.p:not(.xxl):not(.xl):not(.lg):not(.sm):not(.xs):not(.xxs) {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem;
}
Output:
.link:not(.xxl):not(.xl):not(.lg):not(.sm):not(.xs):not(.xxs) {
font-size: 1.125rem;
}
It's just stupidly copying and pasting the rest of the paragraph selector rather than running the selector logic and determining whether or not to apply the styles.
I have this exact same problem hundreds of times in my project with seemingly no solution other than to completely abandon Tailwind for half the project or to install tailwind-plugins and then enter every single combination of every class I want to apply in my tailwind.config.js.
Help is greatly appreciated. I've searched online for a while without finding anyone even having the same problem; I only found people who don't know how #apply works (well perhaps I'm one of them...). Thanks in advance.
UPDATE:
I also have:
.p {
#apply font-light;
}
.p.subheading {
#apply font-normal;
}
And of course the same issue with applying p subheading where it applies the wrong font weight and even using .p:not(.subheading) still generates the wrong styles. Will I really have no way whatsoever of styling p font-weights without also giving every single .p ANOTHER class to tell it to use one font weight? In other words, are default styles impossible?
UPDATE 2
Even when using !important it still fails to override...
.p {
#apply font-light;
}
.p.subheading {
#apply !font-normal;
}
and
.p.xl {
font-size: 1.375rem !important;
}
.p.lg {
font-size: 1.25rem !important;
}
.p {
font-size: 1.125rem;
}
.p.sm {
font-size: 0.875rem !important;
}
I STILL get the wrong font sizes and font weights generated:
.link {
font-size: 1.125rem;
}
.link {
font-weight: 300;
}
I'm currently setting my font-sizes like this to make it easier with calculations in REM values:
html { font-size: 62.5%; }
body { font-size: 1.6rem; } /* 16px */
However, Bootstrap 5 of course uses the root value (which would be 62.5%) to calculate all of the sizes. It does have variables like $font-size-root and $font-size-base and tried to play with those trying to get it to properly calculate things.
First I tried setting the root to the HTML value and the base to the body value, but that caused the wrong calculations and setting either the base or the root to 1.6rem or 1rem also caused the wrong output.
Does anyone know if it's possible to configure Bootstrap 5 to make it output a value matching with 32px (computed style) when I set this for example:
$h1-font-size: 3.2rem;
That way I could simplify the calculations a lot and Bootstrap would work with the same calculations as the rest of the CSS.
Thanks in advance for the suggestions! I tried a few searches here but couldn't find much related questions sadly
rem units are based on the font-size of the html element and the default size is 16px.
To achieve what you are doing, simple set the font-size: 10px to html. Example:
html { font-size: 10px; }
body { font-size: 1.6rem; } /* This will be 16px */
Now, doing it in Bootstrap 5 requires you to change the SCSS/CSS3 variable for body font-size. Below is an example of how to do it using CSS:
html { font-size: 10px; }
:root {
--bs-body-font-size: 1.6rem; /* Overwrite this variable */
font-size: var(--bs-body-font-size);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<html>
<body>
<p>This is 1.6rem or 16px.</p>
</body>
</html>
I've been looking at the code and documentation but I can't seem to be able to figure this out. Most content tags have a hard-coded font size to 1rem, which makes font size inheritance impossible.
This is the default CSS for Foundation:
https://github.com/zurb/bower-foundation/blob/master/css/foundation.css#L3481
/* Default paragraph styles */
p {
font-family: inherit;
font-weight: normal;
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.25rem;
text-rendering: optimizeLegibility; }
In an ideal scenario, if you set a container to have a font size of 20px, all content should inherit it and keep working from there - this should include paragraphs, lists, quotes, and the headings should use this as a base size.
This doesn't happen on Foundation, please see the following code snippet on JS Bin.
http://jsbin.com/muqij/1
The only way I've managed to make this work is by re-styling the font sizes to em and changing the container's size.
I would like to believe I'm missing something here.
Normally, you don't want inheritance of the font size because it leads to inconsistency and makes design noisy. Also it can entangle yours styles and markup in one big inflexible mess. Imagine alert box that looks different each time.
But if you really need such behavior you can edit settings with Sass version.
Since Foundation 5 encourages you to reset your styles for everything, I decided to fix this by using a CSS class that resets font-size inheritance.
I wish I didn't have to use this, but it's a good workaround. It resuses the SCSS variables from Foundation and converts all the REMs to EMs. So your fonts should scale accordingly where needed.
This snippet of code has been published as a Gist on GitHub.
https://gist.github.com/neojp/7f6f8e97ba7f0cbf3bd8
// Convert units
// Eg.
// font-size: convert-unit(16rem, em);
// >> font-size: 16em;
//
// font-size: convert-unit(16em, rem);
// >> font-size: 16rem;
//
// font-size: convert-unit(16em, px);
// >> font-size: 16rpx;
#function convert-unit($val, $unit) {
#return strip-units($val) + $unit;
}
// Bring back font-size inheritance for Foundation 5
// Add this class to the content container and change the font-size accordingly
// Eg.
// HTML markup
// <article class="MainContent u-textFormat">
// Font size with REM assuming html has a default font size of 16px
// .MainContent { font-size: 1.25rem; }
// or font size with pixels
// .MainContent { font-size: 20px; }
// Then all <p> tags would have a font-size of 20px;
.u-textFormat {
font-size: 1rem;
h1 {
font-size: convert-unit($h1-font-size, em);
}
h2 {
font-size: convert-unit($h2-font-size, em);
}
h3 {
font-size: convert-unit($h3-font-size, em);
}
h4 {
font-size: convert-unit($h4-font-size, em);
}
h5 {
font-size: convert-unit($h5-font-size, em);
}
h6 {
font-size: convert-unit($h6-font-size, em);
}
p {
font-size: convert-unit($paragraph-font-size, em);
}
ul,
ol,
dl {
font-size: convert-unit($list-font-size, em);
}
blockquote cite {
font-size: convert-unit($blockquote-cite-font-size, em);
}
table caption {
font-size: convert-unit($table-caption-font-size, em);
}
table thead tr th,
table thead tr td {
font-size: convert-unit($table-head-font-size, em);
}
table tfoot tr th,
table tfoot tr td {
font-size: convert-unit($table-foot-font-size, em);
}
table tr th,
table tr td {
font-size: convert-unit($table-row-font-size, em);
}
}
I would like to set up a responsive skin suing less. But I would like to use rems for mobile and px for desktop.
How do I do this?
Thanks
Since you are using less, you don't necessarily need to distinguish those, you can just use the fallback notation via a mixin:
// the size of your base element
#base-size: 16px;
div {
.font-size(18px);
}
.font-size(#size){
font-size: unit(#size,px);
font-size: unit(#size/#base-size,rem);
}
compiles to:
div {
font-size: 18px;
font-size: 1.125rem;
}
I noticed that some stylesheets have something like this:
body { font-size: 62.5%/1.2em; }
I got a warning "unexpected token /" when I wrote this in NetBeans. And if I changed the EM value, say,
body { font-size: 62.5%/1em; }
the computed font-size remained 16px.
My question is, Is it standard compliant to write something like that? And how to computed the actual font-size?
In CSS2, the font-size property does not allow a value of the form x/y.
What you're using is the font short hand property, which allows x/y as a short-hand of font-size: x; line-height: y;. So either use
body { font: 62.5%/1.2em sans-serif; }
/* ^^^^^^^^^^ the font-family is needed. */
or
body {
font-size: 62.5%;
line-height: 1.2em;
}