bike
/
BikeBikeBike
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity
Browse Source

Looking a little more like a real site

development
Godwin 11 years ago
parent
5681ff1dc5
commit
693dcc31aa
9 changed files with 137 additions and 172 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      app/assets/images/nola.jpg
  2. 16
      app/assets/stylesheets/application.css.scss
  3. 14
      app/assets/stylesheets/foundation_and_overrides.scss
  4. 41
      app/assets/stylesheets/sass/_layout.scss
  5. 6
      app/assets/stylesheets/sass/_typography.scss
  6. 5
      app/controllers/pages_controller.rb
  7. 67
      app/views/layouts/application.html.haml
  8. 7
      app/views/pages/home.html.haml
  9. 153
      app/views/shared/_navbar.html.haml

BIN
app/assets/images/nola.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

16
app/assets/stylesheets/application.css.scss
View File

@ -8,11 +8,17 @@
* You're free to add application-wide styles to this file and they'll appear at the top of the * You're free to add application-wide styles to this file and they'll appear at the top of the
* compiled file, but it's generally better to create a new file per style scope. * compiled file, but it's generally better to create a new file per style scope.
* *
* = stub stubs/variables_overrides.css.scss
*= require_self
*= require_tree .
*/ */
// Fonts and other external imports
@import url(http://fonts.googleapis.com/css?family=Fjalla+One);
@import url(http://fonts.googleapis.com/css?family=Cantarell:400,700,400italic,700italic);
// Libraries
@import "compass"; @import "compass";
@import "foundation_and_overrides.scss"; @import "foundation_and_overrides";
@import "foundation";
// Local settings (also edit foundation_and_overrides.scss to modify global variables)
@import "sass/layout";
@import "sass/typography";

14
app/assets/stylesheets/foundation_and_overrides.scss
View File

@ -65,7 +65,7 @@ $default-float: left;
// $body-bg: #fff; // $body-bg: #fff;
// $body-font-color: #222; // $body-font-color: #222;
// $body-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; $body-font-family: 'Cantarell', sans-serif;
// $body-font-weight: normal; // $body-font-weight: normal;
// $body-font-style: normal; // $body-font-style: normal;
@ -172,7 +172,7 @@ $default-float: left;
// Control header font styles // Control header font styles
// $header-font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif; $header-font-family: 'Fjalla One', sans-serif;
// $header-font-weight: bold; // $header-font-weight: bold;
// $header-font-style: normal; // $header-font-style: normal;
// $header-font-color: #222; // $header-font-color: #222;
@ -1260,7 +1260,7 @@ $default-float: left;
// Height and margin // Height and margin
// $topbar-height: 45px; $topbar-height: 64px;
// $topbar-margin-bottom: 0; // $topbar-margin-bottom: 0;
// Control Input height for top bar // Control Input height for top bar
@ -1269,8 +1269,8 @@ $default-float: left;
// Controlling the styles for the title in the top bar // Controlling the styles for the title in the top bar
// $topbar-title-weight: bold; $topbar-title-weight: normal;
// $topbar-title-font-size: em-calc(17); $topbar-title-font-size: 2em;
// Style the top bar dropdown elements // Style the top bar dropdown elements
@ -1286,8 +1286,8 @@ $default-float: left;
// $topbar-link-color: #fff; // $topbar-link-color: #fff;
// $topbar-link-color-hover: #fff; // $topbar-link-color-hover: #fff;
// $topbar-link-color-active: #fff; // $topbar-link-color-active: #fff;
// $topbar-link-weight: bold; $topbar-link-weight: normal;
// $topbar-link-font-size: em-calc(13); $topbar-link-font-size: 1.2em;
// $topbar-link-hover-lightness: -30%; // Darken by 30% // $topbar-link-hover-lightness: -30%; // Darken by 30%
// $topbar-link-bg-hover: darken($topbar-bg-color, 3%); // $topbar-link-bg-hover: darken($topbar-bg-color, 3%);
// $topbar-link-bg-active: darken($topbar-bg-color, 3%); // $topbar-link-bg-active: darken($topbar-bg-color, 3%);

41
app/assets/stylesheets/sass/_layout.scss
View File

@ -0,0 +1,41 @@
/**
Layouts only
*/
#main-container, #footer, #nav-inner {
max-width: $large-screen;
margin: 0 auto;
}
$body-background-color: #EEE;
$main-container-background-color: #F4F4F4;
$content-background-color: #FFF;
$layout-border-color: #DDD;
body {
background-color: $body-background-color;
}
#main-container {
background-color: $main-container-background-color;
border: 1px solid $layout-border-color;
border-top: 0;
}
#main {
border-right: 1px solid $layout-border-color;
padding: 0;
}
article.content {
background-color: $content-background-color;
border-left: 1px solid $layout-border-color;
}
#article-header {
border-bottom: 1px solid $layout-border-color;
padding: 0;
}

