basass 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.
@@ -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: []