github/pure
1
Fork 0
mirror of https://github.com/pure-css/pure synced 2024-12-16 23:25:53 +01:00
Code Releases Activity

feat: remove font family hack (#1074)

Browse Source
This commit is contained in:
Nils K 2022-10-26 21:25:20 +03:00 committed by GitHub
parent c9bfd5f306
commit 6084e902e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 0 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
site/src/pages/grids/index.js
View File

@ -1,4 +1,3 @@
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import React from 'react';
import Layout from '../../theme/Layout';
@ -48,10 +47,6 @@ function Grids() {
</dd>
</dl>
<aside>
<p>When setting a <code>font-family</code> in your project, be sure to check out the section on <Link to="#using-grids-with-your-font-family">using Grids with your font-family</Link>.</p>
</aside>
<p>
Let's start with a simple example. Here's a grid with three columns:
</p>
@ -806,29 +801,6 @@ function Grids() {
Using <code>box-sizing: border-box</code> keeps your markup cleaner, but has one minor drawback. Setting this property on all grid units makes it harder to override or unset the value later on. As an unopinionated library, Pure lets <code>box-sizing</code> remain at the default value of <code>content-box</code> and leaves the choice up to you.
</p>
<SectionHeader heading="Using Grids with Your Font-Family" />
<p>
Pure Grids use a specific font stack to ensure the greatest OS/browser compatibility, and by default grid units will have <code>font-family: sans-serif;</code> applied — this is the default font stack Pure's Base (Normalize.css) applies to <code>&lt;html&gt;</code>, <code>&lt;button&gt;</code>, <code>&lt;input&gt;</code>, <code>&lt;select&gt;</code>, and <code>&lt;textarea&gt;</code> elements. Fortunately, it's quite easy to make sure your project's font stack applies to all content when using Pure. Instead of applying your <code>font-family</code> to only the <code>&lt;body&gt;</code> element, apply it like this:
</p>
<CodeBlock wrap={true}>
{stripIndent`
<style>
/*
When setting the primary font stack, apply it to the Pure grid units along
with "html", "button", "input", "select", and "textarea". Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */
font-family: Georgia, Times, "Times New Roman", serif;
}
</style>
`}
</CodeBlock>
<SectionHeader heading="Want to just use Grids?" />
<p>

49
src/grids/css/grids-core.css
View File

@ -1,28 +1,6 @@
/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/
.pure-g {
letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */
/*
Sets the font stack to fonts known to work properly with the above letter
and word spacings. See: https://github.com/pure-css/pure/issues/41/
The following font stack makes Pure Grids work on all known environments.
* FreeSans: Ships with many Linux distros, including Ubuntu
* Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
Arial to get picked up by the browser, even though neither is available
in Chrome OS.
* Droid Sans: Ships with all versions of Android.
* Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
*/
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
/* Use flexbox when possible to avoid `letter-spacing` side-effects. */
display: flex;
flex-flow: row wrap;
@ -30,34 +8,7 @@
align-content: flex-start;
}
/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
table .pure-g {
display: block;
}
}
/* Opera as of 12 on Windows needs word-spacing.
The ".opera-only" selector is used to prevent actual prefocus styling
and is not required in markup.
*/
.opera-only :-o-prefocus,
.pure-g {
word-spacing: -0.43em;
}
.pure-u {
display: inline-block;
letter-spacing: normal;
word-spacing: normal;
vertical-align: top;
text-rendering: auto;
}
/*
Resets the font family back to the OS/browser's default sans-serif font,
this the same font stack that Normalize.css sets for the `body`.
*/
.pure-g [class *= "pure-u"] {
font-family: sans-serif;
}