diff --git a/styleguide/components/Navigation/Navigation.js b/styleguide/components/Navigation/Navigation.js index 764ff2dc8..6b5d68597 100644 --- a/styleguide/components/Navigation/Navigation.js +++ b/styleguide/components/Navigation/Navigation.js @@ -44,10 +44,10 @@ const Navigation = ({ className, onLinkClick }) => ( exact activeClassName={ css.linkActive } className={ css.link } - to="/design/responsive-design" + to="/design/iconography" onClick={ onLinkClick } > - Responsive design + Iconography
( This means, writing your CSS to address the smallest sizes first. We do this for two key reasons: -+
+
Larger viewport layouts are typically more complex than their small counterparts. With this in mind, you’ll likely end up writing fewer CSS rules to achieve the desired @@ -60,7 +60,7 @@ const ResponsiveDesign = () => ( By building the page for the lowest common denominator, you’ll be taking into account devices that we’re unable to test on, or even those that don’t exist yet. -When working “bottom up”, it should apparent become that you need to add a media query when the page or feature begins to look and feel rubbish. Look to increase the window size until @@ -126,11 +126,13 @@ const ResponsiveDesign = () => ( Rather than building for ‘devices’ we approach screen size as a whole. So if content doesn’t look good as your screen gets bigger, add a media query to fix it. -- Note: It’s important to note that "common" screen sizes don’t exist. And we can never assume - a user will see a piece of content based on ‘the fold’. - Refer to iamthefold for more information. - ++ + It’s important to note that "common" screen sizes don’t exist. + And we can never assume a user will see a piece of content based + on ‘the fold’. Refer to iamthefold for more information. + +