You + Me

Collecting cultural artifacts that inform and inspire what we create.

Archive for August 2010

Marvel vs. Capcom 3 footage

leave a comment »

Graphically awesome.

Written by youplusme

August 30, 2010 at 11:07 pm

Posted in Design projects

Slammer – Designer’s Geometry Box

leave a comment »

Slammer overlays any grid you want, anywhere you want. Typographic Grids, Golden Sections, Fibonacci series or Rule of Thirds. Slammer also has Rulers, Crosshairs, Magnifier, Measurements & Screenshots.


  • Inspect

    • Rulers
    • Crosshair
    • Magnifier
    • Measurements

  • Layout

    • Uniform
    • Fibonacci
    • Golden
    • Harmonious

  • Design

    • Clickthrough
    • Control
    • Arrange
    • Focus

  • Export

    • Overlay
    • Background
    • Templates
    • JSON

    • Frame

      • Customizable Themes
      • 8 Way Resizable
      • Drag border or content to move
      • Customizable Size Presets
    • Rulers

      • Pixels, Cms/Mms, Inches, Picas
      • Arbitrary ruler origins
      • Measure length, base, height and angle in measurement mode
    • Crosshair

      • Thin, Crisp and Precise
      • Visible on any background
      • Use mouse or keys to position
      • Can snap to ruler divisions
    • Magnifier

      • Show in frame or in a window
      • Scroll to change magnification
      • In frame magnifier dodges mouse
      • ⌘C copies color under crosshair

    • Layers & Overlays

      • Layers provide sections for the canvas
      • Example: Header, Footer, Sidebar, Content
      • Margins flexibly position a layer in canvas
      • Overlays add distributions to their layer
      • Overlays can be oriented in any angle
      • Customizable blending modes and opacity
    • Distributions

      • Uniform Grids: Sections & Gutters
      • Fibonacci series: 1,1,2,3,5,8… Start with any number
      • Golden Section: 1:1.618 or 3 column bidirectional
      • Harmonious: n/m. Equal sections
      • Create new layers from sections (except uniform)

  • Clickthrough Mode

    When Slammer is set to clickthrough or cloak, objects in windows below Slammer can be moved without switching between windows.

    Control

    Plenty of keyboard shortcuts and intuitive mouse actions let you control Slammer in a natural fashion. You can set a shortcut to show or hide the Slammer Window even when it is not active.

    Arrange & Focus

    Slammer allows drag & drop reordering and duplicating of Layers and overlays. The order, blending modes and opacity help you focus on specific portions of the design.

    • Template

      Slammer templates are layout specifications. These specs can be exported and imported easily.
      Slammer also generates a JSON file with layers & overlays. This can be used by developers to integrate with other applications. The open source jSlammer reads the JSON data to display the Slammer grids on any website.
      You can share your templates or download templates created by others at On Layout.

    • Grab

      You can do the plain old screen grab and get the portion of screen below Slammer as an image (or) You can grab the image composited with the Layers & Overlays on the top (or) You can save the composite image of just the Layers & Overlays.

  • Slammer Unibody Theme
  • Slammer Dark Theme
  • Slammer Bordered Dark Theme
  • Slammer Blue Theme
  • Slammer Purple Theme
  • Slammer Glass Theme
  • Slammer Inspector
  • Slammer Frame Size
  • Slammer Blending Modes for Layers & Overlays
  • Slammer Layer Margins
  • Slammer Uniform Overlay
  • Slammer Overlay Orientation Angle
  • Slammer Fibonacci Series Overlay
  • Slammer Golden Section Overlay
  • Slammer Harmonious Section Overlay
  • Slammer Preferences General
  • Slammer Preferences Rulers
  • Slammer Preferences Themes
  • Slammer Measurements
  • jQuery Slammer from exported JSON

Create grid systems with ease.

Written by youplusme

August 29, 2010 at 4:08 pm

Posted in Design projects

Stowaway Jacket – Hlaska

leave a comment »

Water resistant and stylish? Two combinations not usually found. Unfortunately I don’t live in San Francisco anymore to take advantage of this.

Written by youplusme

August 29, 2010 at 1:47 am

Posted in Design projects

SCVNGR

leave a comment »

What is SCVNGR?

SCVNGR is a game. Playing is simple: Go places. Do challenges. Earn points and unlock rewards! (Think free coffee!) Individuals and enterprises build on SCVNGR by adding challenges and rewards to their favorite places.

Another location based reward app. Space is getting attention.

Written by youplusme

August 28, 2010 at 7:40 pm

