Is there a way to setup a CSS baseline grid (vertical rhythm) that doesn't fall apart if a heading ends up going on multiple lines?
Yes, I have a method. It takes some CSS + Markup + Utility font.
Here is a codepen of a working solution with multiple blocks, font-sizes and fonts:
https://codepen.io/shalanah/pen/RyEOEO
You can add as many characters as you'd like to the example posted and below and it will work.
Example Markup
<h1><span>Heading One</span></h1>
<p><span>Paragraph</span></p>
Example CSS
:root {
--grid: 20; /* Vertical rhythm */
}
/* 1. Include a baselined font - This font is exactly 1em tall with no metrics below the baseline */
#font-face {
font-family: "Baseline Em";
src: url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff2") format("woff2"),
url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.woff") format("woff"),
url("https://rawgit.com/shalanah/baseline/98e925b/BaselineEm/baselineem-webfont.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}
/* 2. Setting block elements up */
h1, p {
font-family: "Baseline Em"; /* Baselined font only needed at block level */
line-height: 1em;
}
/* 3. Ignore inline line-heights */
h1 *, p * {
line-height: 0;
}
/* 4. Leadings and margins */
h1 {
font-size: calc(var(--grid) * 4px); /* mult of grid - our leading */
margin-bottom: calc(var(--grid) * 3px);
margin-top: calc(var(--grid) * 3px);
}
p {
font-size: calc(var(--grid) * 2px); /* mult of grid - our leading */
margin-bottom: calc(var(--grid) * 1px);
}
/* 5. Inline styles, lots of freedom, don't need to be multiples of grid */
h1 > span {
font-size: 100px;
font-family: Arial; /* Any font you want */
}
p > span {
font-size: 22px;
font-family: Arial; /* Any font you want */
}
Most of the time leading isn't worth the time it takes to implement. I came up with this solution because I absolutely needed it. I wish that we had a leading property in CSS that we could use instead of line-height since line-height is a web-only invention.
Related
I've recently stumbled across tips on using calc() to make font-size more responsive. It's quite simple and as far as I can see well supported by browsers (IE needs a bit of love as always).
body {
background-color: #434343;
color: #eee;
font-family: 'Roboto Slab';
}
.container {
padding: 4vw;
}
h1 {
font-size: calc(24px + 3vw);
}
h2 {
font-size: calc(20px + 3vw);
}
h3 {
font-size: calc(16px + 2vw);
}
p {
font-family: Roboto;
font-size: calc(12px + 1vw);
}
p.hammer {
font-size: calc(12px + 1.5vw);
}
<div class="container">
<h1>This is my main header</h1>
<h2>This is my subheader</h2>
<h3>This is my section header</h3>
<p class="hammer">This is my intro hammer. Wooo.</p>
<p>This is just a normal paragraph. Calc() is fun and by combining px and vw we can have neat responsive font sizes without too many media queries.</p>
<p>To see this applied to a dummy article click here (Opens a new Pen)</p>
</div>
Note Resize screen to see it in action.
Trick has apparently been around since 2012. However I almost never see this in live sites.
From my perspective it saves a lot of trouble with media queries and reduces CSS.
Is there a downside to this approach that I'm missing, since I almost never see it used?
Have a look at https://www.smashingmagazine.com/2016/05/fluid-typography.
I made a demo based on the Smashing Magazine article using CSS Custom Properties (CSS Variables) to easily control the min and max font sizes.
Like so:
* {
/* Calculation */
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}
h1 {
--max-size: 50;
--min-size: 25;
font-size: var(--responsive);
}
h2 {
--max-size: 40;
--min-size: 20;
font-size: var(--responsive);
}
I am using the ResponsableCSS (.com) grid for LESS.
It all works great, the only problem I have is that I can't amend the gutter widths so that if I have the following: -
Two divs side by side split into 2 columns using: -
header {
div {
.column(6);
}
}
The overall grid is 12 divided by 6 = 2
But I want to show the divs side by side with no gutter on the left on the first element and no gutter on the right on the second element.
This would enable me to have 2 elements side by side with a gutter in the middle, as opposed to what I have now: -
http://s13.postimg.org/xnh8sy40n/Untitled_2.png
Heres my full LESS file, any help would be appreciated, I don't think Responsable allows for this out of the box: -
/**
* Responsable Grid System
*/
/* ========================================================== */
/* = Site Variables = */
/* ========================================================== */
/* Grid options */
#gutter_width: 18px; // Your gutter width
#columns: 12; // The amount of columns you want
#max_width: 960px; // Set a maximum width of the site
// Half the gutter for borders, margin, padding etc
#gutter: #gutter_width*0.5;
/**
* Baseline
*
* Common settings for this:
*
* 100% for 16px font and 24px baseline.
*
* 75% for 12px font and 18px baseline.
*
*/
#baseline: 100%;
/* Font variables */
#body_color: #333;
#heading_color: #111;
#body_family: "Open Sans", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
#heading_family: "Open Sans Condensed", "Helvetica Neue", Arial, Helvetica, Sans-Serif;
/* Link colors */
#link: #6bac60;
#link_hover: #78aace;
/* Select colors */
#select: #78aace;
#select_color: #fff;
/* Default Colors */
#grey_light: #ddd;
#grey_regular: #ccc;
#grey_dark: #666;
#green: #6bac60;
/* ========================================================== */
/* = Import normalize baseline and grid = */
/* ========================================================== */
#import "normalize.less";
#import "baseline.less";
#import "grid.less";
/* ========================================================== */
/* = Your custom styles go here = */
/* ========================================================== */
.wrapper {
max-width: 960px;
margin: 0 auto;
}
header {
.clearfix();
.column(12, 0);
div {
.column(6);
}
}
#media screen and (max-width: 520px){
}
When you inspect the .column mixin in the grid.less file of the Responsable-Framework you will find that each column got a padding on each side of half size the gutter-width.
Notice that the grid uses box-sizing: border-box see also Why did Bootstrap 3 switch to box-sizing: border-box?
leveraging the .column mixin you can set the second argument to 0 to remove the padding (gutter):
header {
div {
.column(6,0);
}
}
The above also removes the gutter between you div elements, to remove the gutter only on the borders of the grid you can use the following Less code:
header {
div {
.column(6);
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
}
}
This question already has answers here:
Import regular CSS file in SCSS file?
(15 answers)
Closed 6 years ago.
I'm new to sass and I'm trying to import a parent theme's css in a Magento application.
I have it working to an extent but not with the result I was expecting.
In my styles.scss folder I have:
#import "../../../rwd/default/css/styles.css";
I have run the sass --watch styles.scss:styles.css in the terminal and the resulting styles.css file has:
#import url(../../../rwd/default/css/styles.css);
In the sass guide it says:
CSS has an import option that lets you split your CSS into smaller,
more maintainable portions. The only drawback is that each time you
use #import in CSS it creates another HTTP request. Sass builds on top
of the current CSS #import but instead of requiring an HTTP request,
Sass will take the file that you want to import and combine it with
the file you're importing into so you can serve a single CSS file to
the web browser.
So I was expecting SASS to import the css as plain old css rules rather than using the #import rule, so my styles.css would look something like:
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/*
* Corrects `block` display not defined in IE 8/9.
*/
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
display: block;
}
/*
* Corrects `inline-block` display not defined in IE 8/9.
*/
audio,
canvas,
video {
display: inline-block;
}
/*
* Prevents modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0;
}
/*
* Addresses styling for `hidden` attribute not present in IE 8/9.
*/
[hidden] {
display: none;
}
/* ==========================================================================
Base
========================================================================== */
/*
* 1. Sets default font family to sans-serif.
* 2. Prevents iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */
}
/*
* Removes default margin.
*/
body {
margin: 0;
}
/* ==========================================================================
Links
========================================================================== */
/*
* Addresses `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted;
}
/*
* Improves readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0;
}
/* ==========================================================================
Typography
========================================================================== */
/*
* Addresses `h1` font sizes within `section` and `article` in Firefox 4+,
* Safari 5, and Chrome.
*/
h1 {
font-size: 2em;
}
/*
* Addresses styling not present in IE 8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted;
}
/*
* Addresses style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold;
}
/*
* Addresses styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic;
}
/*
* Addresses styling not present in IE 8/9.
*/
mark {
background: #ff0;
color: #000;
}
/*
* Corrects font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-family: monospace, serif;
font-size: 1em;
}
/*
* Improves readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word;
}
/*
* Sets consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019";
}
/*
* Addresses inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%;
}
/*
* Prevents `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
That way I would have a styles.css on production which didn't use the #import rule.
I got it to work by following this article:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import
#import by default looks for a Sass file to import directly, but if the is a .css file or if the filename is a url it will compile to a CSS #import rule. Both of which were the case for me.
So my solution was to copy the css file I wanted to import & rename it rwd_styles.scss & changed my scss import rule to #import "rwd_styles.scss"; and it worked as I had hoped.
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);
}
}
Here are the header sizes from bootstrap.css:
h1 {
font-size: 38.5px;
}
h2 {
font-size: 31.5px;
}
h3 {
font-size: 24.5px;
}
I was surprised by the fact that these sizes are fractional (half-integers), which suggests that their precision is at least 0.25px (less than 1%).
How do web designers arrive at such sizes? Are they obtained by some scientific process, some calculation perhaps? Or do people simply stare at their site, playing with sizes until it feels right? How can a designer convince his teammate that it really ought to be 31.5px and not just 31px?
They haven’t exactly specified font size 31.5px, instead they specified base font size and coefficients for headings, see code:
// file: variables.less
#baseFontSize: 14px;
// file: type.less
h1 { font-size: #baseFontSize * 2.75; } // ~38px
h2 { font-size: #baseFontSize * 2.25; } // ~32px
h3 { font-size: #baseFontSize * 1.75; } // ~24px
h4 { font-size: #baseFontSize * 1.25; } // ~18px
h5 { font-size: #baseFontSize; }
h6 { font-size: #baseFontSize * 0.85; } // ~12px
Users of bootstrap are free to customize base font size, if they want to, in their custom builds; font size in heading will change automatically and proportionally, that’s the point.