Skip to main content

Home/ Groups/ Web Development & Mobile App
Rss Feed
Sort By: Most Recent | Popular Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

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.
  • 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.
  • ...3 more annotations...
  • Then run the command: npm install
  • This is a one-liner again. Just run this command in the terminal: npm install -g grunt-cli
  • You should close and reopen the terminal as well. That’s a generic good practice to make sure things are working right.
Vernon Fowler

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

gregrickaby.com/sing-the-golden-ratio-and-rems

typography webdesign tools calculator usability css font REM responsive

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.
  • 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.
  • 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
      Vernon Fowler on 01 Feb 14
       
      Shouldn't line-height also be refined whenever the container width changes?
  • ...5 more annotations...
  • Margins, or “vertical spacing” is calculated using either 24px or 48px to maintain vertical rhythm.
    • Vernon Fowler
      Vernon Fowler on 01 Feb 14
       
      Where does the mystical value of 24px or 48px for vertical spacing margins come from?
  • By declaring REM’s after PX’s in the CSS this example  will degrade gracefully to the PX:
  • 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 )
  • setting the root font size to 62.5% is a brilliant little trick
  • 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.
Vernon Fowler

Eric's Archived Thoughts: Unitless line-heights - 0 views

meyerweb.com/...unitless-line-heights

typography webdesign css line-height

shared by Vernon Fowler on 01 Feb 14 - No Cached
  • This is why it’s always strongly recommended that you use unitless numbers if you’re going to set a line-height on something like the html or body elements, or indeed on any element that is going to have descendant elements.
Vernon Fowler

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
  • home pages themselves have a unique set of design goals.
  • Remember that smallest, deepest element I described earlier? This is the atomic element—for a news site, it’s the story page; for a search engine, it’s the search result; for a store, it’s a product page. This page accounts for 60 to 75 percent of all page views on the site. The rest belong to the home page.
Vernon Fowler

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
  • Vernon Fowler on 31 Jan 14
     
    "In this post I'll go into detail about these approaches, giving frameworks and step-by-step instructions on how to build and use personas."
Vernon Fowler

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
  • Vernon Fowler on 31 Jan 14
     
    "Type of unit similar to "em", but relative only to the root element, not any parent element. Thus compounding does not occur as it does with "em" units."
Vernon Fowler

University Websites: Top 10 Design Guidelines - 0 views

www.nngroup.com/...university-sites

university websites design guidelines user experience users journey webdesign UX web design

shared by Vernon Fowler on 28 Jan 14 - No Cached
  • 8. Follow the user journey: check the main tasks for each of your audiences Identify the top tasks that you want your users to accomplish and follow the path that they have to take to get there. See if and when they have to leave the global site. See if they are bounced from one office to another in search of a form or procedure. Keep your eyes open. Because university sites are so often large, with each department or office owning its own page and information, it’s common to find duplicate, contradictory, missing, or incomplete information. Follow the journey, starting at different entry points, and see what you learn. If you’re already using personas, test them out. Better yet, do some quick user testing. (Testing doesn’t have to be expensive. And, by testing with just 5 users, you can uncover 85% of the issues).
Vernon Fowler

grunt-grunticon - 0 views

npmjs.org/...grunt-grunticon

javascript automation workflow css webdesign icons vector svg images

shared by Vernon Fowler on 22 Jan 14 - No Cached
  • Vernon Fowler on 22 Jan 14
     
    "A mystical CSS icon solution"
Vernon Fowler

Font sizing with rem - Snook.ca - 0 views

snook.ca/...font-size-with-rem

css3 rem font css fonts sizing webdesign web design

shared by Vernon Fowler on 16 Jan 14 - No Cached
  • The problem with em-based font sizing is that the font size compounds. A list within a list isn't 14px, it's 20px. Go another level deeper and it's 27px!
  • The rem unit is relative to the root—or the html—element. That means that we can define a single font size on the html element and define all rem units to be a percentage of that. html { font-size: 62.5%; } body { font-size: 1.4rem; } /* =14px */ h1 { font-size: 2.4rem; } /* =24px */
  • I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
  • ...3 more annotations...
  • We can specify the fall-back using px, if you don't mind users of older versions of Internet Explorer still being unable to resize the text (well, there's still page zoom in IE7 and IE8). To do so, we specify the font-size using px units first and then define it again using rem units. html { font-size: 62.5%; } body { font-size: 14px; font-size: 1.4rem; } /* =14px */ h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
  • consistent and predictable sizing in all browsers, and resizable text in the current versions of all major browsers
  • The compounding nature of em-based font-sizing can be frustrating so what else can we do?
« First ‹ Previous 661 - 680 of 716 Next › Last »
Showing 20▼ items per page