Best content in Web Development & Mobile App

10More

Web Typography: Using The Golden Ratio and REM's - Greg Rickaby - 0 views

shared by Vernon Fowler on 01 Feb 14 - No Cached

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.
...

Cancel
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.
...

Cancel
What’s so awesome about the unitless line height? You only have to specify it once in the <body> tag. Now, ALL other line height(s) are relative to the parent font-size. That’s too easy! (Of course, you can still specify your own to maintain complete control.)
- Vernon Fowler on 01 Feb 14
  
  Shouldn't line-height also be refined whenever the container width changes?
  
  <div class="cArrow"> </div><div class="cContentInner">Shouldn't line-height also be refined whenever the container width changes?</div>
  
  ...
  
  Cancel
...

Cancel
...5 more annotations...
Margins, or “vertical spacing” is calculated using either 24px or 48px to maintain vertical rhythm.
- Vernon Fowler on 01 Feb 14
  
  Where does the mystical value of 24px or 48px for vertical spacing margins come from?
  
  <div class="cArrow"> </div><div class="cContentInner">Where does the mystical value of 24px or 48px for vertical spacing margins come from?</div>
  
  ...
  
  Cancel
...

Cancel
By declaring REM’s after PX’s in the CSS this example  will degrade gracefully to the PX:
...

Cancel
Line-height: 24px; for the win, you you stay right in the baseline ( until you start using a border bottom it throws it off by a pixel :p )
...

Cancel
setting the root font size to 62.5% is a brilliant little trick
...

Cancel
One note on the comment regarding vertical rhythm. I believe the 24px and 48px is dependent on your line-height. In your examples, you are using a line-height of 26px so I think the values should be 26px and 52px to maintain that rhythm.
...

Cancel

2More

Home Page Goals · An A List Apart Article - 0 views

alistapart.com/...homepagegoals goals page webdesign layout grids information architecture

shared by Vernon Fowler on 01 Feb 14 - No Cached

1More

Personas: The Art and Science of Understanding the Person Behind the Visit - Moz - 0 views

moz.com/...ng-the-person-behind-the-visit personas UX analytics data instruction webdesign

shared by Vernon Fowler on 31 Jan 14 - No Cached

1More

Can I use rem units - 0 views

caniuse.com/rem units webdesign css typography rem fonts

shared by Vernon Fowler on 31 Jan 14 - No Cached

Personas: The Art and Science of Understanding the Person Behind the Visit - Moz - 0 views

moz.com/...ng-the-person-behind-the-visit personas UX analytics data

shared by Vernon Fowler on 30 Jan 14 - No Cached

The content inventory | Intentional Design Inc. - 0 views

intentionaldesign.ca/...the-content-inventory content inventory webdesign UX strategy

shared by Vernon Fowler on 30 Jan 14 - No Cached

6More

Grunt for People Who Think Things Like Grunt are Weird and Hard ◆ 24 ways - 0 views

24ways.org/...grunt-is-not-weird-and-hard grunt tutorial javascript css tools webdesign frontend front-end workflow

shared by Vernon Fowler on 03 Feb 14 - No Cached

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.
...

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

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

Cancel
...3 more annotations...
Then run the command: npm install
...

Cancel
This is a one-liner again. Just run this command in the terminal: npm install -g grunt-cli
...

Cancel
You should close and reopen the terminal as well. That’s a generic good practice to make sure things are working right.
...

Cancel

Encouraging content collaboration through user stories - 0 views

boagworld.com/...user-stories content user collaboration stories UX webdesign

shared by Vernon Fowler on 04 Feb 14 - No Cached

8More

Working With LESS and the Chrome DevTools - Tuts+ Code Tutorial - 0 views

code.tutsplus.com/...the-chrome-devtools--net-36636 less chrome html markup tools webdesign css workflow source maps workspaces editor editing grunt preprocessor

shared by Vernon Fowler on 11 Feb 14 -

Cached

While holding Command (Control on Windows), click any property, value or selector to jump to the line of code in the corresponding LESS source file within the Sources panel.
...

Cancel
In a world without Source Maps, DevTools would display styles originating from the compiled CSS. Line numbering would not be useful due to a mismatch between compiled CSS and the source CSS. With Source Maps, when inspecting a DOM node on the page, DevTools will automatically show the styles originating from the LESS source file.
...

Cancel
the Sources panel contains a live editor
...

Cancel
...2 more annotations...
Not only does this work for remotely hosted files, but also for local ones with the added benefit of persisting your changes to a file.
...

Cancel
You can edit a file in the Sources panel and those changes will persist to disk when you Command/Control-S.
...

Cancel

Vernon Fowler on 11 Feb 14

This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.

<div class="cArrow"> </div><div class="cContentInner">This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.</div>

...

Cancel
Vernon Fowler on 11 Feb 14

This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.

<div class="cArrow"> </div><div class="cContentInner">This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here.</div>

...

Cancel
Vernon Fowler on 12 Feb 14

"This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. "

<div class="cArrow"> </div><div class="cContentInner">"This is a complete tutorial to using LESS with Chrome's DevTools. If you've used Sass with Chrome's DevTools, you'll most likely already be familiar with the concepts introduced here. "</div>

...

Cancel