Posted in Design projects

960 Grid System

leave a comment »

960 Grid System

Download – Templates: Acorn, Fireworks, Flash, InDesign, GIMP, Inkscape, Illustrator, OmniGraffle, Photoshop, Visio, Exp Design. Also: PDF sketch sheets + CSS files. Repository at GitHub.

Custom CSS Generator

HTML Layout Generator

Grid Overlay Bookmark

Essence

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem. Read more.

Dimensions

The 12-column grid is divided into portions that are 60 pixels wide. The 16-column grid consists of 40 pixel increments. Each column has 10 pixels of margin on the left and right, which create 20 pixel wide gutters between columns. View demo.

Purpose

The premise of the system is ideally suited to rapid prototyping, but it would work equally well when integrated into a production environment. There are printable sketch sheets, design layouts, and a CSS file that have identical measurements.

More Columns

For those more comfortable designing on a 24-column grid, an alternative version is also included. It consists of columns 30 pixels wide, with 10 pixel gutters, and a 5 pixel buffer on each side of the container. This keeps text from touching browser chrome — helpful for devices like the iPhone, where a lower-case “i” or “l” might be easily missed. View demo.

Source Order

By utilizing the push_XX and pull_XX classes, elements can be rearranged, independent of the order in which they appear in the markup. This allows you to keep more pertinent info higher in the HTML, without sacrificing precision in your page layout. For instance, view the source code of this page to see how the H1 tag has been re-positioned.

10K Apart — 16 col Show Grid16 Column Example

NuvoGraphics — 12 col Show Grid12 Column Example

Onehub — 16 col Show Grid16 Column Example

Anton Peck — 16 col Show Grid16 Column Example

Pixel Dreams — 16 col Show Grid16 Column Example

Tapbots — 12 col Show Grid12 Column Example

Subvert — 16 col Show Grid16 Column Example

MODx CMS — 12 col Show Grid12 Column Example

Pulse App — 16 col Show Grid16 Column Example

Phil Coffman — 12 col Show Grid12 Column Example

WooThemes — 16 col Show Grid16 Column Example

Code

View comprehensive code on the demo page.

To the right is an example of how the code works. The container specifies how many total columns exist, either 12 or 16. For the most part, you will only ever need to specify a class name of grid_XX, where XX represents the column width.

If a grid unit contains grid children, the first child in a row will need a class of alpha and the last child in a row requires the class name omega. Likewise, if you want to insert empty space before or after a grid unit, use class prefix_XX or suffix_XX.

<div class="container_12"> <div class="grid_7 prefix_1"> <div class="grid_2 alpha"> ... </div> <div class="grid_3"> ... </div> <div class="grid_2 omega"> ... </div> </div> <div class="grid_3 suffix_1"> ... </div> </div>

Nine-Sixty

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480. This makes it a highly flexible base number to work with.

Credits

I drew inspiration from these individuals: Khoi Vinh, Cameron Moll, Olav Bjørkøy, Brandon Schauer, Jeff Croft and Mark Boulton. Their work spurred me to create my own. Special thanks to Eric Meyer for his comprehensive reset CSS.

Derivatives

The 960 Grid System is free to use, and may be repurposed to meet your specific needs. Several projects have already spun off, including versions that were built to be fluid and elastic. Additionally, it is has been adapted as a theme for Drupal.

Tutorials

Web Designer Depot featured an article on writing less code by styling tags directly. Nettuts has both a tutorial and video. WooThemes wrote a post entitled “Why we love 960.gs.” There are also articles in Spanish [1] [2] and Swedish [1] [2].

Feedback

I am always happy to hear how people are using the system, and would encourage any constructive criticism. Bear in mind, the whole spirit of this project is to be lightweight and focused solely on grids, but not to add bloat via extra features.

HTMLCSS508 — 960 Grid System by Nathan Smith.
Secure Hosting

Licensed under GPL and MIT. Overlay effects via jQuery.

Follow me on Twitter

Quickly develop web apps for iOS and Android with HTML5 and CSS3.

Quickly develop web apps for iOS and Android with HTML5 and CSS3.

Ads by Fusion

via 960.gs

Written by youplusme

August 26, 2010 at 1:14 pm

Posted in Design projects

D3100 from Nikon

leave a comment »

Might need to get this camera. Hotness

Written by youplusme

August 23, 2010 at 8:19 pm

Posted in Design projects

NES Hard Drives

leave a comment »

Written by youplusme

August 23, 2010 at 8:18 pm

Posted in Design projects