Permalink
Browse files

Improved demo page and header/nav/footer default styling.

  • Loading branch information...
1 parent 25b03bf commit 8cb5fa4a39473de9bf63c9b5329001cc22dcd000 @greendog99 committed Apr 10, 2011
View
@@ -20,7 +20,7 @@ quick set-up of new Rails applications.
* Adds a config/app_config.yml file and corresponding initializer, to facilitate app-specific config settings.
* Disables timestamped_migrations to make the filenames more usable in TextMate.
* Sets up a Git repository complete with gitignore list, and commits the entire project.
-* Adds a demos controller and several demo pages to help get started.
+* Adds a demonstration page to help get started (/demos)
## Prerequisites
@@ -42,7 +42,7 @@ to `http://localhost:3000/demos/text` and `http://localhost:3000/demos/grid` to
## Documentation
-This section will explain how to use each of the features.
+See the [documentation](documentation.html) page for a summary of how to use each of the features.
## To Do
@@ -1,11 +1,6 @@
class DemosController < ApplicationController
- def grid
- flash.now[:alert] = "This is an alert"
- flash.now[:notice] = "This is a notice"
- end
-
- def text
+ def show
flash.now[:alert] = "This is an alert"
flash.now[:notice] = "This is a notice"
end
@@ -1,18 +1,26 @@
#demo-grid
p
- font-size: 60px
+ font-size: 48px
text-align: center
- padding: 10px 0 10px 0
+ padding: 8px 0 2px 0
border: 1px solid black
- margin-bottom: 20px
+ margin-bottom: 16px
-.header
- @include grid-column(12)
-.main
- @include grid-column(10)
-.story
- @include grid-column(5)
-.sidebar
- @include grid-column(2)
- p
- line-height: 190px
+ .header
+ @include grid-column(12)
+ .main
+ @include grid-column(10)
+ .story
+ @include grid-column(5)
+ .sidebar
+ @include grid-column(2)
+ p
+ line-height: 146px
+
+#demo-main
+ .content
+ @include grid-column(12)
+ .main
+ @include grid-column(8)
+ .aside
+ @include grid-column(4)
@@ -9,3 +9,23 @@ html
@include min-height(900px)
@include box-shadow(#999, 0, 0, 6px)
+//
+// Basic Styles
+//
+
+h1, h2, h3, h4, h5, h6
+ font-weight: normal
+h1
+ font-size: 197%
+h2
+ font-size: 153%
+h3
+ font-size: 138.5%
+h4
+ font-size: 116%
+
+strong, th
+ font-weight: bold
+
+small
+ font-size: 93%
@@ -1,104 +0,0 @@
-@import compass/css3
-
-//-----------------------------------
-// Basic Styles
-//-----------------------------------
-
-h1, h2, h3, h4, h5, h6
- font-weight: normal
-
-h1
- +font-size(24px)
-
-h2
- +font-size(20px)
-
-h3
- +font-size(18px)
-
-h4
- +font-size(15px)
-
-strong, th
- font-weight: bold
-
-small
- // Use font-size mixin to convert to percentage for YUI
- // http://developer.yahoo.com/yui/3/cssfonts/#fontsize
- // approx 85% when base-font-size eq 13px
- +font-size(11px)
-
-// Add the 'required' attribute on inputs if you want to use these
-input:valid, textarea:valid
-
-input:invalid, textarea:invalid
- +border-radius(1px)
- +box-shadow(red, 0, 0, 5px, 0)
-
-.no-boxshadow input:invalid,
-.no-boxshadow textarea:invalid
- background-color: #f0dddd
-
-//-----------------------------------
-// HTML5 Boilerplate + http://www.1kbgrid.com/ Grid Layout
-//-----------------------------------
-
-body
- background-color: #f0f0f0
-
-div#container
-
-header#header
- background-color: #cdd9e2
- border-bottom: 1px solid #4f708b
- color: #444
- padding: 15px 0
- .title
- +col(9)
- h1
- +font-size(32px)
- +text-shadow(#edf9ff, 0px, 2px, 3px)
- .logo
- +col(3)
-
-nav#nav
- background-color: #456989
- border-top: 1px solid #87abc8
- border-bottom: 1px solid #e0e8f0
- +linear-gradient(color-stops(#7599b9, #456989))
- color: #fff
- padding: 10px 0
- .menu
- +col(9)
- .search
- +col(3)
- text-align: right
-
-div#main
- background-color: #f0f0f0
- color: #444
- border-top: 1px solid #c0d0e0
- padding: 15px 0
- div.content
- +col(12)
- div.main
- +col(9)
- div.aside
- +col(3)
-
-footer#footer
- border-top: 1px solid #b2b9bf
- border-bottom: 1px solid #c2c9cf
- background-color: #d0d9e0
- color: #333
- padding: 20px 0
- .copyright
- +col(2)
- +prepend(10)
- p
- +font-size(10px)
-
-//-----------------------------------
-// Custom Application Styles
-//-----------------------------------
-
@@ -1,4 +1,9 @@
-footer
- @include grid-row
+footer#page-footer
+ margin-top: 20px
+ margin-bottom: 20px
+ color: $base1
.copyright
- @include grid-column(12)
+ @include grid-column(6)
+ .credits
+ @include grid-column(6)
+ text-align: right
@@ -1,2 +1,6 @@
-header
+header#page-header
@include grid-row
+ margin-bottom: 20px
+ h1
+ @include grid-column(12)
+ color: $yellow
@@ -1,6 +1,16 @@
-nav
- @include grid-row
+nav#page-nav
+ background-color: $base02
+ color: $base2
+ border-top: 1px solid $base03
+ border-bottom: 1px solid #fffff8
+ margin-top: 16px
+ margin-bottom: 16px
+ padding-top: 10px
+ padding-bottom: 10px
+ @include clearfix
+ +linear-gradient(color-stops($base01, $base02))
.menu
- @include grid-column(9)
+ +grid-column(9)
.search
- @include grid-column(3)
+ +grid-column(3)
+ text-align: right
@@ -1,15 +0,0 @@
-#demo-grid
- .grid-row
- .header
- %p 12
-
- .grid-row
- .main
- %p 10
- .grid-row
- .story
- %p 5
- .story
- %p 5
- .sidebar
- %p 2
@@ -0,0 +1,114 @@
+#demo-grid
+ .grid-row
+ .header
+ %p 12
+
+ .grid-row
+ .main
+ %p 10
+ .grid-row
+ .story
+ %p 5
+ .story
+ %p 5
+ .sidebar
+ %p 2
+
+#demo-main
+ .grid-row
+ .content
+ %p
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas sodales metus sit amet varius. Nam euismod
+ bibendum ligula. Nam rhoncus, orci ac fermentum viverra, elit diam ornare neque, vel sodales ante lorem nec eros.
+ Aenean accumsan volutpat diam ac mattis. Praesent et magna mi, eu ornare enim. Nam mi odio, condimentum non convallis
+ eget, vestibulum non lacus. Integer sit amet lorem id ipsum ornare consequat. Integer tortor urna, mollis ullamcorper
+ pellentesque vel, sollicitudin at nisi. Aliquam vitae sapien massa, a feugiat dolor. Aliquam varius euismod lorem,
+ sed egestas nisi ultrices in. Ut commodo orci in urna malesuada tincidunt pellentesque diam blandit. Curabitur in sem
+ a magna consequat porttitor. Morbi elementum egestas turpis sit amet consectetur. Sed velit leo, pretium vel
+ tincidunt consectetur, consectetur ac neque. Vestibulum nec orci eu arcu hendrerit malesuada in vel quam. Fusce
+ sollicitudin, nisl vel suscipit facilisis, quam arcu adipiscing diam, nec lacinia arcu elit non lorem. Vestibulum
+ ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
+
+ %hr
+
+ .buttons
+ %button{:type => :submit, :class => 'positive', :name => :button, :value => :save} Save Changes
+ = link_to 'Cancel Changes', '/', :class => 'button neutral large'
+ = link_to 'Cancel Changes', '/', :class => 'button normal large'
+ = link_to 'Cancel Changes', '/', :class => 'button warning large'
+
+ %hr
+
+ %table.horizontal
+ %thead
+ %tr
+ %th Column 1
+ %th Column 2
+ %th Column 3
+ %tbody
+ %tr
+ %td Cell 1
+ %td Cell 2
+ %td Cell 3
+ %tr
+ %td Cell 1
+ %td Cell 2
+ %td Cell 3
+ %tr
+ %td Cell 1
+ %td Cell 2
+ %td Cell 3
+
+ %hr
+
+ %table.vertical
+ %tbody
+ %tr
+ %td Row 1
+ %td Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas sodales metus sit amet varius. Nam euismod bibendum ligula. Nam rhoncus, orci ac fermentum viverra
+ %tr
+ %td Row 2
+ %td Aenean aliquet erat at velit pellentesque posuere.
+ %tr
+ %td Row 3
+ %td Etiam at dui nunc, in iaculis dolor. Maecenas lorem risus, pellentesque eget convallis et, ornare id elit. Donec porta suscipit tincidunt. Nam quis mauris in augue viverra tempus quis non nibh. Cras porttitor lectus cursus lacus sagittis non volutpat tortor pharetra. Aliquam ultrices ullamcorper molestie. Integer fringilla nisl vitae justo tempor semper.
+
+ %hr
+
+ = form_tag '/' do
+ %fieldset
+ %legend Sample form
+ .form_input
+ = label_tag 'Name:'
+ = text_field_tag :name
+ %span.description.required
+ This is where you enter your name.
+
+ .form_input
+ = label_tag "Text:"
+ = text_area_tag :content
+
+ .checkbox_group
+ = check_box_tag :active
+ = label_tag "Check this box for great fun"
+
+ %hr
+
+ .grid-row
+ .main
+ %p
+ Aenean aliquet erat at velit pellentesque posuere. Proin euismod ultrices tellus at placerat. Proin luctus accumsan
+ metus, at dignissim elit feugiat ac. Fusce et odio nec orci mollis sollicitudin. Donec diam metus, porttitor sit amet
+ suscipit et, bibendum eget velit. Nam at augue felis. In rhoncus, nunc quis pharetra dapibus, nisl diam adipiscing
+ sapien, ac laoreet velit neque id mauris. Mauris nisi neque, suscipit nec ornare a, euismod et leo. In varius tellus
+ in turpis consequat tincidunt. Nunc tristique, nulla eget semper hendrerit, urna lacus blandit lorem, vitae imperdiet
+ lacus dolor et turpis. Nullam convallis tincidunt erat, id imperdiet nibh aliquet in. Vivamus sed ante tellus, at
+ lobortis nisl. Integer sed nulla eros. Nulla placerat orci quis nisl hendrerit mollis. Sed lectus justo, pulvinar
+ tincidunt lobortis ut, malesuada sed ligula. Proin sed est massa. Nullam venenatis odio ac nunc molestie ullamcorper.
+
+ .aside
+ %p
+ Etiam at dui nunc, in iaculis dolor. Maecenas lorem risus, pellentesque eget convallis et, ornare id elit. Donec
+ porta suscipit tincidunt. Nam quis mauris in augue viverra tempus quis non nibh. Cras porttitor lectus cursus lacus
+ sagittis non volutpat tortor pharetra. Aliquam ultrices ullamcorper molestie. Integer fringilla nisl vitae justo
+ tempor semper.
@@ -1,2 +1,5 @@
-.copyright
- %p Copyright &copy; 2011
+.grid-row
+ .copyright
+ %p This web site is Copyright &copy; 2011.
+ .credits
+ %p Credits and attributions here, for example.
@@ -0,0 +1,2 @@
+%h1
+ Welcome to the Web Site
@@ -1,7 +1,7 @@
-.menu
- %p
- This is your navigation bar. Enjoy.
-
-.search
- %p
- Search box goes here.
+.grid-row
+ .menu
+ %p
+ This is your navigation bar. Enjoy.
+ .search
+ %p
+ Search box goes here.
Oops, something went wrong.

0 comments on commit 8cb5fa4

Please sign in to comment.