si_core_styles 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.DS_Store +0 -0
- data/.gitignore +17 -0
- data/Gemfile +5 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/lib/.DS_Store +0 -0
- data/lib/si_core_styles.rb +9 -0
- data/lib/si_core_styles/version.rb +3 -0
- data/lib/stylesheets/_si_core_styles.sass +1 -0
- data/lib/stylesheets/modules/_functions.scss +0 -0
- data/lib/stylesheets/modules/_mixins.scss +443 -0
- data/lib/stylesheets/modules/_normalize.scss +586 -0
- data/lib/stylesheets/partials/_accessories.scss +8 -0
- data/lib/stylesheets/partials/_forms.scss +34 -0
- data/lib/stylesheets/partials/_typography.scss +82 -0
- data/lib/stylesheets/variables/_colors.scss +89 -0
- data/lib/stylesheets/variables/_display-variables.scss +10 -0
- data/lib/stylesheets/variables/_media-queries.scss +0 -0
- data/lib/stylesheets/variables/_normalize-vars.scss +38 -0
- data/si_core_styles.gemspec +23 -0
- metadata +93 -0
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
form {
|
|
2
|
+
* {
|
|
3
|
+
font-size: $input-font-size;
|
|
4
|
+
}
|
|
5
|
+
input, button, textarea {
|
|
6
|
+
margin-bottom: 1em;
|
|
7
|
+
}
|
|
8
|
+
input {
|
|
9
|
+
&[type=text],
|
|
10
|
+
&[type=email],
|
|
11
|
+
&[type=url],
|
|
12
|
+
&[type=search],
|
|
13
|
+
&[type=tel],
|
|
14
|
+
&[type=password],
|
|
15
|
+
&[type=datetime]{
|
|
16
|
+
@include text-input;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
input, button {
|
|
20
|
+
&[type=reset],
|
|
21
|
+
&[type=button] {
|
|
22
|
+
@include button-secondary;
|
|
23
|
+
}
|
|
24
|
+
&[type=submit] {
|
|
25
|
+
@include button-primary;
|
|
26
|
+
}
|
|
27
|
+
&[type=submit][disabled] {
|
|
28
|
+
@include button-disabled;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
textarea {
|
|
32
|
+
@include text-input;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
// Font
|
|
2
|
+
@import url("http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700,300|Open+Sans:700,400,300");
|
|
3
|
+
|
|
4
|
+
// Headings
|
|
5
|
+
h1,h2,h3,h4,h5,h6 {
|
|
6
|
+
@include headline();
|
|
7
|
+
}
|
|
8
|
+
.dividing-headline-off-white {
|
|
9
|
+
@include dividing-headline(darken($off-white-dark, 20%), $off-white);
|
|
10
|
+
margin: 2em 0;
|
|
11
|
+
}
|
|
12
|
+
.dividing-headline-white {
|
|
13
|
+
@include dividing-headline(darken($off-white-dark, 20%), $white);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
// Semi-display text
|
|
17
|
+
.hero {
|
|
18
|
+
@include hero-text();
|
|
19
|
+
}
|
|
20
|
+
.lead {
|
|
21
|
+
@include lead-text();
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// regular text
|
|
25
|
+
body {
|
|
26
|
+
font-family: 'Open Sans', sans-serif;
|
|
27
|
+
color: $color-text;
|
|
28
|
+
}
|
|
29
|
+
p, ul, ol, li, a, table, summary, details, pre, blockquote, dl, dd, dt {
|
|
30
|
+
font-size: $p-font-size;
|
|
31
|
+
}
|
|
32
|
+
strong {
|
|
33
|
+
font-weight: 700;
|
|
34
|
+
}
|
|
35
|
+
small {
|
|
36
|
+
font-size: $base-font-size;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.pullquote{
|
|
40
|
+
@include hero-text;
|
|
41
|
+
color: $grey;
|
|
42
|
+
margin: 0;
|
|
43
|
+
&:before {
|
|
44
|
+
content: '“';
|
|
45
|
+
}
|
|
46
|
+
&:after {
|
|
47
|
+
content: '”';
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
// links
|
|
51
|
+
a {
|
|
52
|
+
color: $color-text-link;
|
|
53
|
+
text-decoration: none;
|
|
54
|
+
@include transition();
|
|
55
|
+
&:hover {
|
|
56
|
+
text-decoration: underline;
|
|
57
|
+
}
|
|
58
|
+
&:active {
|
|
59
|
+
color: $color-text-link-active;
|
|
60
|
+
outline: none;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
// Code
|
|
65
|
+
pre {
|
|
66
|
+
background: $off-white;
|
|
67
|
+
@include border-radius;
|
|
68
|
+
padding: 20px 30px;
|
|
69
|
+
@include transition(all);
|
|
70
|
+
line-height: 1em;
|
|
71
|
+
border-left: 3px solid $grey;
|
|
72
|
+
border-right: 10px solid $grey;
|
|
73
|
+
border-top: 1px solid $grey;
|
|
74
|
+
border-bottom: 1px solid $dark-grey;
|
|
75
|
+
&:hover {
|
|
76
|
+
position:relative;
|
|
77
|
+
width: 150%;
|
|
78
|
+
left: -50%;
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
// Two-tier color variable system
|
|
2
|
+
|
|
3
|
+
/* color definitions */
|
|
4
|
+
$white: hsla(0,0%,100%,1);
|
|
5
|
+
$black: #111;
|
|
6
|
+
$off-white: hsla(200,13%,95%,1);
|
|
7
|
+
$off-white-dark: hsla(192,9%,89%,1);
|
|
8
|
+
$blue: hsla(200,100%,40%,1);
|
|
9
|
+
$grey: hsla(203,18%,36%,1);
|
|
10
|
+
$dark-grey: hsla(203,18%,25%,1);
|
|
11
|
+
$black: hsla(206,17%,10%,1);
|
|
12
|
+
$orangered: hsla(7,100%,64%,1);
|
|
13
|
+
$orangered-dark: hsla(7,77%,27%,1);
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
/* Use descriptive variable names */
|
|
17
|
+
|
|
18
|
+
// text
|
|
19
|
+
$color-text: $grey; /* alt: hsla(203,12%,35%,1) */
|
|
20
|
+
$color-text-headline: $grey;
|
|
21
|
+
$color-text-lead: $grey;
|
|
22
|
+
$color-text-link: #3ca3da;
|
|
23
|
+
$color-text-link-hover: $dark-grey;
|
|
24
|
+
$color-text-link-active: $grey;
|
|
25
|
+
|
|
26
|
+
//background
|
|
27
|
+
$color-background-primary: $white;
|
|
28
|
+
$color-background-secondary: $off-white;
|
|
29
|
+
$color-background-primary-dark: $dark-grey;
|
|
30
|
+
$color-background-secondary-dark: $grey;
|
|
31
|
+
$color-background-accent: $orangered;
|
|
32
|
+
|
|
33
|
+
// buttons
|
|
34
|
+
$btn-primary-text: $white;
|
|
35
|
+
$btn-primary-gradient-top: #41b0ec;
|
|
36
|
+
$btn-primary-gradient-bottom: #3ca3da;
|
|
37
|
+
$btn-primary-background: linear-gradient( $btn-primary-gradient-top, $btn-primary-gradient-bottom );
|
|
38
|
+
$btn-primary-background-hover: #4dc1ff;
|
|
39
|
+
$btn-primary-background-active: linear-gradient( $btn-primary-gradient-top, $btn-primary-gradient-bottom );
|
|
40
|
+
$btn-primary-border: #2a84b4;
|
|
41
|
+
$btn-primary-border-active: #2f98d0;
|
|
42
|
+
|
|
43
|
+
$btn-secondary-text: $grey;
|
|
44
|
+
$btn-secondary-background: #f3f4f5;
|
|
45
|
+
$btn-secondary-background-active: #e0e4e5;
|
|
46
|
+
$btn-secondary-border: #dbdbdb;
|
|
47
|
+
$btn-secondary-border-hover: #c2c2c2;
|
|
48
|
+
|
|
49
|
+
$btn-strong-text: $white;
|
|
50
|
+
$btn-strong-gradient-top: #ff5c46;
|
|
51
|
+
$btn-strong-gradient-bottom: #cc4837;
|
|
52
|
+
$btn-strong-background: linear-gradient( $btn-strong-gradient-top, $btn-strong-gradient-bottom );
|
|
53
|
+
$btn-strong-background-hover: #ff5c46;
|
|
54
|
+
$btn-strong-background-active: linear-gradient( $btn-strong-gradient-top, $btn-strong-gradient-bottom );
|
|
55
|
+
$btn-strong-border: #82291d;
|
|
56
|
+
$btn-strong-border-active: #c24535;
|
|
57
|
+
|
|
58
|
+
$btn-disabled-text: $white;
|
|
59
|
+
$btn-disabled-gradient-top: $off-white-dark;
|
|
60
|
+
$btn-disabled-gradient-bottom: darken($off-white-dark, 5%);
|
|
61
|
+
$btn-disabled-background: linear-gradient( $btn-disabled-gradient-top, $btn-disabled-gradient-bottom );
|
|
62
|
+
$btn-disabled-border: darken($off-white-dark, 10%);
|
|
63
|
+
|
|
64
|
+
// Toggle Links
|
|
65
|
+
$tl-border: #196B9A;
|
|
66
|
+
$tl-link-border: #22729F;
|
|
67
|
+
$tl-link-border-active: hsla(204,19%,26%,1);
|
|
68
|
+
$tl-background-light: #43b2ed;
|
|
69
|
+
$tl-background-dark: #1990cd;
|
|
70
|
+
$tl-background-hover-light: #47bfff;
|
|
71
|
+
$tl-background-hover-dark: #1ca2e5;
|
|
72
|
+
$tl-background-active-light: #445763;
|
|
73
|
+
$tl-background-active-dark: #34424b;
|
|
74
|
+
$tl-background: linear-gradient( $tl-background-light, $tl-background-dark );
|
|
75
|
+
$tl-background-hover: linear-gradient( $tl-background-hover-light, $tl-background-hover-dark );
|
|
76
|
+
$tl-background-active: linear-gradient( $tl-background-active-light, $tl-background-active-dark );
|
|
77
|
+
|
|
78
|
+
$tl-dark-border: hsla(204,18%,16%,1);
|
|
79
|
+
$tl-dark-link-border: hsla(204,18%,16%,1);
|
|
80
|
+
$tl-dark-link-border-active: hsla(203,28%,16%,1);
|
|
81
|
+
$tl-dark-background-light: #445763;
|
|
82
|
+
$tl-dark-background-dark: #34424b;
|
|
83
|
+
$tl-dark-background-hover-light: lighten( $tl-dark-background-light, 5% );
|
|
84
|
+
$tl-dark-background-hover-dark: lighten( $tl-dark-background-dark, 5% );
|
|
85
|
+
$tl-dark-background-active-light: hsla(203,28%,16%,1) ;
|
|
86
|
+
$tl-dark-background-active-dark: hsla(205,18%,19%,1);
|
|
87
|
+
$tl-dark-background: linear-gradient( $tl-dark-background-light, $tl-dark-background-dark );
|
|
88
|
+
$tl-dark-background-hover: linear-gradient( $tl-dark-background-hover-light, $tl-dark-background-hover-dark );
|
|
89
|
+
$tl-dark-background-active: linear-gradient( $tl-dark-background-active-light, $tl-dark-background-active-dark );
|
|
File without changes
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
// Set this to true to force CSS output to exactly match normalize.css.
|
|
2
|
+
$strict-normalize: false;
|
|
3
|
+
|
|
4
|
+
// The default font family.
|
|
5
|
+
$base-font-family: 'Open Sans', sans-serif !default;
|
|
6
|
+
|
|
7
|
+
// The base font size.
|
|
8
|
+
$base-font-size: 12px !default; // Override default set in Compass' Vertical Rhythm partial.
|
|
9
|
+
|
|
10
|
+
// The base line height determines the basic unit of vertical rhythm.
|
|
11
|
+
$base-line-height: 27px !default; // Override default set in Compass' Vertical Rhythm partial.
|
|
12
|
+
|
|
13
|
+
// The font sizes
|
|
14
|
+
$h1-font-size: 3.75 * $base-font-size !default;
|
|
15
|
+
$h2-font-size: 2.5 * $base-font-size !default;
|
|
16
|
+
$h3-font-size: 2 * $base-font-size !default;
|
|
17
|
+
$h4-font-size: 1.5 * $base-font-size !default;
|
|
18
|
+
$h5-font-size: 1.25 * $base-font-size !default;
|
|
19
|
+
$h6-font-size: 1 * $base-font-size !default;
|
|
20
|
+
|
|
21
|
+
$hero-font-size: 3 * $base-font-size !default;
|
|
22
|
+
$lead-font-size: 2 * $base-font-size !default;
|
|
23
|
+
$p-font-size: 1.5 * $base-font-size !default;
|
|
24
|
+
$btn-font-size: 1.16667 * $base-font-size !default;
|
|
25
|
+
$input-font-size: 1.333 * $base-font-size !default;
|
|
26
|
+
|
|
27
|
+
// The amount lists and blockquotes are indented.
|
|
28
|
+
$indent-amount: 40px !default;
|
|
29
|
+
|
|
30
|
+
// Set this to true to add support for IE 6.
|
|
31
|
+
$legacy-support-for-ie6: false !default; // Override default set in Compass' Support partial.
|
|
32
|
+
|
|
33
|
+
// Set this to true to add support for IE 7.
|
|
34
|
+
$legacy-support-for-ie7: false !default; // Override default set in Compass' Support partial.
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
// After the default variables are set, import the required Compass partials.
|
|
38
|
+
@import "compass";
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# coding: utf-8
|
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
|
4
|
+
require 'si_core_styles/version'
|
|
5
|
+
|
|
6
|
+
Gem::Specification.new do |spec|
|
|
7
|
+
spec.name = "si_core_styles"
|
|
8
|
+
spec.version = SiCoreStyles::VERSION
|
|
9
|
+
spec.authors = ["Paul Northup"]
|
|
10
|
+
spec.email = ["paul@paulnorthup.com"]
|
|
11
|
+
spec.description = "A core styleset for startup institute"
|
|
12
|
+
spec.summary = "The core SI styles"
|
|
13
|
+
spec.homepage = ""
|
|
14
|
+
spec.license = "MIT"
|
|
15
|
+
|
|
16
|
+
spec.files = `git ls-files`.split($/)
|
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
|
19
|
+
spec.require_paths = ["lib"]
|
|
20
|
+
|
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.3"
|
|
22
|
+
spec.add_development_dependency "rake"
|
|
23
|
+
end
|
metadata
ADDED
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: si_core_styles
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.0.1
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Paul Northup
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2013-11-01 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: bundler
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - ~>
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: '1.3'
|
|
20
|
+
type: :development
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - ~>
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: '1.3'
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: rake
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - '>='
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: '0'
|
|
34
|
+
type: :development
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - '>='
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: '0'
|
|
41
|
+
description: A core styleset for startup institute
|
|
42
|
+
email:
|
|
43
|
+
- paul@paulnorthup.com
|
|
44
|
+
executables: []
|
|
45
|
+
extensions: []
|
|
46
|
+
extra_rdoc_files: []
|
|
47
|
+
files:
|
|
48
|
+
- .DS_Store
|
|
49
|
+
- .gitignore
|
|
50
|
+
- Gemfile
|
|
51
|
+
- LICENSE.txt
|
|
52
|
+
- README.md
|
|
53
|
+
- Rakefile
|
|
54
|
+
- lib/.DS_Store
|
|
55
|
+
- lib/si_core_styles.rb
|
|
56
|
+
- lib/si_core_styles/version.rb
|
|
57
|
+
- lib/stylesheets/_si_core_styles.sass
|
|
58
|
+
- lib/stylesheets/modules/_functions.scss
|
|
59
|
+
- lib/stylesheets/modules/_mixins.scss
|
|
60
|
+
- lib/stylesheets/modules/_normalize.scss
|
|
61
|
+
- lib/stylesheets/partials/_accessories.scss
|
|
62
|
+
- lib/stylesheets/partials/_forms.scss
|
|
63
|
+
- lib/stylesheets/partials/_typography.scss
|
|
64
|
+
- lib/stylesheets/variables/_colors.scss
|
|
65
|
+
- lib/stylesheets/variables/_display-variables.scss
|
|
66
|
+
- lib/stylesheets/variables/_media-queries.scss
|
|
67
|
+
- lib/stylesheets/variables/_normalize-vars.scss
|
|
68
|
+
- si_core_styles.gemspec
|
|
69
|
+
homepage: ''
|
|
70
|
+
licenses:
|
|
71
|
+
- MIT
|
|
72
|
+
metadata: {}
|
|
73
|
+
post_install_message:
|
|
74
|
+
rdoc_options: []
|
|
75
|
+
require_paths:
|
|
76
|
+
- lib
|
|
77
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
78
|
+
requirements:
|
|
79
|
+
- - '>='
|
|
80
|
+
- !ruby/object:Gem::Version
|
|
81
|
+
version: '0'
|
|
82
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
83
|
+
requirements:
|
|
84
|
+
- - '>='
|
|
85
|
+
- !ruby/object:Gem::Version
|
|
86
|
+
version: '0'
|
|
87
|
+
requirements: []
|
|
88
|
+
rubyforge_project:
|
|
89
|
+
rubygems_version: 2.0.2
|
|
90
|
+
signing_key:
|
|
91
|
+
specification_version: 4
|
|
92
|
+
summary: The core SI styles
|
|
93
|
+
test_files: []
|