I want my grid to have 24 columns within a row of 1320px. I also want to have my default (body) font size set to 22px. Let me show you how I can do this easily with SASS/SCSS and Zurb Foundation... Wait, what?
Not easy. It's basically not possible to set the 'default' font-size to a different value other than rem-base without breaking the grid. If $rem-base: 16px and $base-font-size: 100% everything works fine – I just want bigger fonts. If $rem-base: 16px and $base-font-size: 22px the grid is calculated to have 1815px instead of 1320px. Sure, because setting html font size sets the rem unit and everything other font-size refers to rem.
Changing lines 345, 346 at _global.scss (V 5.2.1) and setting them to different vars like this
html { font-size: $rem-base; }
body { font-size: $base-font-size; }
doesn't affect font sizes for p, ul, etc.
So the question persists: how do I get a 1320/24 grid with 22px base size using Foundation5 SCSS?
Cheers
According to the _settings.scss file 'If you want your base font-size to be different and not have it affect the grid breakpoints, set $rem-base to $base-font-size and make sure $base-font-size is a px value.'
So that's what I've done and the font size increases, but the grid stays the same (although you will need to move the $rem-base so it's AFTER the $base-font-size.)
So it goes from:
// This is the default html and body font-size for the base rem value.
$rem-base: 16px;
$base-font-size: 100%;
To:
// This is the default html and body font-size for the base rem value.
$base-font-size: 22px;
$rem-base: $base-font-size;
It's not something I've done before but hopefully it helps you!
If you need to change the $base-font-size while keeping the grid stuff as it is, you have to set $base-font-sizeand $rem-base to the same value. There is no need to change the lines in the standard foundation _settings.scss.
E.g.
// This is the default html and body font-size for the base rem value.
$rem-base: 14px;
// Allows the use of rem-calc() or lower-bound() in your settings
#import 'foundation/functions';
// The default font-size is set to 100% of the browser style sheet (usually 16px)
// for compatibility with browser-based text zoom or user-set defaults.
// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
// If you want your base font-size to be different and not have it affect the grid breakpoints,
// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
$base-font-size: $rem-base;
Related
I need to create PDF’s based on designs from Sketch.com, where dimensions like font sizes and positions are given in pixels, and it seems to be using the standard resolution of 72dpi (A4 being 595×842).
It seems that WeasyPrint uses 96dpi for sizes given in pixels, when generating PDF’s.
The command-line API documentation indicates that there is a resolution parameter, but it only applies for PNG (and appears to be deprecated).
I see there is also a zoom parameter in the python API but it does not seem to be available in command-line, and anyway that would break dimensions given in physical units like cm and also my target page size, A4.
So how do I set the resolution to 72dpi? Or should I convert all units instead, applying a 4/3 factor on them?
I found a workaround inspired by the 62.5% font-size CSS trick – make 1rem in WeasyPrint = 1px in Sketch:
html {
/*
Make 1px on Sketch = 1rem in pdf
Normally we should set font-size: 1px, but we multiply by 4/3
as we are in 96dpi instead of the 72dpi from Sketch.
*/
font-size: 1.3333px;
}
body {
/* restore a decent default font-size */
font-size: 10rem;
}
After that I can use rem everywhere I would normally use px.
For people who prefer to keep the more usual 1rem = 10px, just multiply the html font-size by 10 above, or use font-size = 83.333% (i.e. 62.5% * 4/3).
I have an interactive grid and want to increase the default font size.
The column headers shall remain as it is, just the data in the cells inside the grid need to be changed.
Apex version is 20.2
navigate to page's property palette
find the Inline CSS property
put this into it:
.a-GV-cell
{ font-size: 30px !important;
}
run the page
Of course, modify font size to any value you find appropriate; 30px is just an example.
The default styling of FilePond elements imported from the default css seems a bit small. Is there a recommended way to get to the size as seen in the examples at https://pqina.nl/filepond/?
It seems the default style in the css uses font-size of 10px.
By default the font-size of the FilePond root element is set to 1rem.
You can scale it up or down by setting a different size.
.filepond--root { font-size: 1.25rem; }
Use em instead of rem if you want to scale FilePond relatively to its parent element.
I'm just coming across this.
if you using Filepond in a nextjs project and you're finding it difficult to apply a font-size to your Filepond component. simply add the default Filepond css to your global.css style and customize it.
for example ///global.css
.filepond--root{font-size: 10px;}
I'm using Sphinx to generate documentation which uses reStructured Text as it's markup. However, when I use some inline formatting to make text show up in a fixed width font --no-cache the rendered HTML shows the text in a smaller font.
How do I increase the fixed-width font size in Sphinx / reStructured Text so it matches the normal text font-size?
Answer
With Chris's help I was able to override the default font style in the CSS to increase the fixed-width font size:
Edit conf.py to specify html theme and css file:
html_theme = 'default'
html_style = 'overrides.css'
Next, I created a new css file static/overrides.css with the following contents:
#import url("default.css");
tt {
font-size: 130%;
}
I selected to use 130% because default.css defines this:
div.body p, div.body dd, div.body li {
text-align: justify;
line-height: 130%;
}
And now I get fixed width text matching the regular text in the generated html.
You can edit the CSS stylesheet for whichever theme you are using. For example, for the default theme, you can edit the default.css_t file. Specifically you can specify an increased font-size (for example, use font-size: 1.1em or similar) in the pre rule on line 274.
I'd like to store the current value of a property for later use. It's already been solved for jQuery.
The issue is that I'm using a #mixin to apply a CSS hack in several places (Justified Block List) and I'd like to restore the font-size property in .block-list * (currently all text in sub-elements is just collapsed).
Unsatisfactory workarounds:
Save the global default font size in a separate file and pass it to the #mixin on #import. This is of course in the general case not the same font size as the objects which the mixin is applied to.
Save the font size whenever you change it, and pass that. This tangles up the files involved, since it's not very elegant to #include the typography stylesheet in several otherwise unrelated files.
Use more jQuery.
Possibly satisfactory workarounds:
Override the font size with a stronger rule on the first ancestor which changes it. This could be tricky to determine.
There's no way to tell the computed value of a property until the styles are actually applied to a document (that's what jQuery examines). In the stylesheet languages, there's no "current" value except the initial value or the value you specify.
Save the font size whenever you change it, and pass that seems best, and #BeauSmith has given a good example. This variant lets you pass a size or fallback to a defined global:
=block-list($font-size: $base-font-size)
font-size: 0
> li
font-size: $font-size
If you have a mixin which is doing something "hacky" with the font size, then you will probably need to reset the font size as you have noticed. I suggest the following:
Create a Sass partial to record your projects config variables. I suggest _config.sass.
Define your base font-size in _config.sass:
$base-font-size: 16px
Add #import _config.sass at the top of your main sass file(s).
Update the mixin to reset the font-size to your $base-font-size:
#mixin foo
nav
font-size: 0 // this is the hacky part
> li
font-size: $base-font-size // reset font-size
Note: If you are using the SCSS syntax, you'll need to update the examples here.