6
app/assets/stylesheets/sass/_typography.scss
View File

@ -0,0 +1,6 @@
/**
Basic theme rules, html native elements only
*/

5
app/controllers/pages_controller.rb
View File

@ -1,5 +1,6 @@
class PagesController < ApplicationController class PagesController < ApplicationController
def home def home
end @title_img = '/assets/nola.jpg'
end
end end

67
app/views/layouts/application.html.haml
View File

@ -1,37 +1,44 @@
!!! !!!
%html{ lang: I18n.locale.to_s } %html{ lang: I18n.locale.to_s }
%head %head
%meta{ charset: 'utf-8' } %meta{ charset: 'utf-8' }
%meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' } %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' }
%title= yield_or_default :title, controller.action_name.titlecase %title= yield_or_default :title, controller.action_name.titlecase
= csrf_meta_tags = csrf_meta_tags
= yield :head = yield :head
/ Le HTML5 shim, for IE6-8 support of HTML elements / Le HTML5 shim, for IE6-8 support of HTML elements
/[if lt IE 9] /[if lt IE 9]
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script> <script src="http://html5shim.googlecode.com/svn/trunk/html5.js" type="text/javascript"></script>
/ Le styles / Le styles
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu:400,500,700', = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Ubuntu:400,500,700',
'application', 'application',
media: 'all' media: 'all'
/ Touch icons / Touch icons
%link{ href: asset_path('apple-touch-icon.png'), rel: 'apple-touch-icon' } %link{ href: asset_path('apple-touch-icon.png'), rel: 'apple-touch-icon' }
%link{ href: asset_path('apple-touch-icon-72x72.png'), rel: 'apple-touch-icon', sizes: '72x72' } %link{ href: asset_path('apple-touch-icon-72x72.png'), rel: 'apple-touch-icon', sizes: '72x72' }
%link{ href: asset_path('apple-touch-icon-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114' } %link{ href: asset_path('apple-touch-icon-114x114.png'), rel: 'apple-touch-icon', sizes: '114x114' }
%link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' } %link{ href: asset_path('apple-touch-icon-144x144.png'), rel: 'apple-touch-icon', sizes: '144x144' }
/ /
Le javascript Le javascript
\================================================== \==================================================
/ Placed at the top of the document 'cause of turbolinks / Placed at the top of the document 'cause of turbolinks
= javascript_include_tag 'application' = javascript_include_tag 'application'
= javascript_include_tag '//use.edgefonts.net/abel;amatic-sc.js'
%body %body
= render 'shared/navbar' = render 'shared/navbar'
#main-container.container #main-container.container.row
.content= yield %aside.columns.large-4.push-8
Stuff that is not directly related to this page will go here, things like recommend or popular articles.
#footer %section#main.columns.large-8.pull-4
.container= render 'shared/footer' %header#article-header.columns.large-12
%img{src: @title_img}
%nav.columns.large-2
Nav 2
%article.content.columns.large-10= yield
#footer
.container= render 'shared/footer'

7
app/views/pages/home.html.haml
View File

@ -1,5 +1,6 @@
- title t('hello') - title 'Bike!Bike!'
%h1 %h1
Ticket to Ride Bike!Bike!
%p.lead.muted %p.lead.muted
Ruby 2 + Rails 4.0.0 + Foundation Ruby 2 + Rails 4.0.0 + Foundation

153
app/views/shared/_navbar.html.haml
View File

@ -1,127 +1,30 @@
//.navbar.navbar-fixed-top
// .navbar-inner
// .container
// = link_to Rails.application.class.parent_name, root_path, class: 'brand'
%nav.top-bar %nav.top-bar
%ul.title-area #nav-inner
/ Title Area %ul.title-area
%li.name / Title Area
%h1 %li.name
%a{href: "#"} Top Bar Title %h1
/ Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone %a{href: "/"} Bike!Bike!
%li.toggle-topbar.menu-icon / Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone
%a{href: "#"} %li.toggle-topbar.menu-icon
%span Menu %a{href: "#"}
%section.top-bar-section %span Menu
/ Left Nav Section .top-bar-section
%ul.left / Left Nav Section
%li.divider %ul.left
%li.active %li.divider
%a{href: "#"} Main Item 1 %li.active
%li.divider %a{href: "#"} Conferences
%li %li.divider
%a{href: "#"} Main Item 2 %li
%li.divider %a{href: "#"} Organizations
%li.has-dropdown %li.divider
%a{href: "#"} Main Item 3 %li
%ul.dropdown %a{href: "#"} Resources
%li.has-dropdown %li.divider
%a{href: "#"} Dropdown Level 1a / Right Nav Section
%ul.dropdown %ul.right
%li %li.divider.hide-for-small
%label Dropdown Level 2 Label %li.has-form
%li %a.button{href: "#"} Sign In!
%a{href: "#"} Dropdown Level 2a
%li
%a{href: "#"} Dropdown Level 2b
%li.has-dropdown
%a{href: "#"} Dropdown Level 2c
%ul.dropdown
%li
%label Dropdown Level 3 Label
%li
%a{href: "#"} Dropdown Level 3a
%li
%a{href: "#"} Dropdown Level 3b
%li.divider
%li
%a{href: "#"} Dropdown Level 3c
%li
%a{href: "#"} Dropdown Level 2d
%li
%a{href: "#"} Dropdown Level 2e
%li
%a{href: "#"} Dropdown Level 2f
%li
%a{href: "#"} Dropdown Level 1b
%li
%a{href: "#"} Dropdown Level 1c
%li.divider
%li
%a{href: "#"} Dropdown Level 1d
%li
%a{href: "#"} Dropdown Level 1e
%li
%a{href: "#"} Dropdown Level 1f
%li.divider
%li
%a{href: "#"} See all →
%li.divider
/ Right Nav Section
%ul.right
%li.divider.hide-for-small
%li.has-dropdown
%a{href: "#"} Main Item 4
%ul.dropdown
%li
%label Dropdown Level 1 Label
%li.has-dropdown
%a{href: "#"} Dropdown Level 1a
%ul.dropdown
%li
%a{href: "#"} Dropdown Level 2a
%li
%a{href: "#"} Dropdown Level 2b
%li.has-dropdown
%a{href: "#"} Dropdown Level 2c
%ul.dropdown
%li
%a{href: "#"} Dropdown Level 3a
%li
%a{href: "#"} Dropdown Level 3b
%li
%a{href: "#"} Dropdown Level 3c
%li
%a{href: "#"} Dropdown Level 2d
%li
%a{href: "#"} Dropdown Level 2e
%li
%a{href: "#"} Dropdown Level 2f
%li
%a{href: "#"} Dropdown Level 1b
%li
%a{href: "#"} Dropdown Level 1c
%li.divider
%li
%label Dropdown Level 1 Label
%li
%a{href: "#"} Dropdown Level 1d
%li
%a{href: "#"} Dropdown Level 1e
%li
%a{href: "#"} Dropdown Level 1f
%li.divider
%li
%a{href: "#"} See all →
%li.divider
%li.has-form
%form
.row.collapse
.small-8.columns
%input{type: "text"}/
.small-4.columns
%a.alert.button{href: "#"} Search
%li.divider.show-for-small
%li.has-form
%a.button{href: "#"} Button!

Write Preview
Loading…
Cancel
Save