pixarea-compass-themes 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +6 -0
- data/.livereload +21 -0
- data/Gemfile +4 -0
- data/README +23 -0
- data/README.markdown +23 -0
- data/Rakefile +2 -0
- data/lib/pixarea-compass-themes.rb +10 -0
- data/lib/pixarea-compass-themes/version.rb +7 -0
- data/pixarea-compass-themes.gemspec +25 -0
- data/sass/_lib.sass +8 -0
- data/sass/_modules.sass +4 -0
- data/sass/_themes.sass +2 -0
- data/sass/home.sass +1 -0
- data/sass/lib/_font-stacks.scss +63 -0
- data/sass/lib/_formatting.sass +23 -0
- data/sass/lib/_palettes.sass +38 -0
- data/sass/lib/_pie.sass +12 -0
- data/sass/lib/_structure.sass +12 -0
- data/sass/lib/_tones.sass +5 -0
- data/sass/lib/_typo.sass +10 -0
- data/sass/modules/_forms.sass +1 -0
- data/sass/modules/_menus.sass +1 -0
- data/sass/modules/forms/_basic.sass +27 -0
- data/sass/modules/menus/_inline-blocks.sass +15 -0
- data/sass/theme.sass +5 -0
- data/sass/themes/_minipane.sass +32 -0
- data/sass/themes/_shapy.sass +32 -0
- data/sass/themes/minipane/_formatting.sass +4 -0
- data/sass/themes/minipane/_shadows.sass +1 -0
- data/sass/themes/minipane/_shapes.sass +6 -0
- data/sass/themes/minipane/_structure.sass +50 -0
- data/sass/themes/minipane/_tones.sass +57 -0
- data/sass/themes/minipane/tones/_burma.sass +26 -0
- data/sass/themes/minipane/tones/_dark.sass +73 -0
- data/sass/themes/shapy/_formatting.sass +4 -0
- data/sass/themes/shapy/_shadows.sass +16 -0
- data/sass/themes/shapy/_shapes.sass +32 -0
- data/sass/themes/shapy/_structure.sass +49 -0
- data/sass/themes/shapy/_tones.sass +59 -0
- data/sass/themes/shapy/tones/_burma.sass +29 -0
- data/sass/themes/shapy/tones/_circus.sass +34 -0
- data/sass/themes/shapy/tones/_dark.sass +69 -0
- data/sass/themes/shapy/tones/_firen.sass +25 -0
- data/sass/themes/shapy/tones/_rusty.sass +30 -0
- data/stylesheets/PIE.htc +77 -0
- data/stylesheets/home.css +0 -0
- data/stylesheets/theme.css +413 -0
- data/stylesheets/themes/shapy.css +62 -0
- data/templates/project/manifest.rb +2 -0
- data/templates/project/theme.sass +5 -0
- data/views/layouts/application.html.erb +21 -0
- metadata +117 -0
data/.gitignore
ADDED
data/.livereload
ADDED
@@ -0,0 +1,21 @@
|
|
1
|
+
# Lines starting with pound sign (#) are ignored.
|
2
|
+
|
3
|
+
# additional extensions to monitor
|
4
|
+
#config.exts << 'haml'
|
5
|
+
|
6
|
+
# exclude files with NAMES matching this mask
|
7
|
+
#config.exclusions << '~*'
|
8
|
+
# exclude files with PATHS matching this mask (if the mask contains a slash)
|
9
|
+
#config.exclusions << '/excluded_dir/*'
|
10
|
+
# exclude files with PATHS matching this REGEXP
|
11
|
+
#config.exclusions << /somedir.*(ab){2,4}.(css|js)$/
|
12
|
+
|
13
|
+
# reload the whole page when .js changes
|
14
|
+
#config.apply_js_live = false
|
15
|
+
# reload the whole page when .css changes
|
16
|
+
#config.apply_css_live = false
|
17
|
+
# reload the whole page when images (png, jpg, gif) change
|
18
|
+
#config.apply_images_live = false
|
19
|
+
|
20
|
+
# wait 100ms for more changes before reloading a page
|
21
|
+
config.grace_period = 0.8
|
data/Gemfile
ADDED
data/README
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
Pixarea theme system
|
2
|
+
by Daniel Reszka (blog.pixarea.com)
|
3
|
+
-----------------------------------
|
4
|
+
|
5
|
+
This is a personal CSS framework I'm building for my future projects, based on SASS and Compass.
|
6
|
+
|
7
|
+
My intention with this framework, is to be able to design websites directly in the browser, thus skipping Photoshop.
|
8
|
+
|
9
|
+
So, this theme system:
|
10
|
+
* Aims for extreme modularity thanks to the mixins, so everything can be re-used across projects.
|
11
|
+
* Takes advantage of CSS3 features: box-shadows, gradients, rounded-corners, to design websites in the browser.
|
12
|
+
* Uses javascript (PIE.js from css3pie.com) so most of these CSS3 effects will work immediately in IE.
|
13
|
+
|
14
|
+
It's very experimental for now, you can use it freely, but you have to know:
|
15
|
+
It is not complete, it is not well-documented, it is not well-tested, and it may not be ready to use for your projects.
|
16
|
+
Remember that everything here can be modified, broken, refactored at any time.
|
17
|
+
|
18
|
+
But if you like the approach, feel free to clone, play with it and share ideas.
|
19
|
+
|
20
|
+
|
21
|
+
|
22
|
+
|
23
|
+
|
data/README.markdown
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
Pixarea theme system - by Daniel Reszka (blog.pixarea.com)
|
2
|
+
==========================================================
|
3
|
+
|
4
|
+
This is a personal CSS framework I'm building for my future projects, based on SASS and Compass.
|
5
|
+
|
6
|
+
My intention with this framework, is to be able to design websites directly in the browser, thus skipping Photoshop.
|
7
|
+
|
8
|
+
So, this theme system:
|
9
|
+
|
10
|
+
* Aims for extreme modularity thanks to the mixins, so everything can be re-used across projects.
|
11
|
+
* Takes advantage of CSS3 features: box-shadows, gradients, rounded-corners, to design websites in the browser.
|
12
|
+
* Uses javascript (PIE.js from css3pie.com) so most of these CSS3 effects will work immediately in IE.
|
13
|
+
|
14
|
+
It's very experimental for now, you can use it freely, but you have to know:
|
15
|
+
It is not complete, it is not well-documented, it is not well-tested, and it may not be ready to use for your projects.
|
16
|
+
Remember that everything here can be modified, broken, refactored at any time.
|
17
|
+
|
18
|
+
But if you like the approach, feel free to clone, play with it and share ideas.
|
19
|
+
|
20
|
+
|
21
|
+
|
22
|
+
|
23
|
+
|
data/Rakefile
ADDED
@@ -0,0 +1,10 @@
|
|
1
|
+
require 'compass'
|
2
|
+
|
3
|
+
options = Hash.new
|
4
|
+
options[:stylesheets_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', 'sass'))
|
5
|
+
options[:templates_directory] = File.expand_path(File.join(File.dirname(__FILE__), '..', 'templates'))
|
6
|
+
|
7
|
+
Compass::Frameworks.register('pixarea-compass-themes', options)
|
8
|
+
|
9
|
+
|
10
|
+
|
@@ -0,0 +1,25 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
$:.push File.expand_path("../lib", __FILE__)
|
3
|
+
require "pixarea-compass-themes/version"
|
4
|
+
|
5
|
+
Gem::Specification.new do |s|
|
6
|
+
s.name = "pixarea-compass-themes"
|
7
|
+
s.version = Pixarea::Compass::Themes::VERSION
|
8
|
+
s.platform = Gem::Platform::RUBY
|
9
|
+
s.authors = ["Daniel Reszka"]
|
10
|
+
s.email = ["draens@hotmail.com"]
|
11
|
+
s.homepage = "https://github.com/danielres/pixarea-compass-themes"
|
12
|
+
s.summary = %q{A supra-modular CSS theming system based on COMPASS}
|
13
|
+
s.description = %q{A supra-modular CSS theming system based on COMPASS}
|
14
|
+
|
15
|
+
s.rubyforge_project = "pixarea-compass-themes"
|
16
|
+
|
17
|
+
s.files = `git ls-files`.split("\n")
|
18
|
+
s.test_files = `git ls-files -- {test,spec,features}/*`.split("\n")
|
19
|
+
s.executables = `git ls-files -- bin/*`.split("\n").map{ |f| File.basename(f) }
|
20
|
+
s.require_paths = ["lib"]
|
21
|
+
|
22
|
+
s.has_rdoc = false
|
23
|
+
s.add_dependency("compass", [">= 0.11.beta.3"])
|
24
|
+
|
25
|
+
end
|
data/sass/_lib.sass
ADDED
data/sass/_modules.sass
ADDED
data/sass/_themes.sass
ADDED
data/sass/home.sass
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
// @import /stylesheets/refinery/home.css
|
@@ -0,0 +1,63 @@
|
|
1
|
+
//
|
2
|
+
// Serif and sans-serif font stacks from:
|
3
|
+
//
|
4
|
+
// A Revised Font Stack
|
5
|
+
// http://www.awayback.com/revised-font-stack
|
6
|
+
//
|
7
|
+
//
|
8
|
+
// Monospace font stack from:
|
9
|
+
//
|
10
|
+
// 8 Definitive Web Font Stacks
|
11
|
+
// http://articles.sitepoint.com/article/eight-definitive-font-stacks
|
12
|
+
//
|
13
|
+
//
|
14
|
+
// Cursive font stack from:
|
15
|
+
//
|
16
|
+
// Build better CSS font stacks - Cursive font stack featuring Bradley Hand ITC
|
17
|
+
// http://www.codestyle.org/css/font-family/BuildBetterCSSFontStacks.shtml
|
18
|
+
//
|
19
|
+
|
20
|
+
// Serif font-stacks
|
21
|
+
|
22
|
+
$garamond-font-stack: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif !default;
|
23
|
+
$lucida-bright-font-stack: "Lucida Bright", Georgia, serif !default;
|
24
|
+
$palatino-font-stack: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif !default;
|
25
|
+
$big-caslon-font-stack: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif !default;
|
26
|
+
$didot-font-stack: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif !default;
|
27
|
+
$baskerville-font-stack: Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif !default;
|
28
|
+
$hoefler-text-font-stack: "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif !default;
|
29
|
+
$bodoni-mt-font-stack: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif !default;
|
30
|
+
$goudy-old-style-font-stack: "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif !default;
|
31
|
+
$constantia-font-stack: Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif !default;
|
32
|
+
$cambria-font-stack: Cambria, Georgia, serif !default;
|
33
|
+
$book-antiqua-font-stack: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif !default;
|
34
|
+
|
35
|
+
// Sans-Serif font-stacks
|
36
|
+
|
37
|
+
$optima-font-stack: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif !default;
|
38
|
+
$futura-font-stack: Futura, "Trebuchet MS", Arial, sans-serif !default;
|
39
|
+
$gill-sans-font-stack: "Gill Sans", "Gill Sans MT", Calibri, sans-serif !default;
|
40
|
+
$trebuchet-font-stack: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif !default;
|
41
|
+
$helvetica-font-stack: "Helvetica Neue", Arial, Helvetica, sans-serif !default;
|
42
|
+
$verdana-font-stack: Verdana, Geneva, sans-serif !default;
|
43
|
+
$lucida-grande-font-stack: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !default;
|
44
|
+
$geneva-font-stack: Geneva, Tahoma, Verdana, sans-serif !default;
|
45
|
+
$segoe-font-stack: Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif !default;
|
46
|
+
$candara-font-stack: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif !default;
|
47
|
+
$calibri-font-stack: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !default;
|
48
|
+
$franklin-gothic-font-stack: "Franklin Gothic Medium", Arial, sans-serif !default;
|
49
|
+
$tahoma-font-stack: Tahoma, Geneva, Verdana, sans-serif !default;
|
50
|
+
|
51
|
+
//
|
52
|
+
// Monospace font-stacks
|
53
|
+
//
|
54
|
+
// Consolas is not included in this stack because it is much smaller than the other fonts listed in the stack.
|
55
|
+
//
|
56
|
+
|
57
|
+
$monospace-font-stack: "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace !default;
|
58
|
+
|
59
|
+
//
|
60
|
+
// Cursive font-stacks
|
61
|
+
//
|
62
|
+
|
63
|
+
$cursive-font-stack: "Bradley Hand ITC", "Apple Chancery", "URW Chancery L", cursive !default;
|
@@ -0,0 +1,23 @@
|
|
1
|
+
|
2
|
+
=formatting-base
|
3
|
+
|
4
|
+
$blueprint-font-family : $verdana-font-stack
|
5
|
+
$blueprint-font-size : 14px
|
6
|
+
|
7
|
+
+blueprint-typography
|
8
|
+
|
9
|
+
#header h1
|
10
|
+
font-size: 2.0em
|
11
|
+
margin-bottom: 1em
|
12
|
+
h1
|
13
|
+
font-size: 1.8em
|
14
|
+
margin-bottom: 1em
|
15
|
+
h2
|
16
|
+
font-size: 1.6em
|
17
|
+
h3
|
18
|
+
font-size: 1.4em
|
19
|
+
h4
|
20
|
+
font-size: 1.2em
|
21
|
+
|
22
|
+
body
|
23
|
+
line-height: 1.8
|
@@ -0,0 +1,38 @@
|
|
1
|
+
// palette1: A rusty machine on fresh grass
|
2
|
+
$rusty-red: #C20500
|
3
|
+
$rusty-brown: #382116
|
4
|
+
$rusty-orange: #F55E18
|
5
|
+
$rusty-green: #32CA3A
|
6
|
+
$rusty-young-green: #58F518
|
7
|
+
// mixes:
|
8
|
+
$rusty-brownish-orange: desaturate(mix($rusty-orange, $rusty-brown, 50), 10)
|
9
|
+
|
10
|
+
// palette2: Mountains of Burma
|
11
|
+
$burma-darkblue: #354242
|
12
|
+
$burma-clearblue: #ACEBAE
|
13
|
+
$burma-sable: #FFFF9D
|
14
|
+
$burma-palegreen: #C9DE55
|
15
|
+
$burma-deepgreen: #7D9100
|
16
|
+
// mixes:
|
17
|
+
$burma-lightsable: lighten($burma-sable, 10)
|
18
|
+
|
19
|
+
// palette3: Firenze
|
20
|
+
$firen-blue: #468966
|
21
|
+
$firen-egg: #FFF0A5
|
22
|
+
$firen-deepegg: #FFB03B
|
23
|
+
$firen-brick: #B64926
|
24
|
+
$firen-deepbrick: #8E2800
|
25
|
+
|
26
|
+
// palette4: Victorian Circus
|
27
|
+
$circ-brown: #805E31
|
28
|
+
$circ-red: #AC2F35
|
29
|
+
$circ-yellow: #DECB48
|
30
|
+
$circ-green: #9DB174
|
31
|
+
$circ-white: #FFFDED
|
32
|
+
|
33
|
+
// palette5: Raspberry
|
34
|
+
$rasp-red: #BF0426
|
35
|
+
$rasp-bordeaux: #731022
|
36
|
+
$rasp-pink: #BF0436
|
37
|
+
$rasp-beige: #A68B3C
|
38
|
+
$rasp-white: #EDEDDD
|
data/sass/lib/_pie.sass
ADDED
@@ -0,0 +1,12 @@
|
|
1
|
+
=pie
|
2
|
+
behavior: url(/htc/PIE.htc)
|
3
|
+
|
4
|
+
=linear-gradient-pie($c1, $c2)
|
5
|
+
+linear-gradient(color-stops($c1, $c2), top)
|
6
|
+
-pie-background: linear-gradient($c1, $c2)
|
7
|
+
+pie
|
8
|
+
|
9
|
+
=border-radius-pie($radius: $default-border-radius, $vertical-radius: false)
|
10
|
+
+border-radius($radius, $vertical-radius)
|
11
|
+
+pie
|
12
|
+
|
data/sass/lib/_typo.sass
ADDED
@@ -0,0 +1,10 @@
|
|
1
|
+
=font-face-for($font, $variant: '')
|
2
|
+
+font-face("#{$font}", font-files("#{$font}/#{$font}-webfont.woff",woff, "#{$font}/#{$font}-webfont.ttf",truetype), "#{$font}/#{$font}-webfont.eot")
|
3
|
+
|
4
|
+
=font-smoothing-chrome($enabled: true)
|
5
|
+
@if $enabled == true
|
6
|
+
text-shadow: transparent 0 0 1px
|
7
|
+
|
8
|
+
|
9
|
+
$font1: cabndwebbold
|
10
|
+
$font2: comfortaa_regular
|
@@ -0,0 +1 @@
|
|
1
|
+
@import modules/forms/basic
|
@@ -0,0 +1 @@
|
|
1
|
+
@import modules/menus/inline-blocks
|
@@ -0,0 +1,27 @@
|
|
1
|
+
=form-basic($label-span:4, $label-align:left, $input-span:8, $textarea-span:12, $submit-span: 5)
|
2
|
+
label
|
3
|
+
width: span($label-span)
|
4
|
+
margin-right: $blueprint-grid-margin
|
5
|
+
float: left
|
6
|
+
text-align: $label-align
|
7
|
+
|
8
|
+
input[type=text]
|
9
|
+
width: ( $blueprint_grid_width * $input-span + $blueprint_grid_margin * ($input-span - 1) ) - 10px
|
10
|
+
padding: 5px
|
11
|
+
border-width: 0
|
12
|
+
|
13
|
+
input[type=submit]
|
14
|
+
width: span($submit-span)
|
15
|
+
padding: 5px 0
|
16
|
+
border-width: 0
|
17
|
+
|
18
|
+
textarea
|
19
|
+
width: ( $blueprint_grid_width * $textarea-span + $blueprint_grid_margin * ($textarea-span - 1) ) - 10px
|
20
|
+
padding: 5px
|
21
|
+
border-width: 0
|
22
|
+
|
23
|
+
.field
|
24
|
+
margin: 12px 0px
|
25
|
+
|
26
|
+
.actions
|
27
|
+
margin-left: $blueprint-grid-outer-width * $label-span
|
data/sass/theme.sass
ADDED
@@ -0,0 +1,32 @@
|
|
1
|
+
// @import /stylesheets/refinery/application.css
|
2
|
+
|
3
|
+
@import compass
|
4
|
+
@import blueprint
|
5
|
+
@import blueprint/reset/utilities
|
6
|
+
|
7
|
+
@import compass/css3/pie
|
8
|
+
$pie-behavior: stylesheet-url("../theme/stylesheets/PIE.htc")
|
9
|
+
|
10
|
+
@import lib
|
11
|
+
@import modules
|
12
|
+
|
13
|
+
@import themes/minipane/formatting
|
14
|
+
@import themes/minipane/structure
|
15
|
+
@import themes/minipane/tones
|
16
|
+
@import themes/minipane/shapes
|
17
|
+
@import themes/minipane/shadows
|
18
|
+
|
19
|
+
=theme-minipane($tones: burma)
|
20
|
+
/* RESET ---------------------------------------------------------------------*/
|
21
|
+
+blueprint-global-reset
|
22
|
+
/* STRUCTURE -----------------------------------------------------------------*/
|
23
|
+
+minipane-structure
|
24
|
+
/* FORMATTING-----------------------------------------------------------------*/
|
25
|
+
+minipane-formatting
|
26
|
+
/* TONES ---------------------------------------------------------------------*/
|
27
|
+
+minipane-tones($tones)
|
28
|
+
/* SHAPES --------------------------------------------------------------------*/
|
29
|
+
+minipane-shapes
|
30
|
+
/* SHADOWS -------------------------------------------------------------------*/
|
31
|
+
+minipane-shadows
|
32
|
+
|
@@ -0,0 +1,32 @@
|
|
1
|
+
// @import /stylesheets/refinery/application.css
|
2
|
+
|
3
|
+
@import compass
|
4
|
+
@import blueprint
|
5
|
+
@import blueprint/reset/utilities
|
6
|
+
|
7
|
+
@import compass/css3/pie
|
8
|
+
$pie-behavior: stylesheet-url("../theme/stylesheets/PIE.htc")
|
9
|
+
|
10
|
+
@import lib
|
11
|
+
@import modules
|
12
|
+
|
13
|
+
@import themes/shapy/formatting
|
14
|
+
@import themes/shapy/structure
|
15
|
+
@import themes/shapy/tones
|
16
|
+
@import themes/shapy/shapes
|
17
|
+
@import themes/shapy/shadows
|
18
|
+
|
19
|
+
=theme-shapy($tones: rusty)
|
20
|
+
/* RESET ---------------------------------------------------------------------*/
|
21
|
+
+blueprint-global-reset
|
22
|
+
/* STRUCTURE -----------------------------------------------------------------*/
|
23
|
+
+shapy-structure
|
24
|
+
/* FORMATTING-----------------------------------------------------------------*/
|
25
|
+
+shapy-formatting
|
26
|
+
/* TONES ---------------------------------------------------------------------*/
|
27
|
+
+shapy-tones($tones)
|
28
|
+
/* SHAPES --------------------------------------------------------------------*/
|
29
|
+
+shapy-shapes
|
30
|
+
/* SHADOWS -------------------------------------------------------------------*/
|
31
|
+
+shapy-shadows
|
32
|
+
|