mirror of
https://github.com/jimeh/760-grid-system.git
synced 2026-02-19 03:06:39 +00:00
Initial import.
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
*.DS_Store
|
||||
23
LICENSE
Executable file
23
LICENSE
Executable 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
32
README.markdown
Normal 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
1
css/760.css
Normal file
File diff suppressed because one or more lines are too long
1
css/760.margin.css
Normal file
1
css/760.margin.css
Normal file
File diff suppressed because one or more lines are too long
1
css/reset.css
Executable file
1
css/reset.css
Executable 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
1
css/text.css
Executable 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
1403
css/uncompressed/760.css
Normal file
File diff suppressed because it is too large
Load Diff
1409
css/uncompressed/760.margin.css
Normal file
1409
css/uncompressed/760.margin.css
Normal file
File diff suppressed because it is too large
Load Diff
53
css/uncompressed/reset.css
Executable file
53
css/uncompressed/reset.css
Executable 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
84
css/uncompressed/text.css
Executable 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
116
generator/generate-grid.rb
Executable 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
14
generator/grids.yml
Normal 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
|
||||
Reference in New Issue
Block a user