The UI for The State Decoded project
CSS JavaScript Ruby
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
public
scss
source_psd
.gitignore
.htaccess
Gemfile
Gemfile.lock
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-144x144-precomposed.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
config.rb
crossdomain.xml
humans.txt
index.html
law.html
lists.html
readme.md
robots.txt
search-result.html
table.html

readme.md

N.B.: This is a work in progress. It's not ready to deploy yet.

ReadMe for The State Decoded design

This is the static breakout of The State Decoded design created in the fall of 2012. This is a combination of boilerplate as well as other functions that come from a variety of resources online, including the Ruby/Sass community. Any questions can be directed at myself (John Athayde) or Waldo Jaquith.

Cheers, John Athayde jmpa@meticulous.com November 2012

Setup

Favicons, Apple Touch Icons

Each of these icons should somehow correlate to your State or Commonwealth. With Virginia, we used the seal icon that was created for the site. The larger touch icons have bitmapped 0 and 1s fading across, representing digital bits being "decoded" as it were. Feel free to edit the images in the source_psd folder to suit your needs. We recommend running any images through ImageOptim (http://imageoptim.com) to squeeze out excess file size.

Sass, Compass, etc.

This site was built with future flexibility and reuse in mind. To that end, the site basically is a styleguide as well as a design. We use Sass/SCSS to allow the power of variables in CSS. This lets other groups who may be implementing this on their own to rapidly change colors and fonts without having to do massive find and replace or worry about color math variations in Photoshop.

This does create a layer of complexity, but one that I feel is worth having. You, as an end user, can write regular CSS in an SCSS file and it will compile normally.

To run this, there are a few setups you need. You need to either run CodeKit, Scout, CompassApp, or do a manual setup with Ruby on your system. This is documented on the Compass site (http://compass-style.org/install/).

Media Queries

The site is defined mainly as three breakpoints:

  • Handheld/iPhone
  • Tablet/iPad (Portrait)
  • Everything else

We'll probably add a desktop layout for windows larger than 1224px (see the scss/base/_media_queries.css.scss file for all breakpoints) but for right now, we're starting with the basics.