- Make it easy to read. - Roger Black -
-- CSS custom properties - are an underutilized tool for web designers and developers alike. They allow us to define and use - variables that can be shared across our app. But, even more powerfully, they - provide a built-in fallback system which allows us to replace default values with our own. - This makes theming easy! -
-- For example, AgnosticUI uses a system font stack by default, but you - may want to instead use your own. This can be achieved by simply defining - the custom css property for font family. Under the hood, AgnosticUI will do: -
-++ + ++ +Typography
++ ++ +Typography and scale are the foundations your designs are built on.
++ + +-+ Make it easy to read. + Roger Black +
++ Please consider heeding Black's 6 rules for web design: +-+
+- Bigger is better
+- Color your world — sparingly
+- Faster beats fancier
+- Content is king
+- Small bytes go down easier
+- If you don’t have something good to say, don’t say anything
+Using CSS Custom to Theme
++ CSS custom properties + are an underutilized tool for web designers and developers alike. They allow us to define and use + variables that can be shared across our app. But, even more powerfully, they + provide a built-in fallback system which allows us to replace default values with our own. + This makes theming easy! +
++ For example, AgnosticUI uses a system font stack by default, but you + may want to instead use your own. This can be achieved by simply defining + the custom css property for font family. Under the hood, AgnosticUI will do: +
+var(--agnosticui-font-family, var(--agnosticui-default-font-family));-- Essentially, the left variable will be used if defined, otherwise it will fallback to - default one. All override variables in AgnosticUI are defined using this same naming - convention where you simply remove the - --default. -
-++ Essentially, the left variable will be used if defined, otherwise it will fallback to + default one. All override variables in AgnosticUI are defined using this same naming + convention where you simply remove the + --default. +
+
/**
* These are only meant to be minimal point of departure to work from. You're encouraged
* to customize your font stack and sizes to whatever suits you.
@@ -63,8 +78,27 @@
--agnosticui-default-font-weight-light: 300;
}