From 6fa87432b0c246bfa4f321c27060d0aa5101e2c8 Mon Sep 17 00:00:00 2001 From: Septatrix <24257556+Septatrix@users.noreply.github.com> Date: Sun, 23 Oct 2022 16:36:38 +0300 Subject: [PATCH 1/3] Remove the font-family hack for grids (fixes #379) Setting font-family and letter spacing was required for IE and some other ancient browsers. These are no longer supported, thus we can remove the hacks. --- src/grids/css/grids-core.css | 49 ------------------------------------ 1 file changed, 49 deletions(-) diff --git a/src/grids/css/grids-core.css b/src/grids/css/grids-core.css index 9f5682ab0..950c7cf50 100644 --- a/src/grids/css/grids-core.css +++ b/src/grids/css/grids-core.css @@ -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; } From bb6b5fd3fd7173b4b817d912b529360570f2cb64 Mon Sep 17 00:00:00 2001 From: Septatrix <24257556+Septatrix@users.noreply.github.com> Date: Sun, 23 Oct 2022 16:39:43 +0300 Subject: [PATCH 2/3] Drop doc sections about grid font stack --- site/src/pages/grids/index.js | 27 --------------------------- 1 file changed, 27 deletions(-) diff --git a/site/src/pages/grids/index.js b/site/src/pages/grids/index.js index 1466aa3fe..4e9f28cf8 100644 --- a/site/src/pages/grids/index.js +++ b/site/src/pages/grids/index.js @@ -48,10 +48,6 @@ function Grids() { - -

Let's start with a simple example. Here's a grid with three columns:

@@ -806,29 +802,6 @@ function Grids() { Using box-sizing: border-box 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 box-sizing remain at the default value of content-box and leaves the choice up to you.

- - -

- Pure Grids use a specific font stack to ensure the greatest OS/browser compatibility, and by default grid units will have font-family: sans-serif; applied — this is the default font stack Pure's Base (Normalize.css) applies to <html>, <button>, <input>, <select>, and <textarea> 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 font-family to only the <body> element, apply it like this: -

- - - {stripIndent` - - `} - -

From 9c7a28054d1bf8bdd601555668507d86552d6113 Mon Sep 17 00:00:00 2001 From: Nils K <24257556+septatrix@users.noreply.github.com> Date: Tue, 25 Oct 2022 22:48:11 +0200 Subject: [PATCH 3/3] Remove unused Link import --- site/src/pages/grids/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/site/src/pages/grids/index.js b/site/src/pages/grids/index.js index 4e9f28cf8..730126148 100644 --- a/site/src/pages/grids/index.js +++ b/site/src/pages/grids/index.js @@ -1,4 +1,3 @@ -import Link from '@docusaurus/Link'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import React from 'react'; import Layout from '../../theme/Layout';