Webmaster 99 » Grid http://www.webmaster99.com Free Webmaster Resources Sun, 05 Sep 2010 09:46:17 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Rampant Earth Grid After Effects Template http://www.webmaster99.com/2010-06/rampant-earth-grid-after-effects-template.html http://www.webmaster99.com/2010-06/rampant-earth-grid-after-effects-template.html#comments Tue, 22 Jun 2010 15:03:22 +0000 Webmaster9 http://www.webmaster9.com/2010-06/rampant-earth-grid-after-effects-template.html
1920 x 1080 Animated Earth map over grid with customizable text and photo placeholders. After Effects CS4 Project file. Compatible with After Effects CS4 and above. Available at rampantdesigntools.com

Related Posts

]]> http://www.webmaster99.com/2010-06/rampant-earth-grid-after-effects-template.html/feed 0 Accelerated Grid Theming – NineSixty by Nathan Smith at the 2009 Boston Design4Drupal Conference http://www.webmaster99.com/2010-06/accelerated-grid-theming-ninesixty-by-nathan-smith-at-the-2009-boston-design4drupal-conference.html http://www.webmaster99.com/2010-06/accelerated-grid-theming-ninesixty-by-nathan-smith-at-the-2009-boston-design4drupal-conference.html#comments Sat, 12 Jun 2010 01:59:20 +0000 Webmaster9 http://www.webmaster9.com/2010-06/accelerated-grid-theming-ninesixty-by-nathan-smith-at-the-2009-boston-design4drupal-conference.html
This session will demonstrate the principles of grid-based theming and the NineSixty theme for Drupal. Subtheming NineSixty for rapid site design and deployment will be covered, as well as creating a custom grid system for any project. The official description and resources, including any slides, can be found at boston.design4drupal.org

Related Posts

]]> http://www.webmaster99.com/2010-06/accelerated-grid-theming-ninesixty-by-nathan-smith-at-the-2009-boston-design4drupal-conference.html/feed 2 Blueprint Grid CSS Generator http://www.webmaster99.com/2009-07/blueprint-grid-css-generator.html http://www.webmaster99.com/2009-07/blueprint-grid-css-generator.html#comments Sat, 18 Jul 2009 06:23:07 +0000 Webmaster9 http://www.webmaster9.com/?p=181 About Blueprint Grid CSS Generator

Blueprint Grid CSS Generator will help you generate more flexible versions of Blueprint’s grid.css and compressed.css and grid.png files. Whether you prefer 8, 10,16 or 24 columns in your design, this generator now enables you that flexibility with Blueprint.

Blueprint Grid CSS Generator Usage:

1. Enter your desired number of columns.
2. Your column width.
3. Enter the width of your margin.
4. Enter the desired page width.
5. Click ‘Generate CSS’ button and copy the results from the Generated Code section.

The Blueprint Grid CSS Generator URL :http://kematzy.com/blueprint-generator/

Related Posts

]]> http://www.webmaster99.com/2009-07/blueprint-grid-css-generator.html/feed 0 Grid Designer 2 : featured in Creative Review magazine http://www.webmaster99.com/2009-07/grid-designer-2-featured-in-creative-review-magazine.html http://www.webmaster99.com/2009-07/grid-designer-2-featured-in-creative-review-magazine.html#comments Sat, 18 Jul 2009 06:19:06 +0000 Webmaster9 http://www.webmaster9.com/?p=180 About Grid Designer 2

If you’re familiar with the grid, a bit of design and basic typography, using this script should be pretty easy – most of the functions are pretty self-explanatory.

If you’re unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton.

Design a Grid

On the Columns tab, you can start your design in two ways:

1. Fill in the number of columns, total width, gutters and margin widths, all specified in pixels – then press the design button.
2. Recalculate the settings in various ways by clicking the row of buttons located next to each setting.

The grid preview on the Columns tab will display the widths of each area, in pixels. Below it, the widths of spanning columns is displayed. Click the → arrows ← in the grid, to span/unspan multiple columns in your layout.

Typography

Use the Typography tab to adjust and calculate basic typographic settings for your design. The line height (in pixels) is also your vertical grid size – the line heights of your typography are specified in number of lines. The align setting can be used to tweak the vertical alignment of the text – adjusting this to align the baselines of your typefaces is a good idea.

Leading specifies the number of lines of space beneath a paragraph of text – sometimes you need an extra line of leading to properly align your headlines, so that they don’t overlap with the following paragraph. The rest should be pretty straight forward and self explanatory.

Export

Finally, on the Export tab, you can generate copy-and-paste ready CSS, and a sample XHTML template.

Use the scalable grid option, if you want a grid that can resize horizontally – all of the pixel widths will be recalculated and specified in percentages.

The CSS Reset option generates CSS to reset all standard typographic settings, margins, padding, alignment, table spacing, etc. – this is highly recommended, as browsers have different default settings, which may interfere with your typography. If you disable this option, your typography may not come out exactly the way you designed it.

Note that you can bookmark your design – the URL in your browser is updated dynamically, and contains all your grid and typography settings, making it easy to copy, save and share your designs.

Related Posts

]]> http://www.webmaster99.com/2009-07/grid-designer-2-featured-in-creative-review-magazine.html/feed 0