brandy 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +4 -0
- data/Gemfile +4 -0
- data/Rakefile +1 -0
- data/app/helpers/brandy_helper.rb +42 -0
- data/brandy.gemspec +24 -0
- data/lib/brandy.rb +15 -0
- data/lib/brandy/engine.rb +8 -0
- data/lib/brandy/version.rb +3 -0
- data/lib/stylesheets/_brandy.sass +1 -0
- data/lib/stylesheets/brandy/buttons.sass +107 -0
- data/lib/stylesheets/brandy/colors.sass +40 -0
- data/lib/stylesheets/brandy/components.sass +48 -0
- data/lib/stylesheets/brandy/forms.sass +33 -0
- data/lib/stylesheets/brandy/gradiants.sass +68 -0
- data/lib/stylesheets/brandy/grid-system.sass +70 -0
- data/lib/stylesheets/brandy/icons.sass +214 -0
- data/lib/stylesheets/brandy/responsive-elements.sass +3 -0
- data/lib/stylesheets/brandy/typography.sass +92 -0
- data/lib/templates/project/manifest.rb +11 -0
- data/lib/templates/project/screen.sass +2 -0
- data/vendor/assets/fonts/HelveticaNeueBold-demo.html +628 -0
- data/vendor/assets/fonts/HelveticaNeueLight-demo.html +628 -0
- data/vendor/assets/fonts/entypo-webfont.eot +0 -0
- data/vendor/assets/fonts/entypo-webfont.svg +165 -0
- data/vendor/assets/fonts/entypo-webfont.ttf +0 -0
- data/vendor/assets/fonts/entypo-webfont.woff +0 -0
- data/vendor/assets/fonts/helveticaneue-webfont.eot +0 -0
- data/vendor/assets/fonts/helveticaneue-webfont.svg +247 -0
- data/vendor/assets/fonts/helveticaneue-webfont.ttf +0 -0
- data/vendor/assets/fonts/helveticaneue-webfont.woff +0 -0
- data/vendor/assets/fonts/helveticaneuebold-webfont.eot +0 -0
- data/vendor/assets/fonts/helveticaneuebold-webfont.svg +246 -0
- data/vendor/assets/fonts/helveticaneuebold-webfont.ttf +0 -0
- data/vendor/assets/fonts/helveticaneuebold-webfont.woff +0 -0
- data/vendor/assets/fonts/helveticaneuelight-webfont.eot +0 -0
- data/vendor/assets/fonts/helveticaneuelight-webfont.svg +246 -0
- data/vendor/assets/fonts/helveticaneuelight-webfont.ttf +0 -0
- data/vendor/assets/fonts/helveticaneuelight-webfont.woff +0 -0
- data/vendor/assets/fonts/helveticaneuemedium-webfont.eot +0 -0
- data/vendor/assets/fonts/helveticaneuemedium-webfont.svg +249 -0
- data/vendor/assets/fonts/helveticaneuemedium-webfont.ttf +0 -0
- data/vendor/assets/fonts/helveticaneuemedium-webfont.woff +0 -0
- metadata +99 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
@@ -0,0 +1,42 @@
|
|
1
|
+
module BrandyHelper
|
2
|
+
|
3
|
+
def button_tag_with_icon(text, options = {})
|
4
|
+
css_classes = [ 'button', options.delete(:class) ]
|
5
|
+
css_classes << "#{options.delete(:color)}-gradiant" if options[:color]
|
6
|
+
css_classes << "icon-#{options.delete(:icon).to_s.dasherize}" if options[:icon]
|
7
|
+
|
8
|
+
button_tag text, options.merge( :class => css_classes.flatten.join(' ') )
|
9
|
+
end
|
10
|
+
|
11
|
+
def link_to_button(text, url, options = {})
|
12
|
+
css_classes = [ 'button', options.delete(:class) ]
|
13
|
+
css_classes << "#{options.delete(:color)}-gradiant" if options[:color]
|
14
|
+
css_classes << 'button-compact' if options.delete(:compact)
|
15
|
+
|
16
|
+
link_to_with_icon text, url, options.merge( :class => css_classes.flatten.join(' ') )
|
17
|
+
end
|
18
|
+
|
19
|
+
def link_to_with_icon(text, url, options = {})
|
20
|
+
css_classes = [ options.delete(:class) ]
|
21
|
+
css_classes << "icon-#{options.delete(:icon).to_s.dasherize}" if options[:icon]
|
22
|
+
|
23
|
+
link_to text, url, options.merge( :class => css_classes.flatten.join(' ') )
|
24
|
+
end
|
25
|
+
|
26
|
+
def mail_to_button(email, text, options = {})
|
27
|
+
css_classes = [ 'button', options.delete(:class) ]
|
28
|
+
css_classes << "#{options.delete(:color)}-gradiant" if options[:color]
|
29
|
+
css_classes << 'button-compact' if options.delete(:compact)
|
30
|
+
|
31
|
+
mail_to_with_icon text, email, options.merge( :class => css_classes.flatten.join(' ') )
|
32
|
+
end
|
33
|
+
|
34
|
+
def mail_to_with_icon(email, text, options = {})
|
35
|
+
css_classes = [ options.delete(:class) ]
|
36
|
+
css_classes << "icon-#{options.delete(:icon).to_s.dasherize}" if options[:icon]
|
37
|
+
|
38
|
+
mail_to email, text, options.merge( :class => css_classes.flatten.join(' ') )
|
39
|
+
end
|
40
|
+
|
41
|
+
|
42
|
+
end
|
data/brandy.gemspec
ADDED
@@ -0,0 +1,24 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "brandy/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "brandy"
|
7
|
+
s.version = Brandy::VERSION
|
8
|
+
s.authors = ["Michael Deering"]
|
9
|
+
s.email = ["mdeering@mdeering.com"]
|
10
|
+
s.homepage = "http://mdeering.com"
|
11
|
+
s.summary = %q{A Full Compass CSS Admin Theme}
|
12
|
+
s.description = %q{Besides being a flexible responsive admin theme I hope for this to be a great learning resource for the power of compass.}
|
13
|
+
|
14
|
+
s.rubyforge_project = "brandy"
|
15
|
+
|
16
|
+
s.files = `git ls-files`.split("\n")
|
17
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
18
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
19
|
+
s.require_paths = ["lib"]
|
20
|
+
|
21
|
+
# specify any dependencies here; for example:
|
22
|
+
# s.add_development_dependency
|
23
|
+
s.add_runtime_dependency "compass"
|
24
|
+
end
|
data/lib/brandy.rb
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
require "brandy/version"
|
2
|
+
require "brandy/engine"
|
3
|
+
|
4
|
+
module Brandy
|
5
|
+
end
|
6
|
+
|
7
|
+
# TODO: Put this into its own file and require it.
|
8
|
+
if defined?(Compass::Frameworks)
|
9
|
+
Compass::Frameworks.register('brandy',
|
10
|
+
:stylesheets_directory => File.join(File.dirname(__FILE__), 'stylesheets'),
|
11
|
+
:templates_directory => File.join(File.dirname(__FILE__), 'templates')
|
12
|
+
)
|
13
|
+
else
|
14
|
+
puts "The Brandy Compass Gem Could not register correctly as a Compass Framework."
|
15
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
// This is your framework's main stylesheet. Use it to import all default modules.
|
@@ -0,0 +1,107 @@
|
|
1
|
+
@import "compass/typography/vertical_rhythm"
|
2
|
+
@import "compass/css3/inline-block"
|
3
|
+
@import "compass/css3/text-shadow"
|
4
|
+
@import "compass/css3/border-radius"
|
5
|
+
@import "compass/css3/box-shadow"
|
6
|
+
|
7
|
+
=button-base
|
8
|
+
+adjust-font-size-to(13px)
|
9
|
+
+adjust-leading-to(3)
|
10
|
+
+background-image(linear-gradient(top, #FEFEFE, #D7DBDF))
|
11
|
+
+border-radius(4px)
|
12
|
+
+box-shadow(rgba(255, 255, 255, 0.3) 0 1px 0 0 inset, rgba(0, 0, 0, 0.25) 0 1px 1px 0)
|
13
|
+
border-color: #CCCCCC
|
14
|
+
border-style: solid
|
15
|
+
border-width: 1px
|
16
|
+
color: #666666
|
17
|
+
cursor: pointer
|
18
|
+
+inline-block
|
19
|
+
font-weight: bold
|
20
|
+
height: 34px
|
21
|
+
line-height: 34px
|
22
|
+
margin: 0px
|
23
|
+
padding: 0 13px
|
24
|
+
position: relative
|
25
|
+
+single-text-shadow
|
26
|
+
text-align: center
|
27
|
+
text-decoration: none
|
28
|
+
|
29
|
+
=button-big
|
30
|
+
+adjust-font-size-to(21px)
|
31
|
+
height: 55px
|
32
|
+
line-height: 55px
|
33
|
+
padding: 0 21px
|
34
|
+
|
35
|
+
=button-compact
|
36
|
+
height: 21px
|
37
|
+
line-height: 21px
|
38
|
+
padding: 0 8px
|
39
|
+
|
40
|
+
=button-full-width
|
41
|
+
padding: 0 0 0 0
|
42
|
+
width: 100%
|
43
|
+
|
44
|
+
=button-huge
|
45
|
+
+adjust-font-size-to(34px)
|
46
|
+
height: 89px
|
47
|
+
line-height: 89px
|
48
|
+
padding: 0 34px
|
49
|
+
|
50
|
+
=button-tiny
|
51
|
+
+adjust-font-size-to(8px)
|
52
|
+
height: 17px
|
53
|
+
line-height: 17px
|
54
|
+
padding: 0 5px
|
55
|
+
|
56
|
+
=buttons
|
57
|
+
|
58
|
+
.button
|
59
|
+
+button-base
|
60
|
+
|
61
|
+
.button-big
|
62
|
+
+button-big
|
63
|
+
|
64
|
+
.button-compact
|
65
|
+
+button-compact
|
66
|
+
|
67
|
+
.button-huge
|
68
|
+
+button-huge
|
69
|
+
|
70
|
+
.button-tiny
|
71
|
+
+button-tiny
|
72
|
+
|
73
|
+
.button-full-width
|
74
|
+
+button-full-width
|
75
|
+
|
76
|
+
.compact
|
77
|
+
|
78
|
+
.button
|
79
|
+
+button-compact
|
80
|
+
|
81
|
+
|
82
|
+
=button-group
|
83
|
+
+inline-block
|
84
|
+
height: 34px
|
85
|
+
line-heigh: 34px
|
86
|
+
margin-bottom: 2px
|
87
|
+
margin-top: -2px
|
88
|
+
padding-left: 1px
|
89
|
+
vertical-align: middle
|
90
|
+
|
91
|
+
>.button
|
92
|
+
+border-radius(0)
|
93
|
+
float: left
|
94
|
+
margin-left: -1px
|
95
|
+
|
96
|
+
>.button:first-child
|
97
|
+
border-left-width: 1px
|
98
|
+
+border-radius(4px 0 0 4px)
|
99
|
+
|
100
|
+
>.button:last-child
|
101
|
+
border-right-width: 1px
|
102
|
+
+border-radius(0 4px 4px 0)
|
103
|
+
|
104
|
+
=button-groups
|
105
|
+
|
106
|
+
.button-group
|
107
|
+
+button-group
|
@@ -0,0 +1,40 @@
|
|
1
|
+
// Generic Colors
|
2
|
+
$anthracite: #4C4C4C !default
|
3
|
+
$black: black !default
|
4
|
+
$blue: #0059A0 !default
|
5
|
+
$green: #99C624 !default
|
6
|
+
$grey: #A5A5A5 !default
|
7
|
+
$orange: #FFAE00 !default
|
8
|
+
$red: #DD380D !default
|
9
|
+
$silver: #CCCCCC !default
|
10
|
+
$white: white !default
|
11
|
+
|
12
|
+
=color-classes
|
13
|
+
|
14
|
+
.anthracite
|
15
|
+
color: $anthracite
|
16
|
+
|
17
|
+
.black
|
18
|
+
color: $black
|
19
|
+
|
20
|
+
.blue
|
21
|
+
color: $blue
|
22
|
+
|
23
|
+
.green
|
24
|
+
color: $green
|
25
|
+
|
26
|
+
.grey
|
27
|
+
color: $grey
|
28
|
+
|
29
|
+
.orange
|
30
|
+
color: $orange
|
31
|
+
|
32
|
+
.red
|
33
|
+
color: $red
|
34
|
+
|
35
|
+
.silver
|
36
|
+
color: $silver
|
37
|
+
|
38
|
+
.white
|
39
|
+
color: $white
|
40
|
+
|
@@ -0,0 +1,48 @@
|
|
1
|
+
@import "compass/css3/border-radius"
|
2
|
+
@import 'colors'
|
3
|
+
@import 'gradiants'
|
4
|
+
|
5
|
+
$brandy-block-border-color: $silver !default
|
6
|
+
$brandy-block-color: $silver !default
|
7
|
+
$brandy-block-radius: 4px !default
|
8
|
+
|
9
|
+
=block
|
10
|
+
border-color: #BFBFBF
|
11
|
+
+border-radius($brandy-block-radius)
|
12
|
+
border-style: solid
|
13
|
+
border-width: 1px
|
14
|
+
position: relative
|
15
|
+
|
16
|
+
=block-content
|
17
|
+
padding: 20px !important
|
18
|
+
|
19
|
+
=block-title
|
20
|
+
border-color: $brandy-block-border-color
|
21
|
+
+border-radius(($brandy-block-radius - 1) ($brandy-block-radius - 1) 0 0)
|
22
|
+
color: $brandy-block-color
|
23
|
+
line-height: 55px
|
24
|
+
padding: 13px
|
25
|
+
position: relative
|
26
|
+
+white-gradiant
|
27
|
+
|
28
|
+
h3
|
29
|
+
+float-left
|
30
|
+
margin-right: 13px
|
31
|
+
|
32
|
+
.search
|
33
|
+
+float-left
|
34
|
+
|
35
|
+
// Mixins for including al the block behaviour
|
36
|
+
=blocks
|
37
|
+
.block
|
38
|
+
+block
|
39
|
+
|
40
|
+
.block-content
|
41
|
+
+block-content
|
42
|
+
|
43
|
+
.block-title
|
44
|
+
+block-title
|
45
|
+
|
46
|
+
.compact
|
47
|
+
margin-top: -27px
|
48
|
+
|
@@ -0,0 +1,33 @@
|
|
1
|
+
=fieldset
|
2
|
+
border-color: $silver
|
3
|
+
+border-radius(10px)
|
4
|
+
border-style: solid
|
5
|
+
border-width: 1px
|
6
|
+
margin-bottom: 21px
|
7
|
+
padding: 20px
|
8
|
+
+white-gradiant
|
9
|
+
|
10
|
+
legend
|
11
|
+
+border-radius(3px)
|
12
|
+
+button-base
|
13
|
+
border-style: solid
|
14
|
+
border-width: 1px
|
15
|
+
margin-bottom: 13px
|
16
|
+
padding: 0 8px
|
17
|
+
text-align: left
|
18
|
+
|
19
|
+
=forms
|
20
|
+
|
21
|
+
fieldset
|
22
|
+
+fieldset
|
23
|
+
|
24
|
+
input
|
25
|
+
+border-radius(4px)
|
26
|
+
font-size: 18px
|
27
|
+
line-height: 18px
|
28
|
+
padding: 8px 5px
|
29
|
+
|
30
|
+
label
|
31
|
+
font-size: 18px
|
32
|
+
font-weight: bold
|
33
|
+
line-height: 16px
|
@@ -0,0 +1,68 @@
|
|
1
|
+
@import "compass/css3/images"
|
2
|
+
|
3
|
+
=anthracite-gradiant
|
4
|
+
+background-image(linear-gradient(top, #565656, #404040))
|
5
|
+
border-color: #282E36
|
6
|
+
color: white
|
7
|
+
|
8
|
+
=black-gradiant
|
9
|
+
+background-image(linear-gradient(top, #333333, black))
|
10
|
+
border-color: black
|
11
|
+
color: white
|
12
|
+
|
13
|
+
=blue-gradiant
|
14
|
+
+background-image(linear-gradient(top, #006AAC, #00438D))
|
15
|
+
border-color: #004795
|
16
|
+
color: white
|
17
|
+
|
18
|
+
=green-gradiant
|
19
|
+
+background-image(linear-gradient(top, #BFDD4D, #80B514))
|
20
|
+
border-color: #6D960C
|
21
|
+
color: white
|
22
|
+
|
23
|
+
=grey-gradiant
|
24
|
+
+background-image(linear-gradient(top, #B3B3B3, #939393))
|
25
|
+
border-color: #666666
|
26
|
+
color: white
|
27
|
+
|
28
|
+
=orange-gradiant
|
29
|
+
+background-image(linear-gradient(top, #FFB900, #FF9E00))
|
30
|
+
border-color: #CC9707
|
31
|
+
color: white
|
32
|
+
|
33
|
+
=red-gradiant
|
34
|
+
+background-image(linear-gradient(top, #E24913, #D52607))
|
35
|
+
border-color: #931A03
|
36
|
+
color: white
|
37
|
+
|
38
|
+
=white-gradiant
|
39
|
+
+background-image(linear-gradient(top, #F7F7F7, #E4E7EB))
|
40
|
+
border-color: #CCCCCC
|
41
|
+
color: #666666
|
42
|
+
|
43
|
+
=gradiants
|
44
|
+
|
45
|
+
.anthracite-gradiant
|
46
|
+
+anthracite-gradiant
|
47
|
+
|
48
|
+
.black-gradiant
|
49
|
+
+black-gradiant
|
50
|
+
|
51
|
+
.blue-gradiant
|
52
|
+
+blue-gradiant
|
53
|
+
|
54
|
+
.green-gradiant
|
55
|
+
+green-gradiant
|
56
|
+
|
57
|
+
.grey-gradiant
|
58
|
+
+grey-gradiant
|
59
|
+
|
60
|
+
.orange-gradiant
|
61
|
+
+orange-gradiant
|
62
|
+
|
63
|
+
.red-gradiant
|
64
|
+
+red-gradiant
|
65
|
+
|
66
|
+
.white-gradiant
|
67
|
+
+white-gradiant
|
68
|
+
|
@@ -0,0 +1,70 @@
|
|
1
|
+
/* Brandy Grid
|
2
|
+
|
3
|
+
Most of this is taken from the Sinter Framwork https://github.com/idangazit/sinter
|
4
|
+
I used it as a learning example while trying to wrap my head around this whole
|
5
|
+
responsive design stuff.
|
6
|
+
|
7
|
+
@import "compass/utilities/general/clearfix"
|
8
|
+
@import "compass/layout/grid-background"
|
9
|
+
|
10
|
+
// Fundamental variables:
|
11
|
+
$brandy-column-width: 60px
|
12
|
+
$brandy-gutter-width: 20px
|
13
|
+
|
14
|
+
// Grid Math Functions
|
15
|
+
@function column-width($columns)
|
16
|
+
@return ($brandy-column-width * $columns) + ($brandy-gutter-width * ($columns - 1))
|
17
|
+
|
18
|
+
@function grid-padding-px($columns)
|
19
|
+
@if $columns == 9
|
20
|
+
@return 34px
|
21
|
+
@else
|
22
|
+
@return 10px
|
23
|
+
|
24
|
+
// The Grid
|
25
|
+
=grid($columns)
|
26
|
+
+clearfix
|
27
|
+
margin-left: auto
|
28
|
+
margin-right: auto
|
29
|
+
padding-left: grid-padding-px($columns)
|
30
|
+
padding-right: grid-padding-px($columns)
|
31
|
+
width: column-width($columns)
|
32
|
+
|
33
|
+
=columns($columns)
|
34
|
+
display: inline // IE6 double-margin fix
|
35
|
+
float: left // Triggers block mode on normal browsers
|
36
|
+
margin-left: $brandy-gutter-width / 2
|
37
|
+
margin-right: $brandy-gutter-width / 2
|
38
|
+
width: column-width($columns)
|
39
|
+
|
40
|
+
=prefix($columns)
|
41
|
+
padding-left: column-width($columns) + $brandy-gutter-width
|
42
|
+
|
43
|
+
=suffix($columns)
|
44
|
+
padding-right: column-width($columns) + $brandy-gutter-width
|
45
|
+
|
46
|
+
=pad($columns)
|
47
|
+
+prefix($columns)
|
48
|
+
+suffix($columns)
|
49
|
+
|
50
|
+
=full($columns, $pad: 0)
|
51
|
+
+columns($columns)
|
52
|
+
+pad($pad)
|
53
|
+
+first
|
54
|
+
+last
|
55
|
+
|
56
|
+
=first
|
57
|
+
margin-left: 0px
|
58
|
+
|
59
|
+
=full-width($columns)
|
60
|
+
+columns($columns)
|
61
|
+
+first
|
62
|
+
+last
|
63
|
+
|
64
|
+
=last
|
65
|
+
margin-right: 0px
|
66
|
+
|
67
|
+
// Toys
|
68
|
+
=brandy-grid-background($columns)
|
69
|
+
+column-grid-background($columns, $brandy-column-width, $brandy-gutter-width)
|
70
|
+
|