Created
June 9, 2009 19:11
-
-
Save bkeepers/126730 to your computer and use it in GitHub Desktop.
Initial layout and stylesheets for Idea Foundry example app
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>eHarbor</title> | |
| <%= stylesheet_link_tag 'boilerplate', 'main' %> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| <header> | |
| <h1> | |
| <%= link_to '<span class="e1">e</span><span class="h2">H</span><span class="a3">a</span><span class="r4">r</span><span class="b5">b</span><span class="o6">o</span><span class="r7">r</span>', root_path %> | |
| </h1> | |
| <nav> | |
| <ul> | |
| <li><%= link_to "Buy", listings_path %></li> | |
| <li><%= link_to "Sell", new_listing_path %></li> | |
| </ul> | |
| </nav> | |
| </header> | |
| <%= yield %> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* -------------------------------------------------------------- | |
| Boilerplate reset.css | |
| * Resets default browser CSS. | |
| -------------------------------------------------------------- */ | |
| html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; } | |
| body { line-height: 1.5; background: #fff; margin: 18px 0; } | |
| table { border-collapse: collapse; border-spacing: 0; } | |
| caption, th, td { text-align: left; font-weight:400; } | |
| blockquote:before, blockquote:after, q:before, q:after { content: ""; } | |
| blockquote, q { quotes: "" ""; } | |
| a img { border: none; } | |
| /* Removes Firefox imposed outline */ | |
| a { outline: none; } | |
| /* Clearing floats without extra markup */ | |
| .wrapper { display: inline-block; } | |
| .wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } | |
| * html .wrapper { height: 1%; } | |
| .wrapper { display: block; } | |
| /* -------------------------------------------------------------- | |
| Boilerplate typography.css | |
| * Sets up some sensible default typography. | |
| -------------------------------------------------------------- */ | |
| /* This is where you set your desired font size. The line-heights | |
| and vertical margins are automatically calculated from this. | |
| The percentage is of 16px (0.75 * 16px = 12px). */ | |
| body { font-size: 12px; } | |
| /* Default fonts and colors. */ | |
| body { font-family: Helvetica, Arial, sans-serif; } | |
| h1,h2,h3,h4,h5,h6 { font-family: Helvetica, Arial, sans-serif; } | |
| /* Headings | |
| -------------------------------------------------------------- */ | |
| h1,h2,h3,h4,h5,h6 { font-weight: bold; margin-bottom: 18px; } | |
| h1 { font-size: 36px; line-height: 1; } | |
| h2 { font-size: 24px; line-height: 1.2; } | |
| h3 { font-size: 18px; line-height: 1; } | |
| h4 { font-size: 15px; line-height: 1.2; } | |
| h5 { font-size: 12px; line-height: 1.5; } | |
| h6 { font-size: 11px; } | |
| /* Text elements | |
| -------------------------------------------------------------- */ | |
| p { margin: 0 0 18px; } | |
| ul, ol { margin: 0 18px 18px 18px; } | |
| ul { list-style-type: disc; } | |
| ol { list-style-type: decimal; } | |
| dl { margin: 0 0 18px 0; } | |
| dl dt { font-weight: bold; } | |
| dl dd { margin-left: 18px; } | |
| abbr, acronym { border-bottom: 1px dotted #000; } | |
| address { margin-top: 18px; font-style: italic; } | |
| del { color: #000; } | |
| a { color: #009; text-decoration: none; } | |
| a:hover { text-decoration: underline; } | |
| blockquote { margin: 18px; } | |
| strong { font-weight: bold; } | |
| em, dfn { font-style: italic; } | |
| dfn { font-weight: bold; } | |
| pre, code { margin: 18px 0; white-space: pre; } | |
| pre, code, tt { font: 12px monospace; line-height: 1.5; } | |
| tt { display: block; margin: 18px 0; line-height: 1.5; } | |
| /* Tables | |
| -------------------------------------------------------------- */ | |
| table { margin-bottom: 18px; } | |
| th { border-bottom: 2px solid #ddd; font-weight: bold; } | |
| td { border-bottom: 1px solid #ddd; } | |
| th,td { padding: 4px 10px 4px 0; } | |
| tfoot { font-style: italic; } | |
| caption { background: #ffc; } | |
| /* Some default classes | |
| -------------------------------------------------------------- */ | |
| .small { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } | |
| .large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } | |
| .quiet { color: #999; } | |
| .hide { display: none; } | |
| .highlight { background: #ffc; } | |
| .top { margin-top: 0; padding-top: 0; } | |
| .bottom { margin-bottom: 0; padding-bottom: 0; } | |
| /* -------------------------------------------------------------- | |
| Boilerplate forms.css | |
| * Sets up some default styling for forms | |
| -------------------------------------------------------------- */ | |
| label { font-weight: bold; } | |
| /* Fieldsets */ | |
| fieldset { padding: 1.4em; margin: 0 0 18px 0; border: 1px solid #ddd; } | |
| legend { padding: 0 .4em; font-weight: bold; font-size: 1.2em; } | |
| /* Textareas */ | |
| textarea { margin: 9px 9px 0 0; } | |
| textarea { padding: 9px; } | |
| /* hForm | |
| -------------------------------------------------------------- */ | |
| form.hform p { margin: 0 0 .5em; } | |
| form.hform p label { float: left; width: 100px; } | |
| form.hform p input { width: 200px; } | |
| form.hform p select { width: 200px; } | |
| form.hform p input.button { width: auto; } | |
| form.hform p input.checkbox { width: auto; } | |
| form.hform p input.radio { width: auto; } | |
| form.hform p.checkbox { margin-left: 100px; } | |
| form.hform p.checkbox label { float: none; } | |
| form.hform p.checkbox input { width: auto; } | |
| /* vForm | |
| -------------------------------------------------------------- */ | |
| form.vform p { margin: 0 0 .5em; } | |
| form.vform p label { display: block; } | |
| form.vform p.checkbox label { display: inline; } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| padding: 1.5em; | |
| } | |
| #main { | |
| width: 800px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| display: block; | |
| overflow: hidden; | |
| margin-bottom: 1.5em; | |
| } | |
| header h1 { | |
| margin: 0; | |
| float: left; | |
| margin: 0 18px 0 0; | |
| } | |
| header h1 a { | |
| text-decoration: none; | |
| } | |
| header .e1, header .b5 { color: #F00; } | |
| header .h2, header .o6 { color: #009; } | |
| header .a3, header .r7 { color: #FC0; } | |
| header .r4 { color: #9C0; } | |
| #toolbar { | |
| text-align: right; | |
| margin: 0 6px 6px 0; | |
| } | |
| nav { | |
| display: block; | |
| } | |
| nav ul { | |
| list-style: none; | |
| overflow: hidden; | |
| border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| background-color: #222; | |
| margin: 0; | |
| padding: 0 1em; | |
| } | |
| nav li { | |
| float: left; | |
| } | |
| nav li a { | |
| display: block; | |
| line-height: 2em; | |
| color: #FFF; | |
| text-decoration: none; | |
| padding: 0 1em; | |
| font-size: 18px; | |
| } | |
| nav li a:hover { | |
| background-color: #333339; | |
| } | |
| #info { | |
| background-color: #FFE; | |
| border: 1px solid #EED; | |
| border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| padding: 12px; | |
| } | |
| #info.loading { | |
| background: #FFE url(../images/spinner.gif) no-repeat center center; | |
| } | |
| #info dt { | |
| float: left; | |
| clear: left; | |
| width: 100px; | |
| text-align: right; | |
| padding-right: 9px; | |
| } | |
| #info dd { | |
| margin: 0 0 0 109px; | |
| } | |
| .description { | |
| margin: 1.5em 0; | |
| } | |
| /** Forms *********************/ | |
| input.text { | |
| font-size: 18px; | |
| } | |
| textarea { | |
| font-family: Helvetica, Arial, sans-serif; | |
| } | |
| label { | |
| text-transform: uppercase; | |
| font-size: 10px; | |
| color: #666; | |
| font-weight: bold; | |
| } | |
| table.listings { | |
| width: 100%; | |
| } | |
| table.listings td { | |
| line-height: 3em; | |
| padding: 0.5em; | |
| } | |
| #bid { | |
| border: 1px solid #cddbf4; | |
| background-color: #e1e9f8; | |
| padding: 12px; | |
| border-radius: 5px; | |
| -webkit-border-radius: 5px; | |
| -moz-border-radius: 5px; | |
| } | |
| h2#expired { | |
| background-color: #FFA; | |
| border: 1px solid #EEB; | |
| color: #AA6; | |
| border-radius: 10px; | |
| -webkit-border-radius: 10px; | |
| -moz-border-radius: 10px; | |
| padding: 9px; | |
| font-size: 1.5em; | |
| } | |
| h2#expired.winner { | |
| background-color: #AFA; | |
| border-color: #BEB; | |
| color: #6A6; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment