compass-aura 0.1.0 → 0.1.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.
- data/compass-aura.gemspec +5 -2
- data/{stylesheets → sass}/_aura.scss +0 -0
- data/sass/aura/_functions.scss +122 -0
- data/sass/aura/_mixins.scss +135 -0
- data/sass/aura/_variables.scss +33 -0
- metadata +6 -3
data/compass-aura.gemspec
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Gem::Specification.new do |s|
|
|
4
4
|
s.name = %q{compass-aura}
|
|
5
|
-
s.version = "0.1.
|
|
5
|
+
s.version = "0.1.1"
|
|
6
6
|
|
|
7
7
|
s.required_rubygems_version = Gem::Requirement.new(">= 1.3.5")
|
|
8
8
|
s.authors = ["Sam Richard"]
|
|
@@ -13,7 +13,10 @@ Gem::Specification.new do |s|
|
|
|
13
13
|
s.files = [
|
|
14
14
|
"compass-aura.gemspec",
|
|
15
15
|
"lib/compass-aura.rb",
|
|
16
|
-
"
|
|
16
|
+
"sass/_aura.scss",
|
|
17
|
+
"sass/aura/_functions.scss",
|
|
18
|
+
"sass/aura/_mixins.scss",
|
|
19
|
+
"sass/aura/_variables.scss"
|
|
17
20
|
]
|
|
18
21
|
s.homepage = %q{https://github.com/Snugug/Aura}
|
|
19
22
|
s.require_paths = ["lib"]
|
|
File without changes
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
//////////////////////////////
|
|
2
|
+
// Converting between px and em
|
|
3
|
+
//////////////////////////////
|
|
4
|
+
@function px-em($px) {
|
|
5
|
+
@return $px / $body-font-size-px * 1em;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
@function em-em($em, $base: 14px) {
|
|
9
|
+
@return $em * $base / $body-font-size-px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
@function em-px($em) {
|
|
13
|
+
@return $em / $body-font-size-em * $body-font-size-px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
//////////////////////////////
|
|
17
|
+
// Find Base Font Size from Input Font Size;
|
|
18
|
+
//////////////////////////////
|
|
19
|
+
@function base-font-size() {
|
|
20
|
+
$unit: unit($body-font-size);
|
|
21
|
+
@if $unit == 'px' {
|
|
22
|
+
@return $body-font-size / 16px * 1em;
|
|
23
|
+
}
|
|
24
|
+
@else if $unit == '%' {
|
|
25
|
+
@return $body-font-size / 100% * 1em;
|
|
26
|
+
}
|
|
27
|
+
@else if $unit == 'em' {
|
|
28
|
+
@return $body-font-size;
|
|
29
|
+
}
|
|
30
|
+
@else if $unit == 'pt' {
|
|
31
|
+
@return $body-font-size / 12pt * 1em;
|
|
32
|
+
}
|
|
33
|
+
@else {
|
|
34
|
+
@warn 'Variable $body-font-size does not have a valid font unit';
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
//////////////////////////////
|
|
39
|
+
// Generates Body Font Sizes for each unit
|
|
40
|
+
//////////////////////////////
|
|
41
|
+
@function bfs($unit) {
|
|
42
|
+
@if $unit == 'px' {
|
|
43
|
+
@return $body-font-size-em / 1em * 16px;
|
|
44
|
+
}
|
|
45
|
+
@else if $unit == '%' {
|
|
46
|
+
@return $body-font-size-em / 1em * 100%;
|
|
47
|
+
}
|
|
48
|
+
@else if $unit == 'em' {
|
|
49
|
+
@return $body-font-size-em;
|
|
50
|
+
}
|
|
51
|
+
@else if $unit == 'pt' {
|
|
52
|
+
@return $body-font-size-em / 1em * 12pt;
|
|
53
|
+
}
|
|
54
|
+
@else {
|
|
55
|
+
@warn 'Invalid unit passed in.';
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
//////////////////////////////
|
|
60
|
+
// Find Breakpoints for Non Modular-Scale
|
|
61
|
+
//////////////////////////////
|
|
62
|
+
@function responsive-ratio() {
|
|
63
|
+
$full: columns-width();
|
|
64
|
+
$breakpoints: $full;
|
|
65
|
+
|
|
66
|
+
@for $i from 1 through 3 {
|
|
67
|
+
$bsize: nth($breakpoints, $i) / $responsive-ratio;
|
|
68
|
+
$breakpoints: join($breakpoints, $bsize);
|
|
69
|
+
}
|
|
70
|
+
@return $breakpoints;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
//////////////////////////////
|
|
74
|
+
// Find Breakpoints for Modular Scale
|
|
75
|
+
//////////////////////////////
|
|
76
|
+
@function responsive-scale() {
|
|
77
|
+
@if $modular-scale-loaded == false {
|
|
78
|
+
@warn 'the responsive-scale function requires modular-scale to be loaded. The responsive-ratio value was returned.';
|
|
79
|
+
@return responsive-ratio();
|
|
80
|
+
}
|
|
81
|
+
$full: columns-width();
|
|
82
|
+
$breakpoints: $full;
|
|
83
|
+
$scale-relation: -1 !default;
|
|
84
|
+
@for $i from 1 through 3 {
|
|
85
|
+
$measure: $measure-width;
|
|
86
|
+
$scale-ratio: ms($scale-relation, $body-font-size-em, $responsive-ratio) / 1em;
|
|
87
|
+
$scale-relation: $scale-relation - 1;
|
|
88
|
+
|
|
89
|
+
$col-total: col-total();
|
|
90
|
+
$gutter-col-grid: gutter-col-grid($col-total);
|
|
91
|
+
$col-width: col-width($gutter-col-grid);
|
|
92
|
+
$gutter-width: gutter-width($gutter-col-grid);
|
|
93
|
+
$side-gutter-width: $gutter-width;
|
|
94
|
+
|
|
95
|
+
$breakpoints: join($breakpoints, columns-width() * $scale-ratio);
|
|
96
|
+
|
|
97
|
+
}
|
|
98
|
+
@return $breakpoints;
|
|
99
|
+
}
|
|
100
|
+
//////////////////////////////
|
|
101
|
+
// Aura Grid Functions
|
|
102
|
+
//////////////////////////////
|
|
103
|
+
// Returns Total Column Width
|
|
104
|
+
@function col-total() {
|
|
105
|
+
@return $measure / $main-content-cols * 1em;
|
|
106
|
+
}
|
|
107
|
+
// Returns Total Number of Sub Column Pieces
|
|
108
|
+
@function gutter-col-total() {
|
|
109
|
+
@return nth($gutter-to-col, 1) + nth($gutter-to-col, 2);
|
|
110
|
+
}
|
|
111
|
+
// Returns Width of One Full Column + Gutter
|
|
112
|
+
@function gutter-col-grid($col-total) {
|
|
113
|
+
@return $col-total / $gutter-col-total;
|
|
114
|
+
}
|
|
115
|
+
// Returns Width of One Column
|
|
116
|
+
@function col-width($gutter-col-grid) {
|
|
117
|
+
@return $gutter-col-grid * nth($gutter-to-col, 2);
|
|
118
|
+
}
|
|
119
|
+
// Returns Width of One Gutter
|
|
120
|
+
@function gutter-width($gutter-col-grid) {
|
|
121
|
+
@return $gutter-col-grid * nth($gutter-to-col, 1);
|
|
122
|
+
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
//////////////////////////////
|
|
2
|
+
// Aura Setup Mixin
|
|
3
|
+
//////////////////////////////
|
|
4
|
+
@mixin aura-setup {
|
|
5
|
+
// Hard sets font-scale to false if width is set
|
|
6
|
+
@if $width {
|
|
7
|
+
$font-scale: false;
|
|
8
|
+
}
|
|
9
|
+
// Calculate HTML font size in Em
|
|
10
|
+
$body-font-size-em: base-font-size();
|
|
11
|
+
$body-font-size-px: bfs('px');
|
|
12
|
+
$body-font-size-percent: bfs('%');
|
|
13
|
+
$body-font-size-pt: bfs('pt');
|
|
14
|
+
|
|
15
|
+
// Default Responsive Ratio if none is set
|
|
16
|
+
@if not $responsive-ratio {
|
|
17
|
+
@if $font-scale {
|
|
18
|
+
$responsive-ratio: $major-third;
|
|
19
|
+
}
|
|
20
|
+
@else {
|
|
21
|
+
$responsive-ratio: $golden;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
// Define Initial Grid Dimensions
|
|
26
|
+
@if $font-scale {
|
|
27
|
+
$measure: $measure-width + 1/2 * $alphabet-count;
|
|
28
|
+
}
|
|
29
|
+
@else {
|
|
30
|
+
$measure: $measure-width;
|
|
31
|
+
}
|
|
32
|
+
// Set UP Grid
|
|
33
|
+
// If there's a width, figure out body-font-size for width
|
|
34
|
+
@if $width {
|
|
35
|
+
$width-em: px-em($width);
|
|
36
|
+
$sub-col: $width-em / ($total-cols * gutter-col-total() + nth($gutter-to-col, 1));
|
|
37
|
+
$col-width: $sub-col * nth($gutter-to-col, 2);
|
|
38
|
+
$gutter-width: $sub-col * nth($gutter-to-col, 1);
|
|
39
|
+
$side-gutter-width: $gutter-width;
|
|
40
|
+
}
|
|
41
|
+
@else {
|
|
42
|
+
$col-total: col-total();
|
|
43
|
+
$gutter-col-total: gutter-col-total();
|
|
44
|
+
$gutter-col-grid: gutter-col-grid($col-total);
|
|
45
|
+
$col-width: col-width($gutter-col-grid);
|
|
46
|
+
$gutter-width: gutter-width($gutter-col-grid);
|
|
47
|
+
$side-gutter-width: $gutter-width;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
// Set Root Em
|
|
51
|
+
html {
|
|
52
|
+
// If Font Scale is enabled, set up root font scaling
|
|
53
|
+
@if $font-scale {
|
|
54
|
+
// Set base Root Font to -2 Modular Scale
|
|
55
|
+
@include font-scale(-2);
|
|
56
|
+
|
|
57
|
+
// At Small Responsive Scale, increase Modular Scale by 1
|
|
58
|
+
@include respond-to('small') {
|
|
59
|
+
@include font-scale(-1);
|
|
60
|
+
}
|
|
61
|
+
@include respond-to('medium') {
|
|
62
|
+
@include font-scale(0);
|
|
63
|
+
}
|
|
64
|
+
// At Large Responsive Scale, increase Modular Scale by 2 to base
|
|
65
|
+
@include respond-to('large') {
|
|
66
|
+
@include font-scale(1);
|
|
67
|
+
}
|
|
68
|
+
@include respond-to('full') {
|
|
69
|
+
@include font-scale(2);
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
// If Font Scale is disabled, set root font to base font size
|
|
73
|
+
@else {
|
|
74
|
+
font-size: $body-font-size-em;
|
|
75
|
+
line-height: $body-font-size-em + $lh-addition;
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
// If Object Scaling is enabled, set up object scaling
|
|
79
|
+
@if $obj-scale {
|
|
80
|
+
img, object, embed, iframe, video, audio {
|
|
81
|
+
max-width: 100%;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
// Create Measure class to be extended
|
|
86
|
+
%measure {
|
|
87
|
+
@include full;
|
|
88
|
+
@include respond-to('small') {
|
|
89
|
+
@include columns($main-content-cols);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
%aura-container {
|
|
94
|
+
@include container;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
$modular-scale-loaded: false !default;
|
|
99
|
+
|
|
100
|
+
//////////////////////////////
|
|
101
|
+
// Aura Font Scale Font
|
|
102
|
+
//////////////////////////////
|
|
103
|
+
@mixin font-scale($scale) {
|
|
104
|
+
$ms: ms($scale, $body-font-size-em, $responsive-ratio);
|
|
105
|
+
font-size: $ms;
|
|
106
|
+
line-height: $ms + (1em - (.5 * $ms));
|
|
107
|
+
@if $modular-scale-loaded == false {
|
|
108
|
+
@warn 'the font-scale mixin requires modular-scale to be loaded.';
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
//////////////////////////////
|
|
113
|
+
// Aurora Respond-To
|
|
114
|
+
//////////////////////////////
|
|
115
|
+
@mixin respond-to($context) {
|
|
116
|
+
@if $font-scale and not $breakpoints {
|
|
117
|
+
$breakpoints: responsive-scale();
|
|
118
|
+
}
|
|
119
|
+
@else if not $font-scale and not $breakpoints {
|
|
120
|
+
$breakpoints: responsive-ratio();
|
|
121
|
+
}
|
|
122
|
+
$i: 1 !default;
|
|
123
|
+
@each $size in $sizes {
|
|
124
|
+
@if $context == $size {
|
|
125
|
+
$respond: nth($breakpoints, $i);
|
|
126
|
+
@media screen and (min-width: $respond) {
|
|
127
|
+
@content;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
$i: $i + 1;
|
|
131
|
+
}
|
|
132
|
+
@if $modular-scale-loaded == false {
|
|
133
|
+
@warn 'the font-scale mixin requires modular-scale to be loaded.';
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
//////////////////////////////
|
|
2
|
+
// User-Defined Variables for Aurora
|
|
3
|
+
//////////////////////////////
|
|
4
|
+
// Basic Options.
|
|
5
|
+
$body-font-size: 16px !default;
|
|
6
|
+
$total-cols: 12 !default;
|
|
7
|
+
$main-content-cols: 9 !default;
|
|
8
|
+
$font-scale: true !default;
|
|
9
|
+
$obj-scale: true !default;
|
|
10
|
+
// Advanced Options
|
|
11
|
+
$gutter-to-col: 1, 4 !default;
|
|
12
|
+
$alphabet-count: 26 !default;
|
|
13
|
+
$measure-width: $alphabet-count* $fourth !default;
|
|
14
|
+
$lh-addition: .3em !default;
|
|
15
|
+
$responsive-ratio: false !default;
|
|
16
|
+
// If using font-scale, suggest $major-third ratio. If not, suggest $golden ratio
|
|
17
|
+
// Bad Options
|
|
18
|
+
$width: false !default;
|
|
19
|
+
// Optionally can set width for main grid which will override all other options.
|
|
20
|
+
|
|
21
|
+
//////////////////////////////
|
|
22
|
+
// Internal Variables for Aurora
|
|
23
|
+
//////////////////////////////
|
|
24
|
+
$measure: false !default;
|
|
25
|
+
$gutter-col-total: 5 !default;
|
|
26
|
+
$breakpoints: false !default;
|
|
27
|
+
$body-font-size-em: false !default;
|
|
28
|
+
$body-font-size-px: false !default;
|
|
29
|
+
$body-font-size-percent: false !default;
|
|
30
|
+
$body-font-size-pt: false !default;
|
|
31
|
+
$width-em: false !default;
|
|
32
|
+
$modular-scale-loaded: false !default;
|
|
33
|
+
$sizes: 'full' 'large' 'medium' 'small';
|
metadata
CHANGED
|
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
|
5
5
|
segments:
|
|
6
6
|
- 0
|
|
7
7
|
- 1
|
|
8
|
-
-
|
|
9
|
-
version: 0.1.
|
|
8
|
+
- 1
|
|
9
|
+
version: 0.1.1
|
|
10
10
|
platform: ruby
|
|
11
11
|
authors:
|
|
12
12
|
- Sam Richard
|
|
@@ -42,7 +42,10 @@ extra_rdoc_files: []
|
|
|
42
42
|
files:
|
|
43
43
|
- compass-aura.gemspec
|
|
44
44
|
- lib/compass-aura.rb
|
|
45
|
-
-
|
|
45
|
+
- sass/_aura.scss
|
|
46
|
+
- sass/aura/_functions.scss
|
|
47
|
+
- sass/aura/_mixins.scss
|
|
48
|
+
- sass/aura/_variables.scss
|
|
46
49
|
has_rdoc: true
|
|
47
50
|
homepage: https://github.com/Snugug/Aura
|
|
48
51
|
licenses: []
|