Skip to content

Commit

Permalink
Removed sass stylesheets and added back bootstrap-sass gem. Needed to…
Browse files Browse the repository at this point in the history
… require it in the theme's engine for it to work. Have basic working bootstrip, breadcrumbs, thumbnails for product images, etc.
  • Loading branch information
andrewmp1 committed Mar 13, 2012
1 parent 6ea8d39 commit d354e19
Show file tree
Hide file tree
Showing 70 changed files with 723 additions and 5,941 deletions.
44 changes: 28 additions & 16 deletions README.md
@@ -1,19 +1,24 @@
SpreeBootstrapTheme
===================

Spree_bootstrap_theme is based on twitter's bootstrap project ported to sass.
Spree_bootstrap_theme is based on twitter's bootstrap project ported to sass using the bootstrap-sass gem.

https://github.com/thomas-mcdonald/bootstrap-sass

Link to bootstrap homepage:

http://twitter.github.com/bootstrap/download.html#plugins


Warning, alpha quality. Doesn't work yet!
Alpha Quality!!!!


This project is being built against spree version 1.0 and greater


Spree uses Skeleton as a lightweight css framework. With the different naming conventions in skeleton and spree with regards to bootstrap this project uses sass mixins as a bridge and where that doesn't completely work some deface overrides to views to enable bootstrap naming conventions.
Spree uses Skeleton as a lightweight css framework. With the different naming conventions in skeleton and spree
with regards to bootstrap. This project uses sass mixins as a bridge. When that doesn't completely work some
deface overrides are used add/remove div's & css classes to follow bootstrap naming conventions.


Some quick notes on the differences in the css markup conventions:
Expand All @@ -30,31 +35,26 @@ Some quick notes on the differences in the css markup conventions:
| flash=.flash | flash=.alert |


The current version uses bootstrap 2.0 with the fluid layout. This changes the grid into a percentage instead
of pixels.


Install
=======

gem 'spree_bootstrap_theme', :git => 'git://github.com/andrewmp1/spree_bootstrap_theme.git'
NOTE: It's important that you add this line at the bottom of the Gemfile, or at least AFTER any other extension/engine/gem that you'd like to theme (i.e. Spree)
NOTE: It's important that you add this line at the bottom of the Gemfile, or at least AFTER any other
extension/engine/gem that you'd like to theme (i.e. Spree)

Make sure you remove any includes in your stylesheets to the spree core stylesheets.

Add this line to a scss stylesheet in your rails app:
@import 'spree_bootstrap'

From the bootstrap-sass page. The theme vendors bootstrap in the same way as the gem bootstrap-sass:

# Notes from Bootstrap for SASS

`bootstrap-sass` is an SASS-powered version of [Twitter's Bootstrap](http://github.com/twitter/bootstrap), ready to drop right into your SASS powered applications.

Enjoy.

## Usage

#### CSS

Import "bootstrap" in your SCSS file of choice to get all of Bootstrap's styles, mixins and variables! Don't use Sproket's `//= require` directives for SASS files, because they're horrible and will kill your cat.

@import "bootstrap";

Need to configure a variable or two? Simple define the value of the variable you want to change *before* importing Bootstrap. SASS will be awesome and respect your existing definition rather than overwriting it with the Bootstrap defaults. A list of customisable variables can be found in the [Bootstrap documentation](http://twitter.github.com/bootstrap/less.html#variables).

$primaryButtonBackground: #f00;
Expand All @@ -80,5 +80,17 @@ Testing

#TODO

Create a generator that includes a stylesheet w/ the include and some of the twitter variables to override.

Need to finish styling:

forms

product#show

login/signup/cart

fix bootstrip navbar


Copyright (c) 2012 Drew Purdy, released under the New BSD License
65 changes: 11 additions & 54 deletions app/assets/stylesheets/store/_spree_bootstrap_mixins.css.scss
@@ -1,47 +1,5 @@
/* This file wraps bootstraps class names
to match spree's default class naming
scheme for things like buttons,
/* flash messages, etc. Any bootstrap */
/* variables defined here will override */
/* default values */
/*--------------------------------------*/
/* Colors
/*--------------------------------------*/
$c_base: #404042; /* Dark gray */
$c_gray1: #bbbbbb; /* Mid light gray */
$c_colored: #00ADEE; /* Light blue */
$c_colored_alt: #f0f8ff; /* Lighter blue */
$c_border: #dedede; /* Light gray */
$c_green: #8dba53; /* Spree green */
$c_red: #e45353; /* Error red */

/* require bootstrap files for mixins */

@import "bootstrap/variables";
@import "bootstrap/mixins";
@import "bootstrap/alerts";
@import "bootstrap/buttons";


/*------------------------------------------------------*/
/* Changes to the default bootstrap variables */
/*------------------------------------------------------*/
$gridColumns: 16;
$gridColumnWidth: 40px;

// Navbar
$navbarHeight: 30px;
$navbarBackground: $blueDark;
$navbarBackgroundHighlight: $blue;

$navbarText: $grayLight;
$navbarLinkColor: $grayLight;
$navbarLinkColorHover: $white;

/* Flash alerts Spree uses flash.notice, .success & .error */
/*--------------------------------------*/
/* Flash messages
/*--------------------------------------*/
// Flash messages/alerts: Spree uses flash.notice, .success & .error

.flash {
@extend .alert;

Expand Down Expand Up @@ -74,25 +32,24 @@ $navbarLinkColorHover: $white;
}
}

/* Buttons */
// Buttons

input[type="submit"], input[type="button"],
input[type= "reset"], button, a.button {
@extend .btn;
@extend .btn;
}

/* Breadcrumb */

/* Spree uses ol Bootstrap uses ul */
/* Spree's progress-steps are > bootstraps */

/* Forms */
// Breadcrumbs. Mixing bootstrap class breadcrumb
#breadcrumbs ul{
@extend .breadcrumb
}

// Spree's progress-steps are > bootstraps
/* Tables */
// Forms
@import "bootstrap";
// Tables
Expand Down

0 comments on commit d354e19

Please sign in to comment.