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.
Related
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;}
After Googling on and on, I couldn't find a way to change table's border color. Is it even possible?
I think it depends on the artifact you are exporting to.
If you are exporting to html, you have to change the css style that is applied to the table. Either by changing the asciidoctor.css or by appling a different stylesheet with the :stylesheet: attribute (remember to overwrite with !important otherwise it will not be applied). You can modify the th and td tags of the table with border-color: 1px solid red, for example.
If you are exporting to pdf, you have to use a ...-theme.yml file which you have to specify with the :pdf-style: attribute. table_border_color is the key you are looking for (see also the asciidoctor theming guide).
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;
I'm just trying to familiarise myself with the new Susy Next options and I have my code:
.grid
+clearfix
clear: both
.grid__item
+gallery(1)
+rem(margin-bottom, 20px)
I want a 5 column grid inside .grid so that .grid__item's span 1 column in a gallery formation.
If I add +with-layout(5 1/4 fluid show background) inside .grid then I don't get the debug background output.
If I add +container(5 1/4 fluid show background) inside .grid then I get the background but the items don't span correctly as the context is not there.
Are there any docs on how to use +with-layout as I think that might solve it but can;t find anything on http://susydocs.oddbird.net/en/latest/install
I'm just after the best way to use Susy Next to solve this. I need .grid to contain 5 fluid columns with 1/4 gutters and to then allow me to span my .grid__item's based upon it. I also need to be able to output debug backgrounds on .grid.
I think my main issue is that I am getting confused between: +container, with-layout and how things roll in together. I have read the latest docs but it doesn;t quite click in my head.
Might just be me!
You need to establish your grid. with-layout is one way to do that for a small block of nested code, but why not just set them globally? There are several ways you could do it, all of them documented, but most likely you just want the layout() mixin:
// note that it isn't nested under anything.
+layout(5 1/4 fluid show background)
Now you have a global context, and you can build your grid:
.grid
+container
.grid__item
+gallery(1)
That's it. If you really just want the grid set for a small section of code, you can use with-layout. It works just like layout, but it only affects the code nested inside it.
// with-layout() for a nested code block:
+with-layout(5 1/4 fluid show background)
.grid
+container
.grid__item
+gallery(1)
I am using compass on my site, and have created a style such as:
#include background-image(linear-gradient(top, #C9C9C9, #FFF));
The problem is, this doesn't incluse a solid-color fallback for older IEs. Do I simply have to include a line like
background-color: #c9c9c9;
Or is there a way to have Compass handle this automatically for me?
As far as I know there is no way in Compass to have the background color automatically computed from a background-image declaration, because of the way it is built : you could have several gradients in there, and Compass can't really know which of all those colors is supposed to be the base one.
One way I advice is to create a gradient-wrapper like the following :
=gradient-horizontal($startColor: #555555, $endColor: #333333)
background-color: $endColor
background-color: mix($startColor, $endColor) // Second possibility
+filter-gradient($startColor, $endColor, horizontal)
+background-image(linear-gradient(left, $startColor, $endColor))