style-tiles 0.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/lib/style-tiles.rb +30 -0
- data/stylesheets/style-tiles.scss +9 -0
- data/stylesheets/style-tiles/core/_content.scss +11 -0
- data/stylesheets/style-tiles/core/_mixins.scss +134 -0
- data/stylesheets/style-tiles/core/_structure.scss +168 -0
- data/stylesheets/style-tiles/core/_typography.scss +69 -0
- data/stylesheets/style-tiles/core/_variables.scss +160 -0
- data/templates/project/config.rb +50 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Bold-webfont.eot +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Bold-webfont.svg +150 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Bold-webfont.ttf +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Bold-webfont.woff +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-BoldItalic-webfont.eot +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-BoldItalic-webfont.svg +150 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-BoldItalic-webfont.ttf +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-BoldItalic-webfont.woff +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Italic-webfont.eot +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Italic-webfont.svg +150 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Italic-webfont.ttf +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Italic-webfont.woff +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Regular-webfont.eot +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Regular-webfont.svg +150 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Regular-webfont.ttf +0 -0
- data/templates/project/fonts/DroidSerif/DroidSerif-Regular-webfont.woff +0 -0
- data/templates/project/fonts/DroidSerif/Google Android License.txt +18 -0
- data/templates/project/fonts/Pacifico/Pacifico SIL OFL Font License 1.1.txt +94 -0
- data/templates/project/fonts/Pacifico/Pacifico-webfont.eot +0 -0
- data/templates/project/fonts/Pacifico/Pacifico-webfont.svg +150 -0
- data/templates/project/fonts/Pacifico/Pacifico-webfont.ttf +0 -0
- data/templates/project/fonts/Pacifico/Pacifico-webfont.woff +0 -0
- data/templates/project/fonts/Peralta/OFL.txt +93 -0
- data/templates/project/fonts/Peralta/peralta-regular-webfont.eot +0 -0
- data/templates/project/fonts/Peralta/peralta-regular-webfont.svg +243 -0
- data/templates/project/fonts/Peralta/peralta-regular-webfont.ttf +0 -0
- data/templates/project/fonts/Peralta/peralta-regular-webfont.woff +0 -0
- data/templates/project/html/screen-v1.html +550 -0
- data/templates/project/html/screen-v2.html +538 -0
- data/templates/project/html/screen-v3.html +529 -0
- data/templates/project/html/template.html +84 -0
- data/templates/project/images/logos/sample-logo.png +0 -0
- data/templates/project/images/logos/sassy-style-tiles-logo.png +0 -0
- data/templates/project/images/textures/asphalt.png +0 -0
- data/templates/project/images/textures/concrete.png +0 -0
- data/templates/project/images/textures/cotton-shirt.png +0 -0
- data/templates/project/images/textures/dark-concrete.png +0 -0
- data/templates/project/images/textures/denim.jpg +0 -0
- data/templates/project/images/textures/scratched-metal.png +0 -0
- data/templates/project/images/textures/scratched-metal2.png +0 -0
- data/templates/project/index.html +53 -0
- data/templates/project/manifest.rb +83 -0
- data/templates/project/sass/index.scss +11 -0
- data/templates/project/sass/partials/variations/_index.scss +33 -0
- data/templates/project/sass/partials/variations/_v1.scss +92 -0
- data/templates/project/sass/partials/variations/_v2.scss +69 -0
- data/templates/project/sass/partials/variations/_v3.scss +50 -0
- data/templates/project/sass/screen-v1.scss +11 -0
- data/templates/project/sass/screen-v2.scss +11 -0
- data/templates/project/sass/screen-v3.scss +11 -0
- metadata +130 -0
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Style Tiles</title>
|
|
6
|
+
<@style>
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div>
|
|
10
|
+
<section>
|
|
11
|
+
<header>
|
|
12
|
+
<a href="../index.html" title="return to homepage">
|
|
13
|
+
<figure>
|
|
14
|
+
</figure>
|
|
15
|
+
</a>
|
|
16
|
+
<hgroup>
|
|
17
|
+
<h1>Project Name: </h1>
|
|
18
|
+
<h2>Version: </h2>
|
|
19
|
+
</hgroup>
|
|
20
|
+
</header>
|
|
21
|
+
</section>
|
|
22
|
+
<section>
|
|
23
|
+
<article>
|
|
24
|
+
<header>
|
|
25
|
+
<hgroup>
|
|
26
|
+
<h1>Sample Header: Heading</h1>
|
|
27
|
+
<h2>Sample Header: Sub-Heading</h2>
|
|
28
|
+
</hgroup>
|
|
29
|
+
</header>
|
|
30
|
+
<p>
|
|
31
|
+
</p>
|
|
32
|
+
<h2>Body Sub-Heading: Lorem Ipsum</h2>
|
|
33
|
+
<p>
|
|
34
|
+
</p>
|
|
35
|
+
<h2><a href="#">Linked Body Sub-Heading: Lorem Ipsum</a></h2>
|
|
36
|
+
<p>
|
|
37
|
+
</p>
|
|
38
|
+
<p>
|
|
39
|
+
<a href="#">Example text link</a>
|
|
40
|
+
</p>
|
|
41
|
+
<p>
|
|
42
|
+
Example <a href="#">button</a>
|
|
43
|
+
</p>
|
|
44
|
+
</article>
|
|
45
|
+
</section>
|
|
46
|
+
<aside>
|
|
47
|
+
<h3>Colors</h3>
|
|
48
|
+
<figure>
|
|
49
|
+
</figure>
|
|
50
|
+
<figure>
|
|
51
|
+
</figure>
|
|
52
|
+
<figure>
|
|
53
|
+
</figure>
|
|
54
|
+
<figure>
|
|
55
|
+
</figure>
|
|
56
|
+
<figure>
|
|
57
|
+
</figure>
|
|
58
|
+
</aside>
|
|
59
|
+
<aside>
|
|
60
|
+
<h3>Textures</h3>
|
|
61
|
+
<figure>
|
|
62
|
+
</figure>
|
|
63
|
+
<figure>
|
|
64
|
+
</figure>
|
|
65
|
+
<figure>
|
|
66
|
+
</figure>
|
|
67
|
+
<figcaption></figcaption>
|
|
68
|
+
</aside>
|
|
69
|
+
<aside>
|
|
70
|
+
<ul>
|
|
71
|
+
<h2>Adjectives</h2>
|
|
72
|
+
<li></li>
|
|
73
|
+
<li></li>
|
|
74
|
+
<li></li>
|
|
75
|
+
<li></li>
|
|
76
|
+
</ul>
|
|
77
|
+
</aside>
|
|
78
|
+
<footer>
|
|
79
|
+
<figure>
|
|
80
|
+
</figure>
|
|
81
|
+
</footer>
|
|
82
|
+
</div>
|
|
83
|
+
</body>
|
|
84
|
+
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<title>Style Tiles</title>
|
|
6
|
+
<link rel="stylesheet" href="css/index.css">
|
|
7
|
+
</head>
|
|
8
|
+
<body>
|
|
9
|
+
<div>
|
|
10
|
+
<section>
|
|
11
|
+
<header>
|
|
12
|
+
<figure>
|
|
13
|
+
</figure>
|
|
14
|
+
<hgroup>
|
|
15
|
+
<h1>Project Name: </h1>
|
|
16
|
+
<h2>Versions: </h2>
|
|
17
|
+
</hgroup>
|
|
18
|
+
</header>
|
|
19
|
+
</section>
|
|
20
|
+
<section>
|
|
21
|
+
<article>
|
|
22
|
+
<header>
|
|
23
|
+
<hgroup>
|
|
24
|
+
<h1>Style Tiles</h1>
|
|
25
|
+
<h2>About this Project</h2>
|
|
26
|
+
</hgroup>
|
|
27
|
+
</header>
|
|
28
|
+
<p>
|
|
29
|
+
</p>
|
|
30
|
+
<h2>What are Style Tiles?</h2>
|
|
31
|
+
<p>
|
|
32
|
+
</p>
|
|
33
|
+
<h2><a href="http://styletil.es/">Learn More about Style Tiles</a></h2>
|
|
34
|
+
<p>
|
|
35
|
+
</p>
|
|
36
|
+
<ul>
|
|
37
|
+
<li><a href="html/screen-v1.html">Version 1</a></li>
|
|
38
|
+
<li><a href="html/screen-v2.html">Version 2</a></li>
|
|
39
|
+
<li><a href="html/screen-v3.html">Version 3</a></li>
|
|
40
|
+
<li><a href="html/screen-v4.html">Version 4</a></li>
|
|
41
|
+
<li><a href="html/screen-v5.html">Version 5</a></li>
|
|
42
|
+
<li><a href="html/screen-v6.html">Version 6</a></li>
|
|
43
|
+
<li><a href="html/screen-v7.html">Version 7</a></li>
|
|
44
|
+
<li><a href="html/screen-v8.html">Version 8</a></li>
|
|
45
|
+
<li><a href="html/screen-v9.html">Version 9</a></li>
|
|
46
|
+
</ul>
|
|
47
|
+
</article>
|
|
48
|
+
</section>
|
|
49
|
+
<footer>
|
|
50
|
+
</footer>
|
|
51
|
+
</div>
|
|
52
|
+
</body>
|
|
53
|
+
</html>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
# Description
|
|
2
|
+
description "This builds the basic scaffolding for your style tiles project"
|
|
3
|
+
|
|
4
|
+
file 'config.rb', :like => :file, :to => "config.rb",
|
|
5
|
+
|
|
6
|
+
# Stylesheets Import
|
|
7
|
+
file 'index.scss', :like => :stylesheet, :media => 'screen, projection'
|
|
8
|
+
file 'screen-v1.scss', :like => :stylesheet, :media => 'screen, projection'
|
|
9
|
+
file 'screen-v2.scss', :like => :stylesheet, :media => 'screen, projection'
|
|
10
|
+
file 'screen-v3.scss', :like => :stylesheet, :media => 'screen, projection'
|
|
11
|
+
|
|
12
|
+
# Partials
|
|
13
|
+
file 'partials/variations/_index.scss', :like => :stylesheet, :to => 'partials/variations/_index.scss'
|
|
14
|
+
file 'partials/variations/_v1.scss', :like => :stylesheet, :to => 'partials/variations/_v2.scss'
|
|
15
|
+
file 'partials/variations/_v2.scss', :like => :stylesheet, :to => 'partials/variations/_v2.scss'
|
|
16
|
+
file 'partials/variations/_v3.scss', :like => :stylesheet, :to => 'partials/variations/_v3.scss'
|
|
17
|
+
|
|
18
|
+
# Image Import
|
|
19
|
+
file 'images/logos/sample-logo.png', :like => :image, :to => 'images/logos/sample-logo.png'
|
|
20
|
+
file 'images/logos/sassy-style-tiles-logo.png', :like => :image, :to => 'images/logos/sassy-style-tiles-logo.png'
|
|
21
|
+
file 'images/textures/asphalt.png', :like => :image, :to => 'images/textures/asphalt.png'
|
|
22
|
+
file 'images/textures/concrete.png', :like => :image, :to => 'images/textures/concrete.png'
|
|
23
|
+
file 'images/textures/cotton-shirt.png', :like => :image, :to => 'images/textures/cotton-shirt.png'
|
|
24
|
+
file 'images/textures/dark-concrete.png', :like => :image, :to => 'images/textures/dark-concrete.png'
|
|
25
|
+
file 'images/textures/denim.png', :like => :image, :to => 'images/textures/denim.png'
|
|
26
|
+
file 'images/textures/scratched-metal.png', :like => :image, :to => 'images/textures/scratched-metal.png'
|
|
27
|
+
file 'images/textures/scratched-metal2.png', :like => :image, :to => 'images/textures/scratched-metal2.png'
|
|
28
|
+
|
|
29
|
+
# Font Import
|
|
30
|
+
file "fonts/DroidSerif/DroidSerif-Bold-webfont.eot", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Bold-webfont.eot"
|
|
31
|
+
file "fonts/DroidSerif/DroidSerif-Bold-webfont.svg", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Bold-webfont.svg"
|
|
32
|
+
file "fonts/DroidSerif/DroidSerif-Bold-webfont.ttf", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Bold-webfont.ttf"
|
|
33
|
+
file "fonts/DroidSerif/DroidSerif-Bold-webfont.woff", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Bold-webfont.woff"
|
|
34
|
+
file "fonts/DroidSerif/DroidSerif-BoldItalic-webfont.eot", :like => :font, :to => "fonts/DroidSerif/DroidSerif-BoldItalic-webfont.eot"
|
|
35
|
+
file "fonts/DroidSerif/DroidSerif-BoldItalic-webfont.svg", :like => :font, :to => "fonts/DroidSerif/DroidSerif-BoldItalic-webfont.svg"
|
|
36
|
+
file "fonts/DroidSerif/DroidSerif-BoldItalic-webfont.ttf", :like => :font, :to => "fonts/DroidSerif/DroidSerif-BoldItalic-webfont.ttf"
|
|
37
|
+
file "fonts/DroidSerif/DroidSerif-BoldItalic-webfont.woff", :like => :font, :to => "fonts/DroidSerif/DroidSerif-BoldItalic-webfont.woff"
|
|
38
|
+
file "fonts/DroidSerif/DroidSerif-Italic-webfont.eot", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Italic-webfont.eot"
|
|
39
|
+
file "fonts/DroidSerif/DroidSerif-Italic-webfont.svg", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Italic-webfont.svg"
|
|
40
|
+
file "fonts/DroidSerif/DroidSerif-Italic-webfont.ttf", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Italic-webfont.ttf"
|
|
41
|
+
file "fonts/DroidSerif/DroidSerif-Italic-webfont.woff", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Italic-webfont.woff"
|
|
42
|
+
file "fonts/DroidSerif/DroidSerif-Regular-webfont.eot", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Regular-webfont.eot"
|
|
43
|
+
file "fonts/DroidSerif/DroidSerif-Regular-webfont.svg", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Regular-webfont.svg"
|
|
44
|
+
file "fonts/DroidSerif/DroidSerif-Regular-webfont.ttf", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Regular-webfont.ttf"
|
|
45
|
+
file "fonts/DroidSerif/DroidSerif-Regular-webfont.woff", :like => :font, :to => "fonts/DroidSerif/DroidSerif-Regular-webfont.woff"
|
|
46
|
+
file "fonts/DroidSerif/Google Android License.txt", :like => :font, :to => "fonts/DroidSerif/Google Android License.txt"
|
|
47
|
+
file "fonts/Pacifico/Pacifico SIL OFL Font License 1.1.txt", :like => :font, :to => "fonts/Pacifico/Pacifico SIL OFL Font License 1.1.txt"
|
|
48
|
+
file "fonts/Pacifico/Pacifico-webfont.eot", :like => :font, :to => "fonts/Pacifico/Pacifico-webfont.eot"
|
|
49
|
+
file "fonts/Pacifico/Pacifico-webfont.svg", :like => :font, :to => "fonts/Pacifico/Pacifico-webfont.svg"
|
|
50
|
+
file "fonts/Pacifico/Pacifico-webfont.ttf", :like => :font, :to => "fonts/Pacifico/Pacifico-webfont.ttf"
|
|
51
|
+
file "fonts/Pacifico/Pacifico-webfont.woff", :like => :font, :to => "fonts/Pacifico/Pacifico-webfont.woff"
|
|
52
|
+
file "fonts/Peralta/OFL.txt", :like => :font, :to => "fonts/Peralta/OFL.txt"
|
|
53
|
+
file "fonts/Peralta/peralta-regular-webfont.eot", :like => :font, :to => "fonts/Peralta/peralta-regular-webfont.eot"
|
|
54
|
+
file "fonts/Peralta/peralta-regular-webfont.svg", :like => :font, :to => "fonts/Peralta/peralta-regular-webfont.svg"
|
|
55
|
+
file "fonts/Peralta/peralta-regular-webfont.ttf", :like => :font, :to => "fonts/Peralta/peralta-regular-webfont.ttf"
|
|
56
|
+
file "fonts/Peralta/peralta-regular-webfont.woff", :like => :font, :to => "fonts/Peralta/peralta-regular-webfont.woff"
|
|
57
|
+
|
|
58
|
+
# HTML Import
|
|
59
|
+
file 'index.html', :like => :html, :to => "index.html"
|
|
60
|
+
file 'html/screen-v1.html', :like => :html, :to => "html/screen-v1.html"
|
|
61
|
+
file 'html/screen-v2.html', :like => :html, :to => "html/screen-v2.html"
|
|
62
|
+
file 'html/screen-v3.html', :like => :html, :to => "html/screen-v3.html"
|
|
63
|
+
file 'html/template.html', :like => :html, :to => "html/template.html"
|
|
64
|
+
|
|
65
|
+
# Javascript Import
|
|
66
|
+
# file 'scripts.js', :like => :javascript, :to => 'scripts.js'
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
# General File Import
|
|
70
|
+
# file 'README.md', :to => "README.md"
|
|
71
|
+
|
|
72
|
+
# Compass Extension Help
|
|
73
|
+
help %Q{
|
|
74
|
+
Help for your Compass extension
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
# Compass Extension Welcome Message
|
|
78
|
+
# Users will see this when they create a new project using this template.
|
|
79
|
+
welcome_message %Q{
|
|
80
|
+
Welcome to my Style Tiles! You just have built the basic scaffolding for getting started.
|
|
81
|
+
Documentation: https://github.com/alienresident/style-tiles
|
|
82
|
+
Contact: mark@alienresident.net
|
|
83
|
+
}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
@import "compass/reset";
|
|
2
|
+
@import "compass/typography";
|
|
3
|
+
@import "compass/css3";
|
|
4
|
+
|
|
5
|
+
@import "style-tiles";
|
|
6
|
+
|
|
7
|
+
// Override default variables with version specific variables
|
|
8
|
+
@import "partials/variations/_index";
|
|
9
|
+
|
|
10
|
+
// import the Style Tiles css structure
|
|
11
|
+
@import "style-tiles/core/_structure";
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// Project Name and Version Header
|
|
2
|
+
|
|
3
|
+
$project-name: "Sassy Style Tiles";
|
|
4
|
+
$version-number: "1.0, 2.0, 3.0";
|
|
5
|
+
|
|
6
|
+
$para-1: $project-name "! HTML & CSS style tiles powered by SASS and Compass.";
|
|
7
|
+
|
|
8
|
+
$para-2: "Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.";
|
|
9
|
+
|
|
10
|
+
$para-3:"View the styles tiles:";
|
|
11
|
+
|
|
12
|
+
/// Global Variables
|
|
13
|
+
$standard-spacing: calc-em(20px, $base-font-size);
|
|
14
|
+
|
|
15
|
+
/// Design Variables
|
|
16
|
+
$link-color: #405b6b;
|
|
17
|
+
|
|
18
|
+
$body-background-color: #dfe1d1;
|
|
19
|
+
$page-background-color: #eaeaea;
|
|
20
|
+
$page-margin: 0 auto ($standard-spacing * 4) auto;
|
|
21
|
+
|
|
22
|
+
// Logo is added as a background to a transparent image. Adjust height and width and source
|
|
23
|
+
$logo-file: "logos/sassy-style-tiles-logo.png";
|
|
24
|
+
|
|
25
|
+
$header-padding: $standard-spacing;
|
|
26
|
+
$header-background-color: rgba(#929ca5, 1);
|
|
27
|
+
|
|
28
|
+
$main-text-shadow: 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(255,255,255,.35);
|
|
29
|
+
|
|
30
|
+
$footer-background-color: rgba(#a2af45, 1);
|
|
31
|
+
$footer-text-color: rgba($link-color,.75);
|
|
32
|
+
$footer-background-image: false;
|
|
33
|
+
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
// Project Name and Version Header
|
|
2
|
+
$project-name: "Sassy Style Tiles";
|
|
3
|
+
$version-number: "1.0";
|
|
4
|
+
|
|
5
|
+
/// Design Variables
|
|
6
|
+
// sample 5 colors and 3 textures (add figures to html for more)
|
|
7
|
+
$colors: #BEE8E0, #373C40, #2E2621, #73320B, #FF5E00;
|
|
8
|
+
$textures: "cotton-shirt.png", "denim.jpg";
|
|
9
|
+
$adjectives: current, clean, sleek, technical ;
|
|
10
|
+
|
|
11
|
+
$link-color: #FF5E00;
|
|
12
|
+
|
|
13
|
+
$font-name: 'peraltaregular';
|
|
14
|
+
$font-ttf: 'Peralta/peralta-regular-webfont.ttf';
|
|
15
|
+
$font-woff: 'Peralta/peralta-regular-webfont.woff';
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
$body-background-color: #fff;
|
|
19
|
+
$body-background-image: "textures/cotton-shirt.png"; //replace with linen tile
|
|
20
|
+
$body-background-gradient-position-1: 90deg;
|
|
21
|
+
$body-background-gradient-1: rgba(242,40,40,.5) 24%, rgba(0,180,255,.35) 25%,rgba(0,180,255,.35) 50%, rgba(0,0,83,.5) 51%, rgba(0,0,83,.5) 74%, transparent 75%;
|
|
22
|
+
$body-background-gradient-position-2: 0deg;
|
|
23
|
+
$body-background-gradient-2: $body-background-gradient-1;
|
|
24
|
+
$body-background-size: calc-em(80px, $base-font-size) calc-em(80px, $base-font-size);
|
|
25
|
+
$body-background-repeat: repeat;
|
|
26
|
+
|
|
27
|
+
$page-background-color: #fff;
|
|
28
|
+
$page-background-image: "textures/denim.jpg";
|
|
29
|
+
$page-box-shadow: calc-em(5px, $base-font-size) calc-em(5px, $base-font-size) calc-em(10px, $base-font-size) rgba(0,0,0,.75), calc-em(-5px, $base-font-size) calc-em(5px, $base-font-size) calc-em(10px, $base-font-size) rgba(0,0,0,.75);
|
|
30
|
+
$page-corners: calc-em(5px, $base-font-size);
|
|
31
|
+
$page-margin: 0 auto ($standard-spacing * 4) auto;
|
|
32
|
+
$page-text-color: #ccc;
|
|
33
|
+
|
|
34
|
+
// Logo is added as a background. Adjust height and width and source
|
|
35
|
+
$logo-margin: 0 $standard-spacing $standard-spacing 0;
|
|
36
|
+
$logo-box-shadow: false;
|
|
37
|
+
|
|
38
|
+
$header-padding: $standard-spacing;
|
|
39
|
+
$header-background-color: false;
|
|
40
|
+
$header-background-image: false;
|
|
41
|
+
$header-background-gradient-position-1: bottom;
|
|
42
|
+
$header-background-gradient-1: false;
|
|
43
|
+
$header-background-gradient-position-2: top;
|
|
44
|
+
$header-background-gradient-2: false;
|
|
45
|
+
$header-text-color: #eee;
|
|
46
|
+
|
|
47
|
+
$heading-h1-font-color: rgba(255,160,20,.85);
|
|
48
|
+
$heading-h1-font-name: $font-name;
|
|
49
|
+
$heading-h1-font-size: calc-em(32px, $base-font-size);
|
|
50
|
+
$main-text-shadow: 0 calc-em(1px, $base-font-size) 0 rgba(255,255,255,.35);
|
|
51
|
+
|
|
52
|
+
$heading-h2-font-name: $font-name;
|
|
53
|
+
|
|
54
|
+
$aside-margin: 0 0 ($standard-spacing * 2) 0;
|
|
55
|
+
$aside-padding: $standard-spacing;
|
|
56
|
+
$aside-background-color: none;
|
|
57
|
+
$aside-background-image: "textures/denim.jpg";
|
|
58
|
+
$aside-background-gradient-position-1: 135deg;
|
|
59
|
+
$aside-background-gradient-1: false;
|
|
60
|
+
$aside-background-gradient-position-2: 45deg;
|
|
61
|
+
$aside-background-gradient-2: false;
|
|
62
|
+
$aside-background-size: false;
|
|
63
|
+
$aside-background-repeat: repeat;
|
|
64
|
+
$aside-box-shadow: calc-em(3px, $base-font-size) calc-em(6px, $base-font-size) calc-em(5px, $base-font-size) rgba(0,0,0,.5), calc-em(-3px, $base-font-size) calc-em(-1px, $base-font-size) calc-em(5px, $base-font-size) rgba(0,0,0,.5);
|
|
65
|
+
$aside-border: calc-em(1px, $base-font-size) dashed rgba(255,160,20,.5);
|
|
66
|
+
$aside-border-radius: calc-em(5px, $base-font-size);
|
|
67
|
+
$aside-outline: calc-em(1px, $base-font-size) dashed rgba(0,20,2,.5);
|
|
68
|
+
$aside-text-color: #aaa;
|
|
69
|
+
|
|
70
|
+
// Figure (colors and textures boxes)
|
|
71
|
+
$figure-width: calc-em(40px, $base-font-size);
|
|
72
|
+
$figure-height: calc-em(40px, $base-font-size);
|
|
73
|
+
$texture-width: $figure-width * 2;
|
|
74
|
+
$texture-height: $figure-height * 2;
|
|
75
|
+
$figure-border: calc-em(1px, $base-font-size) #888 solid;
|
|
76
|
+
$figure-caption-text-size: calc-em(12px, $base-font-size);
|
|
77
|
+
|
|
78
|
+
$button-corners: calc-em(10px, $base-font-size);
|
|
79
|
+
$button-background-color: #FF5E00;
|
|
80
|
+
$button-gradient: true;
|
|
81
|
+
$button-text-color: #e5e5e5;
|
|
82
|
+
$button-font-size: 1.2em;
|
|
83
|
+
$button-text-shadow: 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(0,0,0,.5);
|
|
84
|
+
$button-border: calc-em(1px, $base-font-size) shade($button-background-color, 10%) solid;
|
|
85
|
+
$button-box-shadow: inset calc-em(2px, $base-font-size) calc-em(4px, $base-font-size) calc-em(5px, $base-font-size) rgba(0,0,0,.5);
|
|
86
|
+
$button-text-color-over: adjust-lightness($button-text-color, 10%);
|
|
87
|
+
$button-background-color-over: tint($button-background-color, 10%);
|
|
88
|
+
|
|
89
|
+
$footer-background-color: rgba(0,0,0,.25);
|
|
90
|
+
$footer-background-image: false;
|
|
91
|
+
$footer-text-color: rgba(255,255,255,.75);
|
|
92
|
+
$footer-text-shadow: calc-em(1px, $base-font-size) 0 calc-em(1px, $base-font-size) rgba(0,0,0,.5), 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(255,255,255,.35);
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
// Project Name and Version Header
|
|
2
|
+
$version-number: "2.0";
|
|
3
|
+
|
|
4
|
+
/// Design Variables
|
|
5
|
+
$link-color: #e57e17;
|
|
6
|
+
|
|
7
|
+
// sample 5 colors and 3 textures (add figures to html for more)
|
|
8
|
+
$colors: $link-color, #cc7014, #444, #191919, #0d0d0d;
|
|
9
|
+
$textures: "dark-concrete.png", "scratched-metal2.png";
|
|
10
|
+
$adjectives: current, clean, sleek, technical ;
|
|
11
|
+
|
|
12
|
+
$body-background-color: #333;
|
|
13
|
+
$body-background-image: "textures/dark-concrete.png";
|
|
14
|
+
$body-background-gradient-position-1: left;
|
|
15
|
+
$body-background-gradient-1: rgba(darken($body-background-color, 30%),.5) 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,0) 15%;
|
|
16
|
+
$body-background-gradient-position-2: right;
|
|
17
|
+
$body-background-gradient-2: $body-background-gradient-1;
|
|
18
|
+
$body-background-repeat: repeat;
|
|
19
|
+
$body-text-color: #eee;
|
|
20
|
+
|
|
21
|
+
$page-background-color: #141414;
|
|
22
|
+
$page-box-shadow: calc-em(5px, $base-font-size) calc-em(5px, $base-font-size) calc-em(10px, $base-font-size) rgba(0,0,0,.75), calc-em(-5px, $base-font-size) calc-em(5px, $base-font-size) calc-em(10px, $base-font-size) rgba(0,0,0,.75);
|
|
23
|
+
$page-background-image: false;
|
|
24
|
+
$page-corners: calc-em(5px, $base-font-size);
|
|
25
|
+
$page-margin: 0 auto ($standard-spacing * 4) auto;
|
|
26
|
+
$page-text-color: #ccc;
|
|
27
|
+
|
|
28
|
+
// Logo is added as a background to a transparent image. Adjust height and width and source
|
|
29
|
+
$logo-margin: 0 $standard-spacing $standard-spacing 0;
|
|
30
|
+
$logo-box-shadow: false;
|
|
31
|
+
|
|
32
|
+
$header-padding: $standard-spacing;
|
|
33
|
+
$header-background-color: #0d0d0d;
|
|
34
|
+
$header-background-image: false;
|
|
35
|
+
$header-background-gradient-position-1: top;
|
|
36
|
+
$header-background-gradient-1: rgba(#444,.35) 0%, rgba(#222,.35) 50%, rgba(#000,.35) 75%;
|
|
37
|
+
$header-background-gradient-position-2: bottom;
|
|
38
|
+
$header-background-gradient-2: rgba(#000,1) 0%, rgba(#111,.25) 8%, rgba(#111,0) 15%;
|
|
39
|
+
$header-text-color: #eee;
|
|
40
|
+
|
|
41
|
+
$heading-h1-font-style: false;
|
|
42
|
+
$heading-h1-font-color: #888;
|
|
43
|
+
$heading-h1-text-shadow: calc-em(-1px, $base-font-size) 0 calc-em(1px, $base-font-size) rgba(0,0,0,.75);
|
|
44
|
+
$main-text-shadow: calc-em(1px, $base-font-size) 0 calc-em(1px, $base-font-size) rgba(127,127,127,.5);
|
|
45
|
+
|
|
46
|
+
$aside-width: calc-em(400px, $base-font-size);
|
|
47
|
+
$aside-margin: 0 0 $standard-spacing 0;
|
|
48
|
+
$aside-background-color: #191919;
|
|
49
|
+
$aside-background-image: false;
|
|
50
|
+
$aside-border: $standard-spacing solid rgba(127,127,127,.02);
|
|
51
|
+
$aside-border-radius: calc-em(10px, $base-font-size);
|
|
52
|
+
$aside-outline: 0 solid rgba(127,127,127,.25);
|
|
53
|
+
$aside-text-color: #818181;
|
|
54
|
+
|
|
55
|
+
$button-corners: calc-em(10px, $base-font-size);
|
|
56
|
+
$button-background-color: #cc7014;
|
|
57
|
+
$button-gradient: true;
|
|
58
|
+
$button-text-color: #e5e5e5;
|
|
59
|
+
$button-font-size: 1.2em;
|
|
60
|
+
$button-text-shadow: 0 calc-em(1px, $base-font-size) calc-em(3px, $base-font-size) rgba(0,0,0,.75);
|
|
61
|
+
$button-border: 0 #e3e3e3 solid;
|
|
62
|
+
$button-box-shadow: calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) calc-em(2px, $base-font-size) rgba(0,0,0,.5);
|
|
63
|
+
$button-text-color-over: adjust-lightness($button-text-color, 10%);
|
|
64
|
+
$button-background-color-over: tint($button-background-color, 10%);
|
|
65
|
+
|
|
66
|
+
$footer-background-color: #090909;
|
|
67
|
+
$footer-background-image: false;
|
|
68
|
+
$footer-text-color: rgba(255,255,255,.75);
|
|
69
|
+
$footer-text-shadow: calc-em(-1px, $base-font-size) 0 calc-em(1px, $base-font-size) rgba(0,0,0,.5), 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(255,255,255,.35);
|