Initial import.

This commit is contained in:
2009-07-16 12:38:27 -07:00
commit c66bb910e8
13 changed files with 3139 additions and 0 deletions

1
.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
*.DS_Store

23
LICENSE Executable file
View File

@@ -0,0 +1,23 @@
Copyright (c) 2009 Jim Myhrberg
760.css is based on 960.gs, created by and
Copyright (c) 2008 Nathan Smith http://960.gs/
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

32
README.markdown Normal file
View File

@@ -0,0 +1,32 @@
# 760 Grid System
Being an avid lover the [960 Grid System][1], I decided to make a 760 pixel wide version when I started working with Facebook applications.
[1]: http://960.gs/
It was instantly obvious it would be easier creating a generator for the grid system. The first version was written in PHP, and took less than an hour to create. I've now replaced it with a Ruby version, which technically creates identical output, only it's configured with a YAML file.
## Grid Usage
760 works exactly the same way as [960][1]. The only difference is that instead of 12 and 16 columns, 760 has 20, 38, and 76 column layouts.
[1]: http://960.gs/
## Generator Usage
The generator is an easy to use shell script. Just edit grids.yml to your needs, and run:
./generate-grid.rb > new_grids.css
## Notes
* By default columns don't have any margins, cause the columns are already __very__ thin. But you can use _760.margin.css_ which has a 5 pixel margin. Or you could just generate your own new grid css with custom margins.
* Any suggestions are greatly appreciated.
## Legal
* Released under MIT license, of course.
* Included Eric Meyer's comprehensive browser [reset stylesheet][1], which 960 also uses.
* I "stole" the text.css file from the 960 Grid System, I hope nobody minds :)
[1]: http://meyerweb.com/eric/tools/css/reset/

1
css/760.css Normal file

File diff suppressed because one or more lines are too long

1
css/760.margin.css Normal file

File diff suppressed because one or more lines are too long

1
css/reset.css Executable file
View File

@@ -0,0 +1 @@
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

1
css/text.css Executable file
View File

@@ -0,0 +1 @@
body{font:13px/1.5 Helvetica,Arial,'Liberation Sans',FreeSans,sans-serif}a:focus{outline:1px dotted invert}hr{border:0 #ccc solid;border-top-width:1px;clear:both;height:0}h1{font-size:25px}h2{font-size:23px}h3{font-size:21px}h4{font-size:19px}h5{font-size:17px}h6{font-size:15px}ol{list-style:decimal}ul{list-style:disc}li{margin-left:30px}p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset{margin-bottom:20px}

1403
css/uncompressed/760.css Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

53
css/uncompressed/reset.css Executable file
View File

@@ -0,0 +1,53 @@
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

84
css/uncompressed/text.css Executable file
View File

@@ -0,0 +1,84 @@
/*
960 Grid System ~ Text CSS.
Learn more ~ http://960.gs/
Licensed under GPL and MIT.
*/
/* `Basic HTML
----------------------------------------------------------------------------------------------------*/
body {
font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
}
a:focus {
outline: 1px dotted invert;
}
hr {
border: 0 #ccc solid;
border-top-width: 1px;
clear: both;
height: 0;
}
/* `Headings
----------------------------------------------------------------------------------------------------*/
h1 {
font-size: 25px;
}
h2 {
font-size: 23px;
}
h3 {
font-size: 21px;
}
h4 {
font-size: 19px;
}
h5 {
font-size: 17px;
}
h6 {
font-size: 15px;
}
/* `Spacing
----------------------------------------------------------------------------------------------------*/
ol {
list-style: decimal;
}
ul {
list-style: disc;
}
li {
margin-left: 30px;
}
p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset {
margin-bottom: 20px;
}

116
generator/generate-grid.rb Executable file
View File

@@ -0,0 +1,116 @@
#! /usr/bin/env ruby
require "yaml"
grids = YAML.load_file("grids.yml")
classes = {}
grids.each do |grid_name, value|
width = value["width"].to_i
cells = value["cells"].to_i
margin = value["margin"].to_i
cell_size = width / cells;
# containers
key = "\tmargin-left: auto;\n"
key << "\tmargin-right: auto;\n"
key << "\twidth: " + width.to_s + "px;\n"
val = ".container_" + cells.to_s
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
# global
key = "\tdisplay: inline;\n"
key << "\tfloat: left;\n"
key << "\tmargin-left: " + margin.to_s + "px;\n"
key << "\tmargin-right: " + margin.to_s + "px;\n"
for i in 1..cells
val = ".container_" + cells.to_s + " .grid_" + i.to_s
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
end
# alpha / omega
key = "\tmargin-left: 0;\n"
val = ".alpha"
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
key = "\tmargin-right: 0;\n"
val = ".omega"
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
# grid_*
for i in 1..cells
key = "\twidth: " + ((cell_size * i) - (margin * 2)).to_s + "px;\n"
val = ".container_" + cells.to_s + " .grid_" + i.to_s
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
end
# prefix_*
for i in 1..(cells-1)
key = "\tpadding-left: " + ((cell_size) * i).to_s + "px;\n"
val = ".container_" + cells.to_s + " .prefix_" + i.to_s
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
end
# suffix_*
for i in 1..(cells-1)
key = "\tpadding-right: " + ((cell_size) * i).to_s + "px;\n"
val = ".container_" + cells.to_s + " .suffix_" + i.to_s
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
end
end
# clear
key = "\tclear: both;\n"
key << "\tdisplay: block;\n"
key << "\toverflow: hidden;\n"
key << "\tvisibility: hidden;\n"
key << "\twidth: 0;\n"
key << "\theight: 0;\n"
val = ".clear"
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
# clearfix
key = "\tclear: both;\n"
key << "\tcontent: '.';\n"
key << "\tdisplay: block;\n"
key << "\tvisibility: hidden;\n"
key << "\theight: 0;\n"
val = ".clearfix:after"
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
key = "\tdisplay: inline-block;\n"
val = ".clearfix"
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
key = "\theight: 1%;\n"
val = "* html .clearfix"
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
key = "\tdisplay: block;\n"
val = ".clearfix"
classes[key] = [] if !classes.has_key?(key)
classes[key].push(val)
# generate output
output = ""
classes.sort
classes.sort{|a,b| a[0]<=>b[0]}.each do |key, value|
output << value.uniq.join(",\n") + " {\n"
output << key
output << "}\n"
output << "\n"
end
puts output

14
generator/grids.yml Normal file
View File

@@ -0,0 +1,14 @@
grid_1:
width: 760
cells: 20
margin: 0
grid_2:
width: 760
cells: 38
margin: 0
grid_3:
width: 760
cells: 76
margin: 0