pixarea-compass-themes 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.markdown +17 -0
- data/lib/pixarea-compass-themes/version.rb +1 -1
- data/sass/pixarea/lib/_formatting.sass +1 -1
- data/sass/pixarea/themes/minipane/_shapes.sass +3 -3
- data/sass/pixarea/themes/minipane/_structure.sass +10 -10
- data/sass/pixarea/themes/minipane/tones/_burma.sass +4 -4
- data/sass/pixarea/themes/minipane/tones/_dark.sass +5 -5
- data/sass/pixarea/themes/shapy/_shadows.sass +6 -6
- data/sass/pixarea/themes/shapy/_shapes.sass +7 -7
- data/sass/pixarea/themes/shapy/_structure.sass +12 -12
- data/sass/pixarea/themes/shapy/_tones.sass +1 -1
- data/sass/pixarea/themes/shapy/tones/_burma.sass +4 -4
- data/sass/pixarea/themes/shapy/tones/_circus.sass +4 -4
- data/sass/pixarea/themes/shapy/tones/_dark.sass +4 -4
- data/sass/pixarea/themes/shapy/tones/_firen.sass +4 -4
- data/sass/pixarea/themes/shapy/tones/_rusty.sass +4 -4
- data/templates/project/_base.sass +13 -0
- data/templates/project/theme.sass +28 -3
- metadata +3 -4
- data/README +0 -23
- data/views/layouts/application.html.erb +0 -21
data/README.markdown
CHANGED
@@ -17,7 +17,24 @@ Remember that everything here can be modified, broken, refactored at any time.
|
|
17
17
|
|
18
18
|
But if you like the approach, feel free to clone, play with it and share ideas.
|
19
19
|
|
20
|
+
Install as a gem
|
21
|
+
----------------
|
20
22
|
|
23
|
+
gem install pixarea-compass-themes
|
21
24
|
|
25
|
+
Generate a theme
|
26
|
+
----------------
|
27
|
+
This project is a Compass plugin.
|
28
|
+
So you have to install Compass first, then you can create your new project with:
|
22
29
|
|
30
|
+
compass create MY_THEME -r pixarea-compass-themes -u pixarea-compass-themes --syntax sass
|
23
31
|
|
32
|
+
Where MY_THEME is the name of your project.
|
33
|
+
|
34
|
+
Note: Don't use "--syntax sass" if you prefer the scss syntax.
|
35
|
+
|
36
|
+
To remove Compass line comments
|
37
|
+
-------------------------------
|
38
|
+
Add this to the file config.rb:
|
39
|
+
|
40
|
+
line_comments = false
|
@@ -8,39 +8,39 @@
|
|
8
8
|
// Or you can set $blueprint-grid-width to a fixed value and unset $blueprint-container-size -- it will be calculated for you.
|
9
9
|
$blueprint-grid-width: ($blueprint-container-size + $blueprint-grid-margin) / $blueprint-grid-columns - $blueprint-grid-margin
|
10
10
|
|
11
|
-
#
|
11
|
+
#{$_body}_content_title
|
12
12
|
+visually-hide
|
13
13
|
|
14
|
-
|
14
|
+
#{$_inner}
|
15
15
|
+box
|
16
16
|
|
17
|
-
#
|
17
|
+
#{$_page_container}
|
18
18
|
+container-alt
|
19
19
|
|
20
|
-
#
|
20
|
+
#{$_header}
|
21
21
|
padding-top: 20px
|
22
22
|
margin-bottom: 5px
|
23
23
|
|
24
|
-
#
|
24
|
+
#{$_footer}
|
25
25
|
margin-top: 10px
|
26
26
|
padding-left: 20px
|
27
27
|
|
28
|
-
#
|
28
|
+
#{$_body}_content
|
29
29
|
+clearfix
|
30
30
|
position: relative
|
31
31
|
|
32
|
-
#
|
32
|
+
#{$_body}_content_left
|
33
33
|
+column(16)
|
34
|
-
|
34
|
+
#{$_no_body_content_2} &
|
35
35
|
+column(22)
|
36
36
|
@import compass/layout/stretching
|
37
|
-
#
|
37
|
+
#{$_body}_content_right
|
38
38
|
+column(8)
|
39
39
|
+last
|
40
40
|
+stretch-y
|
41
41
|
right: 0
|
42
42
|
|
43
|
-
#
|
43
|
+
#{$_menu_1}
|
44
44
|
+menu-inline-blocks(4)
|
45
45
|
|
46
46
|
/* FORMS ------------------------------*/
|
@@ -11,15 +11,15 @@
|
|
11
11
|
height: 100%
|
12
12
|
body
|
13
13
|
+linear-gradient-pie(#333 0%, #999 100%)
|
14
|
-
#
|
14
|
+
#{$_header}
|
15
15
|
h1
|
16
16
|
background: $darkblue
|
17
|
-
#
|
17
|
+
#{$_body}_content_left
|
18
18
|
background: $lightsable
|
19
|
-
#
|
19
|
+
#{$_menu_1} li
|
20
20
|
background: $lightsable
|
21
21
|
+linear-gradient-pie($palegreen 0%, $deepgreen 100%)
|
22
|
-
#
|
22
|
+
#{$_body}_content_right #{$_inner}
|
23
23
|
$framb: #A83438
|
24
24
|
background: $framb
|
25
25
|
border: 1px solid $framb - #222222
|
@@ -20,11 +20,11 @@
|
|
20
20
|
+link-colors($lighter, $lighter + 30, $lighter, $lighter, $lighter)
|
21
21
|
+hover-link
|
22
22
|
|
23
|
-
#
|
23
|
+
#{$_header}
|
24
24
|
h1
|
25
25
|
color: $neutral
|
26
26
|
|
27
|
-
#
|
27
|
+
#{$_menu_1} li
|
28
28
|
a
|
29
29
|
+link-colors(inherit, inherit)
|
30
30
|
text-decoration: none
|
@@ -34,13 +34,13 @@
|
|
34
34
|
background: $bg + 30
|
35
35
|
color: $light
|
36
36
|
|
37
|
-
#
|
37
|
+
#{$_footer}
|
38
38
|
color: ($bg / 2) + ($neutral / 2.5)
|
39
39
|
|
40
|
-
#
|
40
|
+
#{$_body}_content_left
|
41
41
|
background: $dark + 30
|
42
42
|
|
43
|
-
#
|
43
|
+
#{$_body}_content_right
|
44
44
|
background: $dark + 10
|
45
45
|
color: $neutral - 50
|
46
46
|
//border: 2px solid $dark - 10
|
@@ -4,13 +4,13 @@ $shadow-color: black !default
|
|
4
4
|
|
5
5
|
$default-box-shadow-color: $shadow-color
|
6
6
|
$default-box-shadow-blur: 15px
|
7
|
-
#
|
8
|
-
#
|
9
|
-
#
|
10
|
-
#
|
7
|
+
#{$_body}_content_left,
|
8
|
+
#{$_menu_1} a,
|
9
|
+
#{$_header} h1,
|
10
|
+
#{$_header} h1 a
|
11
11
|
+single-box-shadow
|
12
|
-
#
|
12
|
+
#{$_header} h1 a
|
13
13
|
+text-shadow(0,0,4px,transparentize($shadow-color, 0.7))
|
14
14
|
//filter: Shadow(Color=$shadow-color, Direction=135, Strength=5)
|
15
|
-
#
|
15
|
+
#{$_body}_content_right #{$_inner}
|
16
16
|
+box-shadow(transparentize(black, 0.6), -6px, 6px, 14px, 0)
|
@@ -9,10 +9,10 @@
|
|
9
9
|
=shapy-shapes-
|
10
10
|
$default-border-radius: 10px
|
11
11
|
+shapy-shapes-form
|
12
|
-
#
|
13
|
-
#
|
14
|
-
#
|
15
|
-
#
|
12
|
+
#{$_header} h1,
|
13
|
+
#{$_header} h1 a,
|
14
|
+
#{$_menu_1} a,
|
15
|
+
#{$_body}_content_left
|
16
16
|
+pie
|
17
17
|
+border-radius
|
18
18
|
|
@@ -24,9 +24,9 @@
|
|
24
24
|
+border-radius-pie(50px $b)
|
25
25
|
a
|
26
26
|
+border-radius-pie(50px $b)
|
27
|
-
#
|
27
|
+
#{$_body}_content_right #{$_inner}
|
28
28
|
+border-radius-pie($b $b*4 $b*4 $b)
|
29
|
-
#
|
29
|
+
#{$_body}_content_left
|
30
30
|
+border-radius-pie($b)
|
31
|
-
#
|
31
|
+
#{$_menu_1} a
|
32
32
|
+border-radius-pie($b $b 0 0)
|
@@ -1,33 +1,33 @@
|
|
1
1
|
=shapy-structure
|
2
|
-
#
|
2
|
+
#{$_body}_content_title
|
3
3
|
+visually-hide
|
4
4
|
|
5
|
-
|
5
|
+
#{$_inner}
|
6
6
|
+box
|
7
7
|
|
8
|
-
#
|
9
|
-
#
|
8
|
+
#{$_page}
|
9
|
+
#{$_header}
|
10
10
|
+container-alt
|
11
11
|
padding-top: 20px
|
12
|
-
#
|
12
|
+
#{$_body}
|
13
13
|
+container-alt
|
14
|
-
#
|
14
|
+
#{$_body}_content_left
|
15
15
|
+column(17)
|
16
|
-
|
16
|
+
#{$_inner}
|
17
17
|
padding-right: 100px
|
18
|
-
|
18
|
+
#{$_no_body_content_2} #{$_body}_content_left
|
19
19
|
+column(22)
|
20
|
-
#
|
20
|
+
#{$_body}_content_right
|
21
21
|
+column(8)
|
22
22
|
+last
|
23
23
|
+pull(1.5)
|
24
24
|
+prepend-top(40px)
|
25
25
|
|
26
|
-
#
|
26
|
+
#{$_menu_1}
|
27
27
|
+menu-inline-blocks(4)
|
28
28
|
padding-left: 10px
|
29
29
|
|
30
|
-
#
|
30
|
+
#{$_header}
|
31
31
|
h1
|
32
32
|
padding: 20px 10px
|
33
33
|
a
|
@@ -37,7 +37,7 @@
|
|
37
37
|
position: relative
|
38
38
|
margin-left: -40px
|
39
39
|
|
40
|
-
#
|
40
|
+
#{$_footer}
|
41
41
|
+container-alt
|
42
42
|
padding-top: 10px
|
43
43
|
padding-left: 40px
|
@@ -11,16 +11,16 @@
|
|
11
11
|
height: 100%
|
12
12
|
body
|
13
13
|
+linear-gradient-pie(#333 0%, #999 100%)
|
14
|
-
#
|
14
|
+
#{$_header}
|
15
15
|
h1
|
16
16
|
background: $darkblue
|
17
17
|
a
|
18
18
|
+linear-gradient-pie($palegreen 0%, $deepgreen 100%)
|
19
|
-
#
|
19
|
+
#{$_body}_content_left
|
20
20
|
background: $lightsable
|
21
|
-
#
|
21
|
+
#{$_menu_1} a
|
22
22
|
background: $lightsable - 30
|
23
|
-
#
|
23
|
+
#{$_body}_content_right #{$_inner}
|
24
24
|
$framb: #A83438
|
25
25
|
$bg-sub: $framb
|
26
26
|
background: $bg-sub
|
@@ -10,20 +10,20 @@
|
|
10
10
|
height: 100%
|
11
11
|
body
|
12
12
|
+linear-gradient-pie(#222 0%, #777 100%)
|
13
|
-
#
|
13
|
+
#{$_header}
|
14
14
|
h1
|
15
15
|
$mix: mix($yellow, $white, 50)
|
16
16
|
+linear-gradient-pie($mix 0%, $yellow 100%)
|
17
17
|
a
|
18
18
|
+linear-gradient-pie($green +#222 0%, $green -#222 100%)
|
19
|
-
#
|
19
|
+
#{$_body}_content_left
|
20
20
|
$mix: mix($brown, $white, 50)
|
21
21
|
+linear-gradient-pie($mix 50px, $white 300px)
|
22
|
-
#
|
22
|
+
#{$_menu_1} li
|
23
23
|
$mix: mix($brown, $white, 80)
|
24
24
|
+linear-gradient-pie($mix 70%, $mix - #222 100%)
|
25
25
|
color: $white !important
|
26
|
-
#
|
26
|
+
#{$_body}_content_right .box
|
27
27
|
background: $red
|
28
28
|
border: 5px solid mix($red,$brown - #333 ,50)
|
29
29
|
|
@@ -20,7 +20,7 @@
|
|
20
20
|
+link-colors($lighter, $lighter + 30, $lighter, $lighter, $lighter)
|
21
21
|
+hover-link
|
22
22
|
|
23
|
-
#
|
23
|
+
#{$_header}
|
24
24
|
h1
|
25
25
|
color: $neutral
|
26
26
|
+linear-gradient-pie($bg + 25, $bg + 10)
|
@@ -33,13 +33,13 @@
|
|
33
33
|
+linear-gradient-pie($bg + 65, $bg + 40)
|
34
34
|
color: $light
|
35
35
|
|
36
|
-
#
|
36
|
+
#{$_footer}
|
37
37
|
color: ($bg / 2) + ($neutral / 2.5)
|
38
38
|
|
39
|
-
#
|
39
|
+
#{$_body}_content_left
|
40
40
|
background: $dark + 30
|
41
41
|
|
42
|
-
#
|
42
|
+
#{$_body}_content_right
|
43
43
|
background: $dark + 20
|
44
44
|
border: 2px solid $dark - 10
|
45
45
|
|
@@ -10,16 +10,16 @@
|
|
10
10
|
height: 100%
|
11
11
|
body
|
12
12
|
+linear-gradient-pie($deepbrick 0%, $egg 100%)
|
13
|
-
#
|
13
|
+
#{$_header}
|
14
14
|
h1
|
15
15
|
$mix1: mix($egg, $brick, 50)
|
16
16
|
+linear-gradient-pie($mix1 30%, $brick 95%)
|
17
17
|
a
|
18
18
|
background: $blue
|
19
|
-
#
|
19
|
+
#{$_body}_content_left
|
20
20
|
+linear-gradient-pie($egg 0%, $deepegg 100%)
|
21
|
-
#
|
21
|
+
#{$_menu_1} li
|
22
22
|
background: $egg
|
23
23
|
&:hover
|
24
|
-
#
|
24
|
+
#{$_body}_content_right .box
|
25
25
|
background: $egg
|
@@ -14,17 +14,17 @@
|
|
14
14
|
height: 100%
|
15
15
|
body
|
16
16
|
+linear-gradient-pie($brown, $brownish-orange)
|
17
|
-
#
|
17
|
+
#{$_header}
|
18
18
|
h1
|
19
19
|
+linear-gradient-pie(saturate(lighten($young-green, 20),100) 0%,saturate(darken($green,10),30) 100%)
|
20
20
|
a
|
21
21
|
+linear-gradient(color-stops(lighten($orange, 30), lighten($orange, 20), $orange, $red))
|
22
22
|
color: darken($brownish-orange, 5)
|
23
|
-
#
|
23
|
+
#{$_body}_content_left
|
24
24
|
+linear-gradient-pie($mix1 0%, white 100%)
|
25
|
-
#
|
25
|
+
#{$_menu_1} li
|
26
26
|
+linear-gradient-pie($mix1 0%, darken($mix1,20) 100%)
|
27
27
|
&:hover
|
28
28
|
+linear-gradient-pie($mix1 0%, $mix1 100%)
|
29
|
-
#
|
29
|
+
#{$_body}_content_right .box
|
30
30
|
background: mix($young-green, $brownish-orange, 30)
|
@@ -0,0 +1,13 @@
|
|
1
|
+
|
2
|
+
$_page_container: "#page_container"
|
3
|
+
$_header: "#header"
|
4
|
+
$_page: "#page"
|
5
|
+
$_footer: "#footer"
|
6
|
+
$_menu_1: "#menu"
|
7
|
+
$_body: "#body"
|
8
|
+
$_body_content: "#body_content"
|
9
|
+
$_body_content_1: "#body_content_left"
|
10
|
+
$_body_content_2: "#body_content_right"
|
11
|
+
$_no_body_content_2: ".no_body_content_right"
|
12
|
+
$_page_title: "#body_content_title"
|
13
|
+
$_inner: ".inner"
|
@@ -1,5 +1,30 @@
|
|
1
|
-
|
1
|
+
@import base
|
2
2
|
@import pixarea/themes
|
3
3
|
|
4
|
-
+theme-minipane(
|
5
|
-
|
4
|
+
+theme-minipane(burma)
|
5
|
+
|
6
|
+
|
7
|
+
// LIST OF AVAILABLE PRECONFIGURED THEMES:
|
8
|
+
|
9
|
+
// +theme-minipane(dark)
|
10
|
+
// +theme-minipane(burma)
|
11
|
+
// +theme-shapy(burma)
|
12
|
+
// +theme-shapy(circus)
|
13
|
+
// +theme-shapy(dark)
|
14
|
+
// +theme-shapy(firen)
|
15
|
+
// +theme-shapy(rusty)
|
16
|
+
|
17
|
+
|
18
|
+
// NOTES:
|
19
|
+
|
20
|
+
// All themes are supra-modular, so you can use all or only parts of any theme.
|
21
|
+
// Add your own themes, create your own color-palettes, shadows, ...
|
22
|
+
// Learn here how a theme is structured, so you can use only parts of it, and
|
23
|
+
// build your own themes in minutes:
|
24
|
+
// https://github.com/danielres/pixarea-compass-themes/blob/master/sass/pixarea/themes/_minipane.sass
|
25
|
+
|
26
|
+
// The themes use configurable, reusable elements, called "modules":
|
27
|
+
// https://github.com/danielres/pixarea-compass-themes/tree/master/sass/pixarea/modules
|
28
|
+
|
29
|
+
// Modules and themes use preconfigured values and mixins, which you can find in the "lib" folder:
|
30
|
+
// https://github.com/danielres/pixarea-compass-themes/tree/master/sass/pixarea/lib
|
metadata
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
name: pixarea-compass-themes
|
3
3
|
version: !ruby/object:Gem::Version
|
4
4
|
prerelease:
|
5
|
-
version: 0.
|
5
|
+
version: 0.2.0
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
8
8
|
- Daniel Reszka
|
@@ -10,7 +10,7 @@ autorequire:
|
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
12
|
|
13
|
-
date: 2011-04-
|
13
|
+
date: 2011-04-05 00:00:00 +02:00
|
14
14
|
default_executable:
|
15
15
|
dependencies:
|
16
16
|
- !ruby/object:Gem::Dependency
|
@@ -37,7 +37,6 @@ files:
|
|
37
37
|
- .gitignore
|
38
38
|
- .livereload
|
39
39
|
- Gemfile
|
40
|
-
- README
|
41
40
|
- README.markdown
|
42
41
|
- Rakefile
|
43
42
|
- lib/pixarea-compass-themes.rb
|
@@ -78,10 +77,10 @@ files:
|
|
78
77
|
- sass/pixarea/themes/shapy/tones/_dark.sass
|
79
78
|
- sass/pixarea/themes/shapy/tones/_firen.sass
|
80
79
|
- sass/pixarea/themes/shapy/tones/_rusty.sass
|
80
|
+
- templates/project/_base.sass
|
81
81
|
- templates/project/manifest.rb
|
82
82
|
- templates/project/stylesheets/PIE.htc
|
83
83
|
- templates/project/theme.sass
|
84
|
-
- views/layouts/application.html.erb
|
85
84
|
has_rdoc: true
|
86
85
|
homepage: https://github.com/danielres/pixarea-compass-themes
|
87
86
|
licenses: []
|
data/README
DELETED
@@ -1,23 +0,0 @@
|
|
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
|
-
|
@@ -1,21 +0,0 @@
|
|
1
|
-
<!DOCTYPE html>
|
2
|
-
<html>
|
3
|
-
<%= render :partial => "/shared/head", :locals => {:theme => true} %>
|
4
|
-
<body>
|
5
|
-
<%= render :partial => "/shared/site_bar" %>
|
6
|
-
<div id='page_container'>
|
7
|
-
<div id='page'>
|
8
|
-
<%= render :partial => "/shared/ie6check" if request.env['HTTP_USER_AGENT'] =~ /MSIE/ -%>
|
9
|
-
<div id='header'>
|
10
|
-
<%= render :partial => "/shared/header" %>
|
11
|
-
</div>
|
12
|
-
<div id='body' class='clearfix'>
|
13
|
-
<%= yield %>
|
14
|
-
</div>
|
15
|
-
<div id='footer'>
|
16
|
-
<%= render :partial => "/shared/footer" %>
|
17
|
-
</div>
|
18
|
-
</div>
|
19
|
-
</div>
|
20
|
-
</body>
|
21
|
-
</html>
|