Group items tagged

First you need to set a default “root” font-size variable: html { font-size: 62.5% } Why 62.5% instead of 100%? Simplicity. Our default font is now 10px, which makes math easier. Now, 1.0rem = 10px. This becomes our $rembase.

Now your fonts will scale perfectly during a browser re-size (if using responsive design), or if a user were to zoom in or out.

You install Grunt on a per-project basis. Go to your project’s folder. It needs a file there named package.json at the root level. You can just create one and put it there.

The contents of that file should be this: { "name": "example-project", "version": "0.1.0", "devDependencies": { "grunt": "~0.4.1" } }

Once that package.json file is in place, go to the terminal and navigate to your folder.

When you’ve analyzed as many pages or different views as you’d like, you’ll start to see some interesting patterns emerge in the data. In the right-hand column, you’ll see examples of how each kind of typography we found has been used in a real context on your site. It is organized by color and then by size so you can easily see how you are using typography.

The next thing you’ll want to take a look at is in the first column, called “Count”. We’ve counted how many times you’ve used each combination of typographical styles. This can be incredibly helpful when deciding which styles were intentional, versus one-off color pick errors or experiments that never got removed from the code base. If you’ve used one color blue 1,400 times, and another just 23, it’s pretty obvious which is more in line with broader site-wide styles.

Development Here’s how to translate our designed example to code: