basass 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1 @@
1
+ # BaSass
@@ -0,0 +1,40 @@
1
+ # -*- encoding: utf-8 -*-
2
+
3
+ Gem::Specification.new do |s|
4
+ s.name = %q{basass}
5
+ s.version = "0.0.1"
6
+
7
+ s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
8
+ s.authors = ["Lee Ellam"]
9
+ s.date = %q{2013-04-11}
10
+ s.description = %q{BaSass is a Sass framework to use as a base for mobile first responsive design.}
11
+ s.email = %w{lee@lee-ellam.com}
12
+ s.has_rdoc = false
13
+ s.files = [
14
+ "basass.gemspec",
15
+ "README.md",
16
+ "lib/basass.rb",
17
+ "stylesheets/_basass.scss",
18
+ "stylesheets/_basass-defaults.scss",
19
+ "stylesheets/_functions.scss",
20
+ "stylesheets/_mixins.scss",
21
+ "stylesheets/basass/_grids.scss",
22
+ "stylesheets/basass/_icons.scss",
23
+ "stylesheets/basass/_lists.scss",
24
+ "stylesheets/basass/_normalize.scss",
25
+ "stylesheets/basass/_prettyprint.scss",
26
+ "stylesheets/basass/_states.scss",
27
+ "stylesheets/basass/_top-nav.scss",
28
+ "stylesheets/basass/_type.scss",
29
+ "templates/project/application.scss",
30
+ "templates/project/application-ie.scss",
31
+ "templates/project/manifest.rb"
32
+ ]
33
+ s.homepage = %q{http://basass.lee-ellam.com}
34
+ s.require_paths = ["lib"]
35
+ s.rubyforge_project = %q{basass}
36
+ s.rubygems_version = %q{1.8.23}
37
+ s.summary = %q{Base framework for mobile first responsive design.}
38
+ s.add_dependency(%q<compass>, [">= 0.12.2"])
39
+ s.add_dependency(%q<sass>, [">= 3.2.0"])
40
+ end
@@ -0,0 +1,5 @@
1
+ require "sassy-math"
2
+ require "modular-scale"
3
+ require "compass"
4
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
5
+ Compass::Frameworks.register('basass', :path => extension_path)
@@ -0,0 +1,92 @@
1
+ // ==========================================================================
2
+ // Global defaults
3
+ // ==========================================================================
4
+
5
+ $old-ie: false !default;
6
+
7
+ $container-width: 1000px !default;
8
+
9
+ $main-color: #08a8e4 !default;
10
+ $secondary-color: #ff1926 !default;
11
+
12
+ $text-direction: ltr !default;
13
+ $float: left;
14
+ $opposite-float: right;
15
+
16
+ @if $text-direction == rtl {
17
+ $float: right;
18
+ $opposite-float: left;
19
+ }
20
+
21
+ // ==========================================================================
22
+ // Grid & media query defaults
23
+ // ==========================================================================
24
+
25
+ $columns: 12 !default;
26
+ $column-gutter: 30px !default;
27
+
28
+ $small-screen: 768px !default; // tablet - landscape
29
+ $medium-screen: 1280px !default; // desktop
30
+ $large-screen: 1440px !default; // large desktop, tv, etc
31
+
32
+ $small-query: "screen and (min-width: #{$small-screen})" !default;
33
+ $medium-query: "screen and (min-width: #{$medium-screen})" !default;
34
+ $large-query: "screen and (min-width: #{$large-screen})" !default;
35
+
36
+ $query-transition-property: all !default;
37
+ $query-transition-duration: 0.3s !default;
38
+ $query-transition-timing-function: linear !default;
39
+ $query-transition: $query-transition-property $query-transition-duration $query-transition-timing-function;
40
+ $animate-queries: true !default;
41
+
42
+ // ==========================================================================
43
+ // Typography defaults
44
+ // ==========================================================================
45
+
46
+ // Modular Scale
47
+ $base-font-size: 16px !default;
48
+ $base-important-number: 90px !default;
49
+ $base-size: $base-font-size $base-important-number;
50
+ $ratio: 1.61803398875 !default;
51
+ $line-height: 1.5 !default;
52
+
53
+ // Headers
54
+ $header-font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
55
+ $header-font-weight: bold !default;
56
+ $header-font-color: #222 !default;
57
+ $header-margin-top: 0.2em !default;
58
+ $header-margin-bottom: 0.5em !default;
59
+ $sub-heading-font-color: lighten($header-font-color, 50%) !default;
60
+
61
+ // Paragraphs
62
+ $paragraph-font-family: inherit !default;
63
+ $paragraph-font-weight: normal !default;
64
+ $paragraph-font-color: #444 !default;
65
+ $paragraph-margin-top: 0 !default;
66
+ $paragraph-margin-bottom: 1.5em !default;
67
+
68
+ // Code
69
+ $code-font-family: 'Courier New', Courier, mono !default;
70
+ $code-font-weight: 600 !default;
71
+ $code-font-color: $secondary-color !default;
72
+
73
+ // Rule
74
+ $hr-border-width: 1px !default;
75
+ $hr-border-style: solid !default;
76
+ $hr-border-color: #ddd !default;
77
+ $hr-margin-top: 1.5em !default;
78
+ $hr-margin-bottom: 1.5em !default;
79
+
80
+ // Blockquote
81
+ $blockquote-margin-top: 1.5em !default;
82
+ $blockquote-margin-bottom: 1.5em !default;
83
+ $blockquote-font-color: $sub-heading-font-color !default;
84
+
85
+ // Links
86
+ $link-color: $main-color !default;
87
+
88
+ // ==========================================================================
89
+ // Decorative styles
90
+ // ==========================================================================
91
+
92
+ $border-radius: 3px !default;
@@ -0,0 +1,14 @@
1
+ @import
2
+ "basass-defaults",
3
+ "modular-scale",
4
+ "functions",
5
+ "mixins",
6
+ // defaults
7
+ "basass/normalize",
8
+ "basass/type",
9
+ "basass/icons",
10
+ "basass/lists",
11
+ "basass/prettyprint",
12
+ "basass/grids",
13
+ "basass/top-nav",
14
+ "basass/states";
@@ -0,0 +1,43 @@
1
+ // ==========================================================================
2
+ // Helper functions - https://github.com/zurb/foundation/
3
+ // ==========================================================================
4
+
5
+ $em-base: 16px !default;
6
+
7
+ @function emCalc($pxWidth) {
8
+ @return $pxWidth / $em-base * 1em;
9
+ }
10
+
11
+ @function gridCalc($colNumber, $totalColumns) {
12
+ @return percentage(($colNumber / $totalColumns));
13
+ }
14
+
15
+ // ==========================================================================
16
+ // Math functions - https://github.com/adambom/Sass-Math
17
+ // ==========================================================================
18
+
19
+ @function power ($x, $n) {
20
+ $ret: 1;
21
+ @if $n >= 0 {
22
+ @for $i from 1 through $n {
23
+ $ret: $ret * $x;
24
+ }
25
+ } @else {
26
+ @for $i from $n to 0 {
27
+ $ret: $ret / $x;
28
+ }
29
+ }
30
+ @return $ret;
31
+ }
32
+
33
+
34
+
35
+ @function numberToWord($num){
36
+ $words: one, two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen;
37
+ @for $i from 1 through length($words) {
38
+ $word: nth($words, $i);
39
+ @if $num == $i {
40
+ @return $word;
41
+ }
42
+ }
43
+ }
@@ -0,0 +1,81 @@
1
+ // ==========================================================================
2
+ // Helpers
3
+ // ==========================================================================
4
+
5
+ @mixin clearfix {
6
+ *zoom:1;
7
+ &:before, &:after{content:'';display:table}
8
+ &:after{clear:both}
9
+ }
10
+
11
+ // ==========================================================================
12
+ // Responsive mixins
13
+ // ==========================================================================
14
+
15
+ @mixin media-query($query){
16
+ @media #{$query} {
17
+ @content;
18
+ }
19
+ }
20
+
21
+ @mixin respond-to($query){
22
+ @if $old-ie == true {
23
+ @if $query == "screen and (min-width: #{$small-screen})" {
24
+ @content;
25
+ }
26
+ }
27
+ @else {
28
+ @include media-query($query) {
29
+ @content;
30
+ }
31
+ }
32
+ }
33
+
34
+ // Animate media queries
35
+ @mixin animate-query{
36
+ @if $animate-queries and $query-transition {
37
+ @include transition($query-transition);
38
+ }
39
+ }
40
+
41
+ // ==========================================================================
42
+ // IE mixin
43
+ // ==========================================================================
44
+
45
+ @mixin ie{
46
+ @if $ie {
47
+ @content;
48
+ }
49
+ }
50
+
51
+ // ==========================================================================
52
+ // Animation
53
+ // ==========================================================================
54
+
55
+ @mixin keyframes($name){
56
+ @-webkit-keyframes $name {
57
+ @content;
58
+ }
59
+ @-moz-keyframes $name {
60
+ @content;
61
+ }
62
+ @-o-keyframes $name {
63
+ @content;
64
+ }
65
+ @keyframes $name {
66
+ @content;
67
+ }
68
+ //$prefixes: -webkit-, -moz-, -o-, '';
69
+ //@each $prefix in $prefixes {
70
+ // "@#{$prefix}keyframes" $name {
71
+ // @content;
72
+ // }
73
+ //}
74
+ }
75
+
76
+ @mixin animation($animation-name, $animation-duration, $animation-timing-function){
77
+ $prefixes: -webkit-, -moz-, -o-, '';
78
+ @each $prefix in $prefixes {
79
+ #{$prefix}animation: $animation-name $animation-duration $animation-timing-function;
80
+ }
81
+ }
@@ -0,0 +1,128 @@
1
+ @import "compass/css3";
2
+
3
+ // ==========================================================================
4
+ // Grid variables and mixins
5
+ // ==========================================================================
6
+
7
+ $output-grid-classes: true !default;
8
+
9
+ //
10
+ // Rows
11
+ //
12
+ %row{
13
+ @include clearfix;
14
+ box-sizing:border-box;
15
+ max-width: $container-width + $column-gutter;
16
+ width: 100%;
17
+ margin: 0 auto;
18
+ }
19
+
20
+ %nested-row{
21
+ margin-left: -($column-gutter / 2);
22
+ margin-right: -($column-gutter / 2);
23
+ width: auto;
24
+ max-width: none;
25
+ }
26
+
27
+ @mixin grid-row($behaviour: false) {
28
+ @if $behaviour == false {
29
+ @extend %row;
30
+ }
31
+ @else if $behaviour == nested {
32
+ @extend %nested-row;
33
+ }
34
+ }
35
+
36
+ //
37
+ // Columns
38
+ //
39
+ @mixin grid-column($column-size: false, $push: false, $pull: false, $centered: false, $offset: false){
40
+
41
+ @include animate-query;
42
+ @include box-sizing(border-box);
43
+ position: relative;
44
+ padding-left: $column-gutter / 2;
45
+ padding-right: $column-gutter / 2;
46
+
47
+ @if $column-size {
48
+ width: gridCalc($column-size, $columns);
49
+ float: #{$float};
50
+ }
51
+
52
+ //
53
+ // Centered
54
+ //
55
+ @if $centered {
56
+ float: none !important;
57
+ margin: 0 auto !important;
58
+ }
59
+
60
+ //
61
+ // Source ordering
62
+ //
63
+ @if $push {
64
+ #{$float}: gridCalc($push, $columns);
65
+ }
66
+ @if $pull {
67
+ #{$opposite-float}: gridCalc($pull, $columns);
68
+ }
69
+
70
+ //
71
+ // Offset
72
+ //
73
+ @if $offset {
74
+ margin-#{$float}: gridCalc($offset, $columns);
75
+ }
76
+ }
77
+
78
+ // ==========================================================================
79
+ // Grid classes
80
+ // ==========================================================================
81
+
82
+ @if $output-grid-classes{
83
+ .row{
84
+ @include grid-row;
85
+
86
+ .column,
87
+ .columns {
88
+ @include grid-column();
89
+
90
+ &.centered {
91
+ @include grid-column($centered: true);
92
+ }
93
+
94
+ @include respond-to($small-query) {
95
+ @for $i from 1 through $columns {
96
+ $word: numberToWord($i);
97
+ &.#{$word}{
98
+ @include grid-column($column-size: $i);
99
+ }
100
+
101
+ //
102
+ // Source ordering
103
+ //
104
+ &.push-#{$word}{
105
+ @include grid-column($push: $i);
106
+ }
107
+ &.pull-#{$word}{
108
+ @include grid-column($pull: $i);
109
+ }
110
+
111
+ //
112
+ // Offset
113
+ //
114
+ &.offset-#{$word}{
115
+ @include grid-column($offset: $i);
116
+ }
117
+ }
118
+ }
119
+ }
120
+
121
+ //
122
+ // Nested rows
123
+ //
124
+ .row{
125
+ @include grid-row($behaviour: nested);
126
+ }
127
+ }
128
+ }
@@ -0,0 +1,34 @@
1
+ /*!
2
+ * Font Awesome 3.0.2
3
+ * the iconic font designed for use with Twitter Bootstrap
4
+ * -------------------------------------------------------
5
+ * The full suite of pictographic icons, examples, and documentation
6
+ * can be found at: http://fortawesome.github.com/Font-Awesome/
7
+ *
8
+ * License
9
+ * -------------------------------------------------------
10
+ * - The Font Awesome font is licensed under the SIL Open Font License - http://scripts.sil.org/OFL
11
+ * - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
12
+ * http://opensource.org/licenses/mit-license.html
13
+ * - The Font Awesome pictograms are licensed under the CC BY 3.0 License - http://creativecommons.org/licenses/by/3.0/
14
+ * - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
15
+ * "Font Awesome by Dave Gandy - http://fortawesome.github.com/Font-Awesome"
16
+
17
+ * Contact
18
+ * -------------------------------------------------------
19
+ * Email: dave@davegandy.com
20
+ * Twitter: http://twitter.com/fortaweso_me
21
+ * Work: Lead Product Designer @ http://kyruus.com
22
+ */
23
+ $cdn-url: 'http://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/';
24
+
25
+ @font-face{
26
+ font-family:'FontAwesome';
27
+ src:url('#{$cdn-url}font/fontawesome-webfont.eot?v=3.0.1');
28
+ src:url('#{$cdn-url}font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
29
+ url('#{$cdn-url}font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
30
+ url('#{$cdn-url}font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
31
+ font-weight:normal;
32
+ font-style:normal }
33
+
34
+ [class^="icon-"],[class*=" icon-"]{font-family:FontAwesome;font-weight:normal;font-style:normal;text-decoration:inherit;-webkit-font-smoothing:antialiased;display:inline;width:auto;height:auto;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;margin-top:0}.icon-white,.nav-pills>.active>a>[class^="icon-"],.nav-pills>.active>a>[class*=" icon-"],.nav-list>.active>a>[class^="icon-"],.nav-list>.active>a>[class*=" icon-"],.navbar-inverse .nav>.active>a>[class^="icon-"],.navbar-inverse .nav>.active>a>[class*=" icon-"],.dropdown-menu>li>a:hover>[class^="icon-"],.dropdown-menu>li>a:hover>[class*=" icon-"],.dropdown-menu>.active>a>[class^="icon-"],.dropdown-menu>.active>a>[class*=" icon-"],.dropdown-submenu:hover>a>[class^="icon-"],.dropdown-submenu:hover>a>[class*=" icon-"]{background-image:none}[class^="icon-"]:before,[class*=" icon-"]:before{text-decoration:inherit;display:inline-block;speak:none}a [class^="icon-"],a [class*=" icon-"]{display:inline-block}.icon-large:before{vertical-align:-10%;font-size:1.3333333333333333em}.btn [class^="icon-"],.nav [class^="icon-"],.btn [class*=" icon-"],.nav [class*=" icon-"]{display:inline}.btn [class^="icon-"].icon-large,.nav [class^="icon-"].icon-large,.btn [class*=" icon-"].icon-large,.nav [class*=" icon-"].icon-large{line-height:.9em}.btn [class^="icon-"].icon-spin,.nav [class^="icon-"].icon-spin,.btn [class*=" icon-"].icon-spin,.nav [class*=" icon-"].icon-spin{display:inline-block}.nav-tabs [class^="icon-"],.nav-pills [class^="icon-"],.nav-tabs [class*=" icon-"],.nav-pills [class*=" icon-"],.nav-tabs [class^="icon-"].icon-large,.nav-pills [class^="icon-"].icon-large,.nav-tabs [class*=" icon-"].icon-large,.nav-pills [class*=" icon-"].icon-large{line-height:.9em}li [class^="icon-"],.nav li [class^="icon-"],li [class*=" icon-"],.nav li [class*=" icon-"]{display:inline-block;width:1.25em;text-align:center}li [class^="icon-"].icon-large,.nav li [class^="icon-"].icon-large,li [class*=" icon-"].icon-large,.nav li [class*=" icon-"].icon-large{width:1.5625em}ul.icons{list-style-type:none;text-indent:-0.75em}ul.icons li [class^="icon-"],ul.icons li [class*=" icon-"]{width:.75em}.icon-muted{color:#eee}.icon-border{border:solid 1px #eee;padding:.2em .25em .15em;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px}.icon-2x{font-size:2em}.icon-2x.icon-border{border-width:2px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.icon-3x{font-size:3em}.icon-3x.icon-border{border-width:3px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.icon-4x{font-size:4em}.icon-4x.icon-border{border-width:4px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px}.pull-right{float:right}.pull-left{float:left}[class^="icon-"].pull-left,[class*=" icon-"].pull-left{margin-right:.3em}[class^="icon-"].pull-right,[class*=" icon-"].pull-right{margin-left:.3em}.btn [class^="icon-"].pull-left.icon-2x,.btn [class*=" icon-"].pull-left.icon-2x,.btn [class^="icon-"].pull-right.icon-2x,.btn [class*=" icon-"].pull-right.icon-2x{margin-top:.18em}.btn [class^="icon-"].icon-spin.icon-large,.btn [class*=" icon-"].icon-spin.icon-large{line-height:.8em}.btn.btn-small [class^="icon-"].pull-left.icon-2x,.btn.btn-small [class*=" icon-"].pull-left.icon-2x,.btn.btn-small [class^="icon-"].pull-right.icon-2x,.btn.btn-small [class*=" icon-"].pull-right.icon-2x{margin-top:.25em}.btn.btn-large [class^="icon-"],.btn.btn-large [class*=" icon-"]{margin-top:0}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x,.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-top:.05em}.btn.btn-large [class^="icon-"].pull-left.icon-2x,.btn.btn-large [class*=" icon-"].pull-left.icon-2x{margin-right:.2em}.btn.btn-large [class^="icon-"].pull-right.icon-2x,.btn.btn-large [class*=" icon-"].pull-right.icon-2x{margin-left:.2em}.icon-spin{display:inline-block;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;-webkit-animation:spin 2s infinite linear;animation:spin 2s infinite linear}@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}100%{-moz-transform:rotate(359deg)}}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg)}}@-o-keyframes spin{0%{-o-transform:rotate(0deg)}100%{-o-transform:rotate(359deg)}}@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}100%{-ms-transform:rotate(359deg)}}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}@-moz-document url-prefix(){.icon-spin{height:.9em}.btn .icon-spin{height:auto}.icon-spin.icon-large{height:1.25em}.btn .icon-spin.icon-large{height:.75em}}.icon-glass:before{content:"\f000"}.icon-music:before{content:"\f001"}.icon-search:before{content:"\f002"}.icon-envelope:before{content:"\f003"}.icon-heart:before{content:"\f004"}.icon-star:before{content:"\f005"}.icon-star-empty:before{content:"\f006"}.icon-user:before{content:"\f007"}.icon-film:before{content:"\f008"}.icon-th-large:before{content:"\f009"}.icon-th:before{content:"\f00a"}.icon-th-list:before{content:"\f00b"}.icon-ok:before{content:"\f00c"}.icon-remove:before{content:"\f00d"}.icon-zoom-in:before{content:"\f00e"}.icon-zoom-out:before{content:"\f010"}.icon-off:before{content:"\f011"}.icon-signal:before{content:"\f012"}.icon-cog:before{content:"\f013"}.icon-trash:before{content:"\f014"}.icon-home:before{content:"\f015"}.icon-file:before{content:"\f016"}.icon-time:before{content:"\f017"}.icon-road:before{content:"\f018"}.icon-download-alt:before{content:"\f019"}.icon-download:before{content:"\f01a"}.icon-upload:before{content:"\f01b"}.icon-inbox:before{content:"\f01c"}.icon-play-circle:before{content:"\f01d"}.icon-repeat:before{content:"\f01e"}.icon-refresh:before{content:"\f021"}.icon-list-alt:before{content:"\f022"}.icon-lock:before{content:"\f023"}.icon-flag:before{content:"\f024"}.icon-headphones:before{content:"\f025"}.icon-volume-off:before{content:"\f026"}.icon-volume-down:before{content:"\f027"}.icon-volume-up:before{content:"\f028"}.icon-qrcode:before{content:"\f029"}.icon-barcode:before{content:"\f02a"}.icon-tag:before{content:"\f02b"}.icon-tags:before{content:"\f02c"}.icon-book:before{content:"\f02d"}.icon-bookmark:before{content:"\f02e"}.icon-print:before{content:"\f02f"}.icon-camera:before{content:"\f030"}.icon-font:before{content:"\f031"}.icon-bold:before{content:"\f032"}.icon-italic:before{content:"\f033"}.icon-text-height:before{content:"\f034"}.icon-text-width:before{content:"\f035"}.icon-align-left:before{content:"\f036"}.icon-align-center:before{content:"\f037"}.icon-align-right:before{content:"\f038"}.icon-align-justify:before{content:"\f039"}.icon-list:before{content:"\f03a"}.icon-indent-left:before{content:"\f03b"}.icon-indent-right:before{content:"\f03c"}.icon-facetime-video:before{content:"\f03d"}.icon-picture:before{content:"\f03e"}.icon-pencil:before{content:"\f040"}.icon-map-marker:before{content:"\f041"}.icon-adjust:before{content:"\f042"}.icon-tint:before{content:"\f043"}.icon-edit:before{content:"\f044"}.icon-share:before{content:"\f045"}.icon-check:before{content:"\f046"}.icon-move:before{content:"\f047"}.icon-step-backward:before{content:"\f048"}.icon-fast-backward:before{content:"\f049"}.icon-backward:before{content:"\f04a"}.icon-play:before{content:"\f04b"}.icon-pause:before{content:"\f04c"}.icon-stop:before{content:"\f04d"}.icon-forward:before{content:"\f04e"}.icon-fast-forward:before{content:"\f050"}.icon-step-forward:before{content:"\f051"}.icon-eject:before{content:"\f052"}.icon-chevron-left:before{content:"\f053"}.icon-chevron-right:before{content:"\f054"}.icon-plus-sign:before{content:"\f055"}.icon-minus-sign:before{content:"\f056"}.icon-remove-sign:before{content:"\f057"}.icon-ok-sign:before{content:"\f058"}.icon-question-sign:before{content:"\f059"}.icon-info-sign:before{content:"\f05a"}.icon-screenshot:before{content:"\f05b"}.icon-remove-circle:before{content:"\f05c"}.icon-ok-circle:before{content:"\f05d"}.icon-ban-circle:before{content:"\f05e"}.icon-arrow-left:before{content:"\f060"}.icon-arrow-right:before{content:"\f061"}.icon-arrow-up:before{content:"\f062"}.icon-arrow-down:before{content:"\f063"}.icon-share-alt:before{content:"\f064"}.icon-resize-full:before{content:"\f065"}.icon-resize-small:before{content:"\f066"}.icon-plus:before{content:"\f067"}.icon-minus:before{content:"\f068"}.icon-asterisk:before{content:"\f069"}.icon-exclamation-sign:before{content:"\f06a"}.icon-gift:before{content:"\f06b"}.icon-leaf:before{content:"\f06c"}.icon-fire:before{content:"\f06d"}.icon-eye-open:before{content:"\f06e"}.icon-eye-close:before{content:"\f070"}.icon-warning-sign:before{content:"\f071"}.icon-plane:before{content:"\f072"}.icon-calendar:before{content:"\f073"}.icon-random:before{content:"\f074"}.icon-comment:before{content:"\f075"}.icon-magnet:before{content:"\f076"}.icon-chevron-up:before{content:"\f077"}.icon-chevron-down:before{content:"\f078"}.icon-retweet:before{content:"\f079"}.icon-shopping-cart:before{content:"\f07a"}.icon-folder-close:before{content:"\f07b"}.icon-folder-open:before{content:"\f07c"}.icon-resize-vertical:before{content:"\f07d"}.icon-resize-horizontal:before{content:"\f07e"}.icon-bar-chart:before{content:"\f080"}.icon-twitter-sign:before{content:"\f081"}.icon-facebook-sign:before{content:"\f082"}.icon-camera-retro:before{content:"\f083"}.icon-key:before{content:"\f084"}.icon-cogs:before{content:"\f085"}.icon-comments:before{content:"\f086"}.icon-thumbs-up:before{content:"\f087"}.icon-thumbs-down:before{content:"\f088"}.icon-star-half:before{content:"\f089"}.icon-heart-empty:before{content:"\f08a"}.icon-signout:before{content:"\f08b"}.icon-linkedin-sign:before{content:"\f08c"}.icon-pushpin:before{content:"\f08d"}.icon-external-link:before{content:"\f08e"}.icon-signin:before{content:"\f090"}.icon-trophy:before{content:"\f091"}.icon-github-sign:before{content:"\f092"}.icon-upload-alt:before{content:"\f093"}.icon-lemon:before{content:"\f094"}.icon-phone:before{content:"\f095"}.icon-check-empty:before{content:"\f096"}.icon-bookmark-empty:before{content:"\f097"}.icon-phone-sign:before{content:"\f098"}.icon-twitter:before{content:"\f099"}.icon-facebook:before{content:"\f09a"}.icon-github:before{content:"\f09b"}.icon-unlock:before{content:"\f09c"}.icon-credit-card:before{content:"\f09d"}.icon-rss:before{content:"\f09e"}.icon-hdd:before{content:"\f0a0"}.icon-bullhorn:before{content:"\f0a1"}.icon-bell:before{content:"\f0a2"}.icon-certificate:before{content:"\f0a3"}.icon-hand-right:before{content:"\f0a4"}.icon-hand-left:before{content:"\f0a5"}.icon-hand-up:before{content:"\f0a6"}.icon-hand-down:before{content:"\f0a7"}.icon-circle-arrow-left:before{content:"\f0a8"}.icon-circle-arrow-right:before{content:"\f0a9"}.icon-circle-arrow-up:before{content:"\f0aa"}.icon-circle-arrow-down:before{content:"\f0ab"}.icon-globe:before{content:"\f0ac"}.icon-wrench:before{content:"\f0ad"}.icon-tasks:before{content:"\f0ae"}.icon-filter:before{content:"\f0b0"}.icon-briefcase:before{content:"\f0b1"}.icon-fullscreen:before{content:"\f0b2"}.icon-group:before{content:"\f0c0"}.icon-link:before{content:"\f0c1"}.icon-cloud:before{content:"\f0c2"}.icon-beaker:before{content:"\f0c3"}.icon-cut:before{content:"\f0c4"}.icon-copy:before{content:"\f0c5"}.icon-paper-clip:before{content:"\f0c6"}.icon-save:before{content:"\f0c7"}.icon-sign-blank:before{content:"\f0c8"}.icon-reorder:before{content:"\f0c9"}.icon-list-ul:before{content:"\f0ca"}.icon-list-ol:before{content:"\f0cb"}.icon-strikethrough:before{content:"\f0cc"}.icon-underline:before{content:"\f0cd"}.icon-table:before{content:"\f0ce"}.icon-magic:before{content:"\f0d0"}.icon-truck:before{content:"\f0d1"}.icon-pinterest:before{content:"\f0d2"}.icon-pinterest-sign:before{content:"\f0d3"}.icon-google-plus-sign:before{content:"\f0d4"}.icon-google-plus:before{content:"\f0d5"}.icon-money:before{content:"\f0d6"}.icon-caret-down:before{content:"\f0d7"}.icon-caret-up:before{content:"\f0d8"}.icon-caret-left:before{content:"\f0d9"}.icon-caret-right:before{content:"\f0da"}.icon-columns:before{content:"\f0db"}.icon-sort:before{content:"\f0dc"}.icon-sort-down:before{content:"\f0dd"}.icon-sort-up:before{content:"\f0de"}.icon-envelope-alt:before{content:"\f0e0"}.icon-linkedin:before{content:"\f0e1"}.icon-undo:before{content:"\f0e2"}.icon-legal:before{content:"\f0e3"}.icon-dashboard:before{content:"\f0e4"}.icon-comment-alt:before{content:"\f0e5"}.icon-comments-alt:before{content:"\f0e6"}.icon-bolt:before{content:"\f0e7"}.icon-sitemap:before{content:"\f0e8"}.icon-umbrella:before{content:"\f0e9"}.icon-paste:before{content:"\f0ea"}.icon-lightbulb:before{content:"\f0eb"}.icon-exchange:before{content:"\f0ec"}.icon-cloud-download:before{content:"\f0ed"}.icon-cloud-upload:before{content:"\f0ee"}.icon-user-md:before{content:"\f0f0"}.icon-stethoscope:before{content:"\f0f1"}.icon-suitcase:before{content:"\f0f2"}.icon-bell-alt:before{content:"\f0f3"}.icon-coffee:before{content:"\f0f4"}.icon-food:before{content:"\f0f5"}.icon-file-alt:before{content:"\f0f6"}.icon-building:before{content:"\f0f7"}.icon-hospital:before{content:"\f0f8"}.icon-ambulance:before{content:"\f0f9"}.icon-medkit:before{content:"\f0fa"}.icon-fighter-jet:before{content:"\f0fb"}.icon-beer:before{content:"\f0fc"}.icon-h-sign:before{content:"\f0fd"}.icon-plus-sign-alt:before{content:"\f0fe"}.icon-double-angle-left:before{content:"\f100"}.icon-double-angle-right:before{content:"\f101"}.icon-double-angle-up:before{content:"\f102"}.icon-double-angle-down:before{content:"\f103"}.icon-angle-left:before{content:"\f104"}.icon-angle-right:before{content:"\f105"}.icon-angle-up:before{content:"\f106"}.icon-angle-down:before{content:"\f107"}.icon-desktop:before{content:"\f108"}.icon-laptop:before{content:"\f109"}.icon-tablet:before{content:"\f10a"}.icon-mobile-phone:before{content:"\f10b"}.icon-circle-blank:before{content:"\f10c"}.icon-quote-left:before{content:"\f10d"}.icon-quote-right:before{content:"\f10e"}.icon-spinner:before{content:"\f110"}.icon-circle:before{content:"\f111"}.icon-reply:before{content:"\f112"}.icon-github-alt:before{content:"\f113"}.icon-folder-close-alt:before{content:"\f114"}.icon-folder-open-alt:before{content:"\f115"}
@@ -0,0 +1,52 @@
1
+ // ==========================================================================
2
+ // Basic Lists
3
+ // ==========================================================================
4
+ %list {
5
+ margin: $paragraph-margin-top 0 $paragraph-margin-bottom;
6
+ padding: 0;
7
+ list-style-position: outside;
8
+ }
9
+ %nested-list{
10
+ margin: 0 0 0 20px;
11
+ }
12
+
13
+ ol{
14
+ @extend %list;
15
+
16
+ ol, ul {
17
+ @extend %nested-list;
18
+ }
19
+ }
20
+
21
+ ul{
22
+ @extend %list;
23
+
24
+ ol, ul {
25
+ @extend %nested-list;
26
+ }
27
+
28
+ &.circle{list-style:circle}
29
+ &.square{list-style:square}
30
+ &.disc{list-style:disc}
31
+ }
32
+
33
+ dl{
34
+ @extend %list;
35
+
36
+ dt {
37
+ font-weight: bold;
38
+ }
39
+ dd {
40
+ margin: 0;
41
+ }
42
+
43
+ dd {
44
+ @extend %nested-list;
45
+ }
46
+ }
47
+
48
+ .nav-list{
49
+ margin: 0;
50
+ padding: 0;
51
+ list-style: none;
52
+ }
@@ -0,0 +1,291 @@
1
+ //! normalize.css v2.1.0 | MIT License | git.io/normalize
2
+
3
+ // ==========================================================================
4
+ // HTML5 display definitions
5
+ // ==========================================================================
6
+
7
+ // Correct `block` display not defined in IE 8/9.
8
+ article,
9
+ aside,
10
+ details,
11
+ figcaption,
12
+ figure,
13
+ footer,
14
+ header,
15
+ hgroup,
16
+ main,
17
+ nav,
18
+ section,
19
+ summary {
20
+ display: block;
21
+ }
22
+
23
+ // Correct `inline-block` display not defined in IE 8/9.
24
+ audio,
25
+ canvas,
26
+ video {
27
+ display: inline-block;
28
+ }
29
+
30
+ // Prevent modern browsers from displaying `audio` without controls.
31
+ // Remove excess height in iOS 5 devices.
32
+ audio:not([controls]) {
33
+ display: none;
34
+ height: 0;
35
+ }
36
+
37
+ // Address styling not present in IE 8/9.
38
+ [hidden] {
39
+ display: none;
40
+ }
41
+
42
+ // ==========================================================================
43
+ // Base
44
+ // ==========================================================================
45
+
46
+ // 1. Set default font family to sans-serif.
47
+ // 2. Prevent iOS text size adjust after orientation change, without disabling
48
+ // user zoom.
49
+ html {
50
+ font-family: sans-serif; // 1
51
+ -webkit-text-size-adjust: 100%; // 2
52
+ -ms-text-size-adjust: 100%; // 2
53
+ }
54
+
55
+ // Remove default margin.
56
+ body {
57
+ margin: 0;
58
+ }
59
+
60
+ // ==========================================================================
61
+ // Links
62
+ // ==========================================================================
63
+
64
+ // Address `outline` inconsistency between Chrome and other browsers.
65
+ a:focus {
66
+ outline: thin dotted;
67
+ }
68
+
69
+ // Improve readability when focused and also mouse hovered in all browsers.
70
+ a:active,
71
+ a:hover {
72
+ outline: 0;
73
+ }
74
+
75
+ // ==========================================================================
76
+ // Typography
77
+ // ==========================================================================
78
+
79
+ // Address variable `h1` font-size and margin within `section` and `article`
80
+ // contexts in Firefox 4+, Safari 5, and Chrome.
81
+ h1 {
82
+ font-size: 2em;
83
+ margin: 0.67em 0;
84
+ }
85
+
86
+ // Address styling not present in IE 8/9, Safari 5, and Chrome.
87
+ abbr[title] {
88
+ border-bottom: 1px dotted;
89
+ }
90
+
91
+ // Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
92
+ b,
93
+ strong {
94
+ font-weight: bold;
95
+ }
96
+
97
+ // Address styling not present in Safari 5 and Chrome.
98
+ dfn {
99
+ font-style: italic;
100
+ }
101
+
102
+ // Address differences between Firefox and other browsers.
103
+ hr {
104
+ -moz-box-sizing: content-box;
105
+ box-sizing: content-box;
106
+ height: 0;
107
+ }
108
+
109
+ // Address styling not present in IE 8/9.
110
+ mark {
111
+ background: #ff0;
112
+ color: #000;
113
+ }
114
+
115
+ // Correct font family set oddly in Safari 5 and Chrome.
116
+ code,
117
+ kbd,
118
+ pre,
119
+ samp {
120
+ font-family: monospace, serif;
121
+ font-size: 1em;
122
+ }
123
+
124
+ // Improve readability of pre-formatted text in all browsers.
125
+ pre {
126
+ white-space: pre-wrap;
127
+ }
128
+
129
+ // Set consistent quote types.
130
+ q {
131
+ quotes: "\201C" "\201D" "\2018" "\2019";
132
+ }
133
+
134
+ // Address inconsistent and variable font size in all browsers.
135
+ small {
136
+ font-size: 80%;
137
+ }
138
+
139
+ // Prevent `sub` and `sup` affecting `line-height` in all browsers.
140
+ sub,
141
+ sup {
142
+ font-size: 75%;
143
+ line-height: 0;
144
+ position: relative;
145
+ vertical-align: baseline;
146
+ }
147
+
148
+ sup {
149
+ top: -0.5em;
150
+ }
151
+
152
+ sub {
153
+ bottom: -0.25em;
154
+ }
155
+
156
+ // ==========================================================================
157
+ // Embedded content
158
+ // ==========================================================================
159
+
160
+ // Remove border when inside `a` element in IE 8/9.
161
+ img {
162
+ border: 0;
163
+ }
164
+
165
+ // Correct overflow displayed oddly in IE 9.
166
+ svg:not(:root) {
167
+ overflow: hidden;
168
+ }
169
+
170
+ // ==========================================================================
171
+ // Figures
172
+ // ==========================================================================
173
+
174
+ // Address margin not present in IE 8/9 and Safari 5.
175
+ figure {
176
+ margin: 0;
177
+ }
178
+
179
+ // ==========================================================================
180
+ // Forms
181
+ // ==========================================================================
182
+
183
+ // Define consistent border, margin, and padding.
184
+ fieldset {
185
+ border: 1px solid #c0c0c0;
186
+ margin: 0 2px;
187
+ padding: 0.35em 0.625em 0.75em;
188
+ }
189
+
190
+ // 1. Correct `color` not being inherited in IE 8/9.
191
+ // 2. Remove padding so people aren't caught out if they zero out fieldsets.
192
+ legend {
193
+ border: 0; // 1
194
+ padding: 0; // 2
195
+ }
196
+
197
+ // 1. Correct font family not being inherited in all browsers.
198
+ // 2. Correct font size not being inherited in all browsers.
199
+ // 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
200
+ button,
201
+ input,
202
+ select,
203
+ textarea {
204
+ font-family: inherit; // 1
205
+ font-size: 100%; // 2
206
+ margin: 0; // 3
207
+ }
208
+
209
+ // Address Firefox 4+ setting `line-height` on `input` using `!important` in
210
+ // the UA stylesheet.
211
+ button,
212
+ input {
213
+ line-height: normal;
214
+ }
215
+
216
+ // Address inconsistent `text-transform` inheritance for `button` and `select`.
217
+ // All other form control elements do not inherit `text-transform` values.
218
+ // Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
219
+ // Correct `select` style inheritance in Firefox 4+ and Opera.
220
+ button,
221
+ select {
222
+ text-transform: none;
223
+ }
224
+
225
+ // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
226
+ // and `video` controls.
227
+ // 2. Correct inability to style clickable `input` types in iOS.
228
+ // 3. Improve usability and consistency of cursor style between image-type
229
+ // `input` and others.
230
+ button,
231
+ html input[type="button"], // 1
232
+ input[type="reset"],
233
+ input[type="submit"] {
234
+ -webkit-appearance: button; // 2
235
+ cursor: pointer; // 3
236
+ }
237
+
238
+ // Re-set default cursor for disabled elements.
239
+ button[disabled],
240
+ html input[disabled] {
241
+ cursor: default;
242
+ }
243
+
244
+ // 1. Address box sizing set to `content-box` in IE 8/9.
245
+ // 2. Remove excess padding in IE 8/9.
246
+ input[type="checkbox"],
247
+ input[type="radio"] {
248
+ box-sizing: border-box; // 1
249
+ padding: 0; // 2
250
+ }
251
+
252
+ // 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
253
+ // 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
254
+ // (include `-moz` to future-proof).
255
+ input[type="search"] {
256
+ -webkit-appearance: textfield; // 1
257
+ -moz-box-sizing: content-box;
258
+ -webkit-box-sizing: content-box; // 2
259
+ box-sizing: content-box;
260
+ }
261
+
262
+ // Remove inner padding and search cancel button in Safari 5 and Chrome
263
+ // on OS X.
264
+ input[type="search"]::-webkit-search-cancel-button,
265
+ input[type="search"]::-webkit-search-decoration {
266
+ -webkit-appearance: none;
267
+ }
268
+
269
+ // Remove inner padding and border in Firefox 4+.
270
+ button::-moz-focus-inner,
271
+ input::-moz-focus-inner {
272
+ border: 0;
273
+ padding: 0;
274
+ }
275
+
276
+ // 1. Remove default vertical scrollbar in IE 8/9.
277
+ // 2. Improve readability and alignment in all browsers.
278
+ textarea {
279
+ overflow: auto; // 1
280
+ vertical-align: top; // 2
281
+ }
282
+
283
+ // ==========================================================================
284
+ // Tables
285
+ // ==========================================================================
286
+
287
+ // Remove most spacing between table cells.
288
+ table {
289
+ border-collapse: collapse;
290
+ border-spacing: 0;
291
+ }
@@ -0,0 +1,121 @@
1
+ /*
2
+ * Derived from einaros's Sons of Obsidian theme at
3
+ * http://studiostyl.es/schemes/son-of-obsidian by
4
+ * Alex Ford of CodeTunnel:
5
+ * http://CodeTunnel.com/blog/post/71/google-code-prettify-obsidian-theme
6
+ */
7
+
8
+ // prettyprint inserts its stylesheet after these styles get loaded,
9
+ // addition of !important is to preserve these
10
+
11
+ .str
12
+ {
13
+ color: #EC7600 !important;
14
+ }
15
+ .kwd
16
+ {
17
+ color: #93C763 !important;
18
+ }
19
+ .com
20
+ {
21
+ color: #66747B !important;
22
+ }
23
+ .typ
24
+ {
25
+ color: #678CB1 !important;
26
+ }
27
+ .lit
28
+ {
29
+ color: #FACD22 !important;
30
+ }
31
+ .pun
32
+ {
33
+ color: #F1F2F3 !important;
34
+ }
35
+ .pln
36
+ {
37
+ color: #F1F2F3 !important;
38
+ }
39
+ .tag
40
+ {
41
+ color: #8AC763 !important;
42
+ }
43
+ .atn
44
+ {
45
+ color: #E0E2E4 !important;
46
+ }
47
+ .atv
48
+ {
49
+ color: #EC7600 !important;
50
+ }
51
+ .dec
52
+ {
53
+ color: purple !important;
54
+ }
55
+ pre.prettyprint
56
+ {
57
+ border: 0px solid #888 !important;
58
+ }
59
+ ol.linenums
60
+ {
61
+ margin-top: 0 !important;
62
+ margin-bottom: 0 !important;
63
+ }
64
+ .prettyprint {
65
+ background: #000 !important;
66
+ }
67
+ li.L0, li.L1, li.L2, li.L3, li.L4, li.L5, li.L6, li.L7, li.L8, li.L9
68
+ {
69
+ color: #555 !important;
70
+ list-style-type: decimal !important;
71
+ }
72
+ li.L1, li.L3, li.L5, li.L7, li.L9 {
73
+ background: #111 !important;
74
+ }
75
+ @media print
76
+ {
77
+ .str
78
+ {
79
+ color: #060 !important;
80
+ }
81
+ .kwd
82
+ {
83
+ color: #006 !important;
84
+ font-weight: bold !important;
85
+ }
86
+ .com
87
+ {
88
+ color: #600 !important;
89
+ font-style: italic !important;
90
+ }
91
+ .typ
92
+ {
93
+ color: #404 !important;
94
+ font-weight: bold !important;
95
+ }
96
+ .lit
97
+ {
98
+ color: #044 !important;
99
+ }
100
+ .pun
101
+ {
102
+ color: #440 !important;
103
+ }
104
+ .pln
105
+ {
106
+ color: #000 !important;
107
+ }
108
+ .tag
109
+ {
110
+ color: #006 !important;
111
+ font-weight: bold !important;
112
+ }
113
+ .atn
114
+ {
115
+ color: #404 !important;
116
+ }
117
+ .atv
118
+ {
119
+ color: #060 !important;
120
+ }
121
+ }
@@ -0,0 +1,23 @@
1
+ .show-small-only{display:inherit}
2
+ .show-medium-only{display:none}
3
+ .show-large-only{display:none}
4
+
5
+ .hide-small-only{display:none}
6
+ .hide-medium-only{display:none}
7
+ .hide-large-only{display:none}
8
+
9
+ .hide-for-small-up{
10
+ @include animate-query;
11
+ display:inherit !important;
12
+ }
13
+ .show-for-small-up{
14
+ @include animate-query;
15
+ display:none !important;
16
+ }
17
+
18
+
19
+
20
+ @include respond-to($small-query) {
21
+ .hide-for-small-up{display:none !important}
22
+ .show-for-small-up{display:inherit !important}
23
+ }
@@ -0,0 +1,106 @@
1
+ $top-nav-background: #222 !default;
2
+
3
+ // ==========================================================================
4
+ // Top navigation
5
+ // ==========================================================================
6
+
7
+ // TODO: move global styles out into relevant partials, tidy up!
8
+
9
+ .nav{
10
+
11
+ }
12
+
13
+ .top.nav{
14
+ @include box-sizing(border-box);
15
+ background: $top-nav-background;
16
+ width: 100%;
17
+ height: 45px;
18
+ line-height: 45px;
19
+ margin-bottom: 1.5em;
20
+ overflow: visible;
21
+ position: relative;
22
+ font-size: 0.8125em;
23
+ color: #fff;
24
+
25
+ a {
26
+ color: #fff;
27
+ }
28
+
29
+ .logo-area {
30
+ position: relative;
31
+ height: 45px;
32
+ padding: 0 $column-gutter / 2;
33
+
34
+ .logo {
35
+ margin: 0 auto;
36
+ display: block;
37
+ }
38
+
39
+ .menu-icon {
40
+ position: absolute;
41
+ top: 0;
42
+ right: $column-gutter / 2;
43
+ width: 45px;
44
+ text-align:center;
45
+
46
+ &:hover{
47
+ background: #111;
48
+ }
49
+ }
50
+ }
51
+
52
+ ul.menu{
53
+ margin: 0;
54
+ padding: 0;
55
+ list-style: none;
56
+ display: none;
57
+
58
+ > li {
59
+ display: block;
60
+ border: 0;
61
+ border-bottom: 1px solid #222;
62
+ border-top: 1px solid #555;
63
+ a {
64
+ display: block;
65
+ padding: 0 $column-gutter / 2;
66
+
67
+ &:hover {
68
+ background: lighten($top-nav-background, 7%);
69
+ }
70
+ }
71
+ }
72
+ }
73
+
74
+ &.expanded {
75
+ height: auto;
76
+
77
+ ul.menu{
78
+ display: block;
79
+ background: lighten($top-nav-background, 10%);
80
+ }
81
+ }
82
+
83
+ @include respond-to($small-query){
84
+ ul.menu {
85
+ @include animate-query;
86
+ position: absolute;
87
+ top: 0;
88
+ right: 0;
89
+ display: block;
90
+
91
+ > li {
92
+ display: inline-block;
93
+ border: 0;
94
+ border-left: 1px solid #444;
95
+
96
+ a{
97
+ background: transparent;
98
+
99
+ &:hover {
100
+ background: #111;
101
+ }
102
+ }
103
+ }
104
+ }
105
+ }
106
+ }
@@ -0,0 +1,150 @@
1
+ @import
2
+ "compass/css3";
3
+
4
+ // ==========================================================================
5
+ // Basic typography
6
+ // ==========================================================================
7
+
8
+ html{
9
+ line-height: $line-height
10
+ }
11
+
12
+ h1, h2, h3, h4, h5, h6,
13
+ .h1,.h2,.h3,.h4,.h5,.h6{
14
+ @include animate-query;
15
+ font-family: $header-font-family;
16
+ font-weight: $header-font-weight;
17
+ color: $header-font-color;
18
+ margin-top: $header-margin-top;
19
+ margin-bottom: $header-margin-bottom;
20
+
21
+ // Small text
22
+ & small{
23
+ font-size: 70%;
24
+ color: $sub-heading-font-color;
25
+ }
26
+
27
+ // Light sub-heading text
28
+ &.sub-heading{
29
+ font-weight: 300;
30
+ color: $sub-heading-font-color;
31
+ }
32
+ }
33
+
34
+ h1, .h1{
35
+ font-size: 1.5em;
36
+ @include respond-to($small-query) {
37
+ font-size: emCalc(ms(4));
38
+ line-height: 1.3;
39
+ }
40
+ }
41
+
42
+ h2, .h2{
43
+ font-size: 1.3em;
44
+ @include respond-to($small-query) {
45
+ font-size: emCalc(ms(3));
46
+ line-height: 1.2;
47
+ }
48
+ }
49
+
50
+ h3, .h3{
51
+ font-size: 1.25em;
52
+ @include respond-to($small-query) {
53
+ font-size: emCalc(ms(2));
54
+ }
55
+ }
56
+
57
+ h4, .h4{
58
+ font-size: 1.15em;
59
+ @include respond-to($small-query) {
60
+ font-size: emCalc(ms(1));
61
+ }
62
+ }
63
+
64
+ h5, .h5{
65
+ font-size: emCalc(ms(0));
66
+ }
67
+
68
+ h6, .h6{
69
+ font-size: emCalc(ms(-1));
70
+ }
71
+
72
+ hr{
73
+ border: $hr-border-style $hr-border-color;
74
+ border-width: $hr-border-width 0 0;
75
+ margin: $hr-margin-top 0 $hr-margin-bottom - emCalc(1px);
76
+ height: 0;
77
+ clear: both;
78
+ }
79
+
80
+ p, pre{
81
+ margin-top: $paragraph-margin-top;
82
+ margin-bottom: $paragraph-margin-bottom;
83
+ }
84
+
85
+ code {
86
+ font-family: $code-font-family;
87
+ font-weight: $code-font-weight;
88
+ color: $code-font-color;
89
+ }
90
+
91
+ blockquote {
92
+ font-size: ms(0);
93
+ font-style: italic;
94
+ margin: $blockquote-margin-top 0 $blockquote-margin-bottom;
95
+ border-left: 3px solid $main-color;
96
+ padding: 0.5em emCalc(40px) 0.5em emCalc(37px);
97
+ color: $blockquote-font-color;
98
+ @include clearfix;
99
+
100
+ cite {
101
+ display: block;
102
+ margin-top: 1em;
103
+ font-style: normal;
104
+ @extend small;
105
+ &:before{
106
+ content: '\2014';
107
+ }
108
+ }
109
+ }
110
+
111
+ a{
112
+ color: $link-color;
113
+ text-decoration: none;
114
+ display: inline-block;
115
+ @include transition(color 0.3s ease-in-out);
116
+
117
+ &:hover{
118
+ color: darken($link-color, 5%);
119
+ }
120
+ }
121
+
122
+ // ==========================================================================
123
+ // Syntax highlighting
124
+ // ==========================================================================
125
+
126
+ div.code-example {
127
+ margin-top: 1em;
128
+
129
+ &:before{
130
+ content: attr(data-language);
131
+ text-transform: uppercase;
132
+ float: right;
133
+ margin:0.5em 0.5em 0 0;
134
+ color: #66747b;
135
+ font-size: ms(-1);
136
+ font-family: $paragraph-font-family;
137
+ }
138
+
139
+ pre,
140
+ pre.prettyprint {
141
+ background: #333!important;
142
+ padding:1em;
143
+ @include box-shadow(inset 0 2px 6px rgba(0,0,0,0.75), 0 1px 0 rgba(255,255,255,0.75));
144
+
145
+ code {
146
+ font-size:0.875em;
147
+ font-weight:normal;
148
+ }
149
+ }
150
+ }
@@ -0,0 +1,10 @@
1
+ // ============================================
2
+ // Old IE stylsheet - should import your
3
+ // application.scss and set $old-ie variable
4
+ // BaSass will take care of the rest (although
5
+ // you're free to add further IE only styling)
6
+ // ============================================
7
+
8
+ $old-ie: true;
9
+
10
+ @import "application";
@@ -0,0 +1 @@
1
+ @import "basass";
@@ -0,0 +1,16 @@
1
+ description "BaSass is a Sass framework to use as a base for mobile first responsive design."
2
+
3
+ stylesheet 'application.scss', :media => 'all'
4
+ stylesheet 'application-ie.scss', :media => 'all', :condition => 'lte IE 8'
5
+
6
+ help %Q{
7
+ Please see the BaSass website for documentation on how everything works:
8
+
9
+ http://basass.lee-ellam.com
10
+ }
11
+
12
+ welcome_message %Q{
13
+ Please see the BaSass website for documentation on how everything works:
14
+
15
+ http://basass.lee-ellam.com
16
+ }
metadata ADDED
@@ -0,0 +1,96 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: basass
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ prerelease:
6
+ platform: ruby
7
+ authors:
8
+ - Lee Ellam
9
+ autorequire:
10
+ bindir: bin
11
+ cert_chain: []
12
+ date: 2013-04-11 00:00:00.000000000 Z
13
+ dependencies:
14
+ - !ruby/object:Gem::Dependency
15
+ name: compass
16
+ requirement: !ruby/object:Gem::Requirement
17
+ none: false
18
+ requirements:
19
+ - - ! '>='
20
+ - !ruby/object:Gem::Version
21
+ version: 0.12.2
22
+ type: :runtime
23
+ prerelease: false
24
+ version_requirements: !ruby/object:Gem::Requirement
25
+ none: false
26
+ requirements:
27
+ - - ! '>='
28
+ - !ruby/object:Gem::Version
29
+ version: 0.12.2
30
+ - !ruby/object:Gem::Dependency
31
+ name: sass
32
+ requirement: !ruby/object:Gem::Requirement
33
+ none: false
34
+ requirements:
35
+ - - ! '>='
36
+ - !ruby/object:Gem::Version
37
+ version: 3.2.0
38
+ type: :runtime
39
+ prerelease: false
40
+ version_requirements: !ruby/object:Gem::Requirement
41
+ none: false
42
+ requirements:
43
+ - - ! '>='
44
+ - !ruby/object:Gem::Version
45
+ version: 3.2.0
46
+ description: BaSass is a Sass framework to use as a base for mobile first responsive
47
+ design.
48
+ email:
49
+ - lee@lee-ellam.com
50
+ executables: []
51
+ extensions: []
52
+ extra_rdoc_files: []
53
+ files:
54
+ - basass.gemspec
55
+ - README.md
56
+ - lib/basass.rb
57
+ - stylesheets/_basass.scss
58
+ - stylesheets/_basass-defaults.scss
59
+ - stylesheets/_functions.scss
60
+ - stylesheets/_mixins.scss
61
+ - stylesheets/basass/_grids.scss
62
+ - stylesheets/basass/_icons.scss
63
+ - stylesheets/basass/_lists.scss
64
+ - stylesheets/basass/_normalize.scss
65
+ - stylesheets/basass/_prettyprint.scss
66
+ - stylesheets/basass/_states.scss
67
+ - stylesheets/basass/_top-nav.scss
68
+ - stylesheets/basass/_type.scss
69
+ - templates/project/application.scss
70
+ - templates/project/application-ie.scss
71
+ - templates/project/manifest.rb
72
+ homepage: http://basass.lee-ellam.com
73
+ licenses: []
74
+ post_install_message:
75
+ rdoc_options: []
76
+ require_paths:
77
+ - lib
78
+ required_ruby_version: !ruby/object:Gem::Requirement
79
+ none: false
80
+ requirements:
81
+ - - ! '>='
82
+ - !ruby/object:Gem::Version
83
+ version: '0'
84
+ required_rubygems_version: !ruby/object:Gem::Requirement
85
+ none: false
86
+ requirements:
87
+ - - ! '>='
88
+ - !ruby/object:Gem::Version
89
+ version: 1.3.5
90
+ requirements: []
91
+ rubyforge_project: basass
92
+ rubygems_version: 1.8.23
93
+ signing_key:
94
+ specification_version: 3
95
+ summary: Base framework for mobile first responsive design.
96
+ test_files: []