accoutrement 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,28 @@
1
+ # Accoutrement Etc.
2
+
3
+ These are just assorted functions and mixins I use on my projects.
4
+ Maybe some of them will develop in to more legit Things,
5
+ but for now thye are just normal things.
6
+
7
+ If they are documented,
8
+ that's merely an excercise in good code practice,
9
+ and doesn't imply that they are useful.
10
+
11
+ Some of these things are stolen and re-worked from other projects,
12
+ notably [toolkit][] by [snugug][] and [canarymason][]
13
+ who are very smart.
14
+
15
+ [toolkit]: https://github.com/Snugug/toolkit
16
+ [snugug]: https://github.com/Snugug/
17
+ [canarymason]: https://github.com/canarymason/
18
+
19
+ ## License
20
+
21
+ Copyright © Eric Meyer.
22
+
23
+ Original code licensed under MIT/GLPv2
24
+ Open Source projects used within this project retain their original licenses.
25
+
26
+ GPL license: http://www.gnu.org/licenses/gpl.html
27
+
28
+ MIT license: http://www.opensource.org/licenses/mit-license.php
@@ -0,0 +1,3 @@
1
+ require 'compass'
2
+ extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
3
+ Compass::Frameworks.register('accoutrement', :path => extension_path)
@@ -0,0 +1,16 @@
1
+ // ----------------------------------------------------------------------------
2
+ // Helpers
3
+
4
+ @import 'accoutrement/math';
5
+ @import 'accoutrement/sass-lists';
6
+ @import 'accoutrement/rhythm';
7
+ @import 'accoutrement/color';
8
+ @import 'accoutrement/background';
9
+ @import 'accoutrement/pseudo-elements';
10
+ @import 'accoutrement/media';
11
+ @import 'accoutrement/type';
12
+
13
+ // ----------------------------------------------------------------------------
14
+ // Patterns
15
+
16
+ @import 'accoutrement/tabs';
@@ -0,0 +1,116 @@
1
+ // ----------------------------------------------------------------------------
2
+ // Imports
3
+
4
+ @import 'sass-lists';
5
+ @import 'color';
6
+
7
+ // ----------------------------------------------------------------------------
8
+ // Temporary gradient fixes
9
+
10
+ // Return the convert angle or position for a css gradient using either syntax
11
+ //
12
+ // convert-gradient-angle($deg)
13
+ // - $deg : The angle or position to convert.
14
+ // - Whichever syntax you pass, the other will be returned.
15
+ @function convert-gradient-angle(
16
+ $deg
17
+ ) {
18
+ @if type-of($deg) == 'number' {
19
+ @return mod(abs($deg - 450), 360deg);
20
+ } @else {
21
+ $direction: compact();
22
+ @if nth($deg,1) == 'to' {
23
+ @if length($deg) < 2 {
24
+ $direction: top;
25
+ @warn "no direction given for 'to'. Using 'to bottom' as default.";
26
+ } @else { $direction: opposite-position(nth($deg,2)); }
27
+ @if length($deg) > 2 { $direction: append($direction, opposite-position(nth($deg,3)), space);}
28
+ } @else {
29
+ $direction: append($direction, to, space);
30
+ @each $pos in $deg { $direction: append($direction, opposite-position($pos), space); }
31
+ }
32
+ @return $direction;
33
+ }
34
+ }
35
+
36
+ // Return a linear gradient converted between the old and new syntax
37
+ //
38
+ // convert-linear($angle, $details...)
39
+ // - $angle : The angle or position to be converted.
40
+ // - $details... : Color-stops and other details that don't require conversion.
41
+ @function convert-gradient(
42
+ $angle,
43
+ $details...
44
+ ) {
45
+ @return linear-gradient(convert-gradient-angle($angle), $details...);
46
+ }
47
+
48
+ // Create a single gradient background image.
49
+ // Layered backgrounds require a bit more finess than mixins provide.
50
+ //
51
+ // @include gradient-background-image($gradient...)
52
+ // - $gradient: A list of gradient features (position/angle, color-stops, etc.)
53
+ @mixin gradient-background-image(
54
+ $gradient...
55
+ ) {
56
+ @include background-image(convert-gradient($gradient...));
57
+ background-image: linear-gradient($gradient...);
58
+ }
59
+
60
+ // ----------------------------------------------------------------------------
61
+ // Stripes
62
+
63
+ // Returns a striped gradient for use anywhere gradients are accepted.
64
+ //
65
+ // stripes($position, $colors)
66
+ // - $position: the starting position or angle of the gradient.
67
+ // - $colors: a list of all the colors to be used.
68
+ @function stripes(
69
+ $position,
70
+ $colors
71
+ ) {
72
+ $colors: if(type-of($colors) != 'list', compact($colors), $colors);
73
+ $gradient: compact();
74
+ $width: 100% / length($colors);
75
+
76
+ @for $i from 1 through length($colors) {
77
+ $pop: nth($colors,$i);
78
+ $new: $pop ($width * ($i - 1)), $pop ($width * $i);
79
+ $gradient: join($gradient, $new, comma);
80
+ }
81
+
82
+ @return linear-gradient($position, $gradient);
83
+ }
84
+
85
+ // ----------------------------------------------------------------------------
86
+ // Color Palettes
87
+
88
+ // Returns a full list of tinted and shaded variations on a color.
89
+ //
90
+ // get-palette($color [, $tints, $shades])
91
+ // - $color : The color that your palette stack will be based around.
92
+ // - $tints : Optional list of percentage tint amounts.
93
+ // - $shades : Optional list of percentage shade amounts.
94
+ @function get-palette(
95
+ $color,
96
+ $tints: $default-tints,
97
+ $shades: $default-shades
98
+ ) {
99
+ $tint-stack: tint-stack($color, $tints);
100
+ $shade-stack: shade-stack($color, $shades);
101
+ @return remove-duplicates(join(reverse($tint-stack), $shade-stack));
102
+ }
103
+
104
+ // Creates a background gradient color palette based on a given color
105
+ //
106
+ // palette($color [, $tints, $shades])
107
+ // - $color : The color that your palette gradient will be based around.
108
+ // - $tints : Optional list of percentage tint amounts.
109
+ // - $shades : Optional list of percentage shade amounts.
110
+ @function palette(
111
+ $color,
112
+ $tints: $default-tints,
113
+ $shades: $default-shades
114
+ ) {
115
+ @return stripes(left,get-palette($color, $tints, $shades));
116
+ }
@@ -0,0 +1,129 @@
1
+ // ----------------------------------------------------------------------------
2
+ // Color Stacks
3
+
4
+ // Set the default mixing intervals for use in color stacks
5
+ $default-amounts : 20% 40% 60% 70% 80%;
6
+ $default-tints : $default-amounts;
7
+ $default-shades : $default-amounts;
8
+
9
+ // Returns a list of mixed colors at given intervals
10
+ // based on two initial source colors.
11
+ //
12
+ // color-stack($main, $second [, $amounts])
13
+ // - $main : The main color this stack is based on.
14
+ // - $second : The color to be mixed in at varrying amounts.
15
+ // - $amounts : Optional list of percentage mix intervals;
16
+ @function color-stack(
17
+ $main,
18
+ $second,
19
+ $amounts: $default-amounts
20
+ ) {
21
+ $stack: $main;
22
+
23
+ @each $amount in $amounts {
24
+ $stack: join($stack, mix($second, $main, $amount));
25
+ }
26
+
27
+ @return $stack;
28
+ }
29
+
30
+ // Shortcut for returning tint stacks based on a given color.
31
+ //
32
+ // tint-stack($color [, $amounts])
33
+ // - $color : The color to tint.
34
+ // - $amounts : Optional list of percentage tint amounts.
35
+ @function tint-stack(
36
+ $color,
37
+ $amounts: $default-tints
38
+ ) {
39
+ @return color-stack($color, #fff, $amounts);
40
+ }
41
+
42
+ // Shortcut for returning shade stacks based on a given color.
43
+ //
44
+ // shade-stack($color [, $amounts])
45
+ // - $color : The color to shade.
46
+ // - $amounts... : Optional list of percentage shade amounts.
47
+ @function shade-stack(
48
+ $color,
49
+ $amounts: $default-shades
50
+ ) {
51
+ @return color-stack($color, #000, $amounts);
52
+ }
53
+
54
+ // ---------------------------------------------------------------------------
55
+ // Managing Colors
56
+
57
+ // Returns a given tint or shade of a color,
58
+ // with options for changing saturation and alpha channels as well.
59
+ //
60
+ // color($color [, $alpha, $tints, $shades])
61
+ // - $color : The color to work from (See "Parsing Colors" detail below)
62
+ // - $tints : Optional list of percentage tint amounts.
63
+ // - $shades : Optional list of percentage shade amounts.
64
+ //
65
+ // Parsing Colors: $color == $saturation $color $tint-shade
66
+ // - Any color value will be used as the base color.
67
+ // - Any percentage preceeding the color will scale saturation.
68
+ // - Any intiger, percentage, or keyword will change tint/shade:
69
+ // - Intigers step through your list of tint/shade amounts.
70
+ // - Percentages are used directly as tint/shade amounts.
71
+ // - Positive numbers tint, negative numbers scale.
72
+ // - Keywords light/lighter/lightest & dark/darker/darkest
73
+ // use the first, middle, and last amounts in a stack.
74
+ @function color(
75
+ $color,
76
+ $alpha: 1,
77
+ $tints: $default-tints,
78
+ $shades: $default-shades
79
+ ) {
80
+ $saturation: false;
81
+ $light: false;
82
+ $base: false;
83
+ $index: 0;
84
+
85
+ @each $arg in $color {
86
+ @if type-of($arg) == 'color' { $base: $arg; }
87
+ @if type-of($arg) == 'number' {
88
+ @if unit($arg) != '' {
89
+ @if $base { $light: $arg; }
90
+ @else{ $saturation: $arg; }
91
+ }
92
+ @else { $index: $arg; }
93
+ }
94
+ @if type-of($arg) == 'string' {
95
+ $tint-length : length($tints);
96
+ $tint-half : floor($tint-length/2);
97
+ $shade-length : length($shades);
98
+ $shade-half : floor($shade-length/2);
99
+ @if $arg == 'light' { $index: 1; }
100
+ @if $arg == 'lighter' { $index: if($tint-half < 2, 2, $tint-half); }
101
+ @if $arg == 'lightest' { $index: $tint-length; }
102
+ @if $arg == 'dark' { $index: -1; }
103
+ @if $arg == 'darker' { $index: if($shade-half < 2, -2, - $shade-half); }
104
+ @if $arg == 'darkest' { $index: - $shade-length; }
105
+ }
106
+ }
107
+
108
+ @if $light and $light != 0 {
109
+ @if $light > 0 { $base: tint($base,$light); }
110
+ @else { $base: shade($base,abs($light)); }
111
+ } @else if $index and $index != 0 {
112
+ $color-stack: compact();
113
+ @if $index > 0 {
114
+ $index: $index + 1;
115
+ $color-stack: tint-stack($base, $tints);
116
+ } @else {
117
+ $index: abs($index) + 1;
118
+ $color-stack: shade-stack($base, $shades);
119
+ }
120
+ @if $index <= length($color-stack) {
121
+ $base: nth($color-stack,$index);
122
+ } @else {
123
+ @warn "You don't have #{$index - 1} colors in this stack";
124
+ }
125
+ }
126
+
127
+ @if $saturation { $base: scale-color($base, $saturation: $saturation); }
128
+ @return rgba($base, $alpha);
129
+ }
@@ -0,0 +1,14 @@
1
+ // ----------------------------------------------------------------------------
2
+ // Math Functions
3
+
4
+ // Return the modulo of two numbers.
5
+ //
6
+ // mod($dividend, $divisor)
7
+ // - $dividend : the sample size.
8
+ // - $divisor : the full count.
9
+ @function mod(
10
+ $dividend,
11
+ $divisor
12
+ ) {
13
+ @return $dividend - (floor($dividend/$divisor)*$divisor);
14
+ }
@@ -0,0 +1,72 @@
1
+ // ----------------------------------------------------------------------------
2
+ // Fluid Media
3
+
4
+ // Default property-value pair for setting fluid width.
5
+ $default-fluid-width : max-width 100%;
6
+
7
+ // Default list of elements for the fluid-media mixin.
8
+ $default-fluid-elements : 'img, video' !default;
9
+
10
+ // Create fluid images and video
11
+ //
12
+ // @include fluid-media([$width, $elements])
13
+ // - $width : Property-value pair for setting fluid width.
14
+ // - $elements : List of elements for the fluid-media mixin.
15
+ @mixin fluid-media(
16
+ $width : $default-fluid-width,
17
+ $elements : $default-fluid-elements
18
+ ) {
19
+ $property : max-width;
20
+ $value : 100%;
21
+
22
+ @each $arg in $width {
23
+ @if type-of($arg) == 'string' { $property: $arg; }
24
+ @if type-of($arg) == 'number' { $value: $arg; }
25
+ }
26
+
27
+ #{$elements} {
28
+ #{$property}: $value;
29
+ height: auto;
30
+ }
31
+ }
32
+
33
+ // ----------------------------------------------------------------------------
34
+ // Fluid Ratios
35
+
36
+ // The default fluid ratio.
37
+ $default-fluid-ratio : 16/9 !default;
38
+
39
+ // The default fluid ratio width.
40
+ $default-fluid-ratio-width : 100% !default;
41
+
42
+ // Child elements to keep within the ratio.
43
+ $default-fluid-ratio-children : '*' !default;
44
+
45
+ // Force an element and its children to hold a fluid ratio
46
+ //
47
+ // @include fluid-ratio([$ratio, $width, $children])
48
+ // - $ratio : Ratio e.g. 16/9
49
+ // - $width : Fluid width
50
+ // - $children : Child elements to keep within the ratio
51
+ @mixin fluid-ratio(
52
+ $ratio : $default-fluid-ratio,
53
+ $width : $default-fluid-ratio-width,
54
+ $children : $default-fluid-ratio-children
55
+ ) {
56
+ position: relative;
57
+ height: 0;
58
+ padding-top: (1 / $ratio) * $width;
59
+ width: $width;
60
+
61
+ @if $children {
62
+ > #{$children} {
63
+ display: block;
64
+ position: absolute;
65
+ width: 100%;
66
+ height: 100%;
67
+ top: 0;
68
+ margin: 0;
69
+ padding: 0;
70
+ }
71
+ }
72
+ }
@@ -0,0 +1,34 @@
1
+ // ----------------------------------------------------------------------------
2
+ // Pseudo Elements
3
+
4
+ // Add content before an element.
5
+ //
6
+ // @include before($content)
7
+ // $content: The string to add before.
8
+ @mixin before($content) {
9
+ &:before {
10
+ content: $content;
11
+ @content;
12
+ }
13
+ }
14
+
15
+ // Add content after an element.
16
+ //
17
+ // @include after($content)
18
+ // $content: The string to add after.
19
+ @mixin after($content) {
20
+ &:after {
21
+ content: $content;
22
+ @content;
23
+ }
24
+ }
25
+
26
+ // Wrap content before and after an element.
27
+ //
28
+ // @include wrap($content)
29
+ // $content: The strings to add before and after.
30
+ @mixin wrap-content($content: "“" "”") {
31
+ $content: if(length($content) < 2, $content $content, $content);
32
+ @include before(nth($content,1)) { @content; };
33
+ @include after(nth($content,2)) { @content; };
34
+ }
@@ -0,0 +1,28 @@
1
+ // ---------------------------------------------------------------------------
2
+ // Pixels and Rhythms
3
+
4
+ // Returns the nearest half-rhythm value for a given pixel length
5
+ //
6
+ // px-to-rhythm($px [, $from, $round])
7
+ // - $px : The pixel value to convert.
8
+ // - $from : Optional context font-size.
9
+ // - $round : Optional direction ["up" | "down"] to round the results.
10
+ @function px-to-rhythm(
11
+ $px,
12
+ $from: $base-font-size,
13
+ $round: up
14
+ ) {
15
+ $rough: 2 * $px / $base-line-height;
16
+ $lines: if($round == down, floor($rough) / 2, ceil($rough) / 2);
17
+ @return rhythm($lines, $from);
18
+ }
19
+
20
+ // Returns the nearest half-rhythm value based on an images height
21
+ //
22
+ // rhythm-image($image [, $from, $round])
23
+ // - $image : The image whos height we will use.
24
+ // - $from : Optional context font-size.
25
+ // - $round : Optional direction ["up" | "down"] to round the results.
26
+ @function rhythm-image($image, $from: $base-font-size, $round: up) {
27
+ @return px-to-rhythm(image-height($image), $from, $round);
28
+ }
@@ -0,0 +1,40 @@
1
+ // ----------------------------------------------------------------------------
2
+ // Sass List Controls
3
+
4
+ // Return a list with items in reverse order.
5
+ //
6
+ // reverse($list)
7
+ // - $list: The list to reverse.
8
+ @function reverse($list) {
9
+ $l: length($list);
10
+ $reverse: compact();
11
+ @for $i from 0 to $l { $reverse: append($reverse,nth($list,$l - $i)); }
12
+ @return $reverse;
13
+ }
14
+
15
+ // Return a list with all duplicates removed
16
+ //
17
+ // remove-duplicates($list)
18
+ // - $list: The list to clean up.
19
+ @function remove-duplicates($list) {
20
+ $clean: compact();
21
+ @each $item in $list {
22
+ @if not index($clean, $item) { $clean: append($clean, $item) }
23
+ }
24
+ @return $clean;
25
+ }
26
+
27
+ // Return a list with specific items removed
28
+ //
29
+ // remove-duplicates($list, $target)
30
+ // - $list : The list to filter.
31
+ // - $target : An item to be removed from the list.
32
+ @function filter($list, $target) {
33
+ $clean: compact();
34
+ @if index($list, $target) {
35
+ @each $item in $list {
36
+ $clean: if($item == $target, $clean, append($clean, $item));
37
+ }
38
+ } @else { $clean: $list; }
39
+ @return $clean;
40
+ }
@@ -0,0 +1,152 @@
1
+ // ---------------------------------------------------------------------------
2
+ // CSS Tabs and Accordion
3
+
4
+ // Create tabs with pure css & html.
5
+ //
6
+ // # Markup (within a shared container):
7
+ // 1. radio or checkbox inputs : [id*="SLUG"]
8
+ // 2. labels for those inpults : [for*="SLUG"]
9
+ // 3. content for each tab : [class*="SLUG"];
10
+ //
11
+ // - The labels and content can be nested,
12
+ // as long as you pass that nesting information along to the `tabs` mixin.
13
+ // You can also change the default setting with `$default-nested-selectors`.
14
+ // - You can also change the selector attributes with the
15
+ // `$toggle-attribute`, `$title-attribute`, & `$content-attribute` settings.
16
+ // - By default, we use the ':checked' attribute to know what tabs are active.
17
+ // You can change that `$default-checked-selector` setting,
18
+ // or the `$checked` argument in the `tabs` mixin.
19
+ //
20
+ // # Styles
21
+ // 1. hidden content : %hide-tab-content { ... };
22
+ // 2. visible content : %show-tab-content { ... };
23
+ // 3. active tab title : %active-tab-title { ... };
24
+ //
25
+ // There are some very basic default styles that you can use to get started.
26
+ // Simply `@include tab-defaults` and see it in action.
27
+ //
28
+ // # Tabs Example:
29
+ //
30
+ // section.mytabs
31
+ // input[type="radio"]#first-tab-toggle
32
+ // input[type="radio"]#second-tab-toggle
33
+ // input[type="radio"]#third-tab-toggle
34
+ //
35
+ // label[for="first-tab-toggle"]
36
+ // "First Tab"
37
+ // label[for="second-tab-toggle"]
38
+ // "Second Tab"
39
+ // label[for="third-tab-toggle"]
40
+ // "Third Tab"
41
+ //
42
+ // article.first
43
+ // "Content for the first tab"
44
+ // article.second
45
+ // "Content for the first tab"
46
+ // article.third
47
+ // "Content for the first tab"
48
+ //
49
+ // @include tab-defaults;
50
+ // @include tabs(first second third);
51
+ //
52
+ // # Accordion Example
53
+ //
54
+ // section.accordion
55
+ // input[type="checkbox"]#first-toggle
56
+ // input[type="checkbox"]#second-toggle
57
+ // input[type="checkbox"]#third-toggle
58
+ //
59
+ // article
60
+ // label[for="first-toggle"]
61
+ // "First Section"
62
+ // div.first
63
+ // "Content for the first section"
64
+ //
65
+ // article
66
+ // label[for="second-toggle"]
67
+ // "Second Section"
68
+ // div.second
69
+ // "Content for the first section"
70
+ //
71
+ // article
72
+ // label[for="third-toggle"]
73
+ // "Third Section"
74
+ // div.third
75
+ // "Content for the first section"
76
+ //
77
+ // @include tab-defaults;
78
+ // @include tabs(first second third, article);
79
+
80
+ // ---------------------------------------------------------------------------
81
+ // Settings
82
+
83
+ // We don't need the radio-inputs to display.
84
+ %hide-tab-toggle { display: none; }
85
+
86
+ // The CSS3 `:checked` selector is not supported by IE7 and IE8.
87
+ // For legacy support, use `[aria-checked="true"]` applied with JavaScrip.
88
+ $default-checked-selector : ':checked' !default;
89
+ $default-nested-selectors : null !default;
90
+
91
+ // Change the attributes used for each selector.
92
+ // These attributes need to be different,
93
+ // since everything else is the same in the selectors.
94
+ $toggle-attribute : id !default;
95
+ $title-attribute : for !default;
96
+ $content-attribute : class !default;
97
+
98
+ // ---------------------------------------------------------------------------
99
+ // Mixins
100
+
101
+ // Default styles for the content and the tab titles
102
+ //
103
+ // @include tab-defaults
104
+ // - %hide-tab-content: Applied to hidden tabs.
105
+ // - %show-tab-content: Applied to visible tabs.
106
+ // - %active-tab-title: Applied to the tab-title for the active tab.
107
+ @mixin tab-defaults {
108
+ %hide-tab-content { display: none; }
109
+ %show-tab-content { display: block; }
110
+ %active-tab-title { font-weight: bold; }
111
+ }
112
+
113
+ // Create tabs for the given slugs
114
+ //
115
+ // @include make-tabs($slugs [, $nested, $checked])
116
+ // - $slugs : The slugs to use in tab selectors.
117
+ // - $nested : If the tabs or content are nested, add those selectors as well.
118
+ // - One selector will be used for both
119
+ // - Two selectors will be split: first tabs, then content
120
+ // - Use `null` to unset one e.g. '.tab-selector null'
121
+ // - $checked : How we know when a toggle is checked e.g. ':checked'.
122
+ @mixin tabs(
123
+ $slugs,
124
+ $nested: $default-nested-selectors,
125
+ $checked: $default-checked-selector
126
+ ) {
127
+ $nested-tabs: $nested;
128
+ $nested-content: $nested;
129
+ @if length($nested) > 1 {
130
+ $nested-tabs: nth($nested, 1);
131
+ $nested-content: nth($nested, 2);
132
+ }
133
+
134
+ @each $slug in $slugs {
135
+ $toggle : '[#{$toggle-attribute}*="#{$slug}"]';
136
+ $title : '[#{$title-attribute}*="#{$slug}"]';
137
+ $content : '[#{$content-attribute}*="#{$slug}"]';
138
+
139
+ #{$content} { @extend %hide-tab-content; }
140
+ #{$toggle} {
141
+ @extend %hide-tab-toggle;
142
+ &#{$checked} {
143
+ & ~ #{$nested-tabs} #{$title} {
144
+ @extend %active-tab-title !optional;
145
+ }
146
+ & ~ #{$nested-content} #{$content} {
147
+ @extend %show-tab-content;
148
+ }
149
+ }
150
+ }
151
+ }
152
+ }
@@ -0,0 +1,41 @@
1
+ // ----------------------------------------------------------------------------
2
+ // Typography
3
+
4
+ // @private base settings
5
+ $base-font-size : 16px !default;
6
+
7
+ // The default padding on a dropcap letter
8
+ $default-dropcap-padding : null;
9
+
10
+ // The default font settings (null == inherit)
11
+ $default-dropcap-font-family : null;
12
+ $default-dropcap-font-weight : null;
13
+ $default-dropcap-font-style : null;
14
+ $default-dropcap-font-variant : null;
15
+ $default-dropcap-text-transform : null;
16
+
17
+ // Creates a dropcap using the :first-letter selector
18
+ //
19
+ // dropcap([$size, $lines, $padding, $from-size]) { @content }
20
+ // - $size : Optional font-size of your dropcap.
21
+ // - $lines : Optional lines of rhythm for the dropcap line-height.
22
+ // - $padding : Optional padding around the dropcap.
23
+ // - $from-size : Optional context font size, if using relative sizing.
24
+ // - $font-family : Optional font-stack for the dropcap.
25
+ // - @content : Optionally override the default dropcap styles as needed.
26
+ @mixin dropcap(
27
+ $size : $base-font-size*2,
28
+ $lines : lines-for-font-size($size),
29
+ $padding : $default-dropcap-padding,
30
+ $from-size : $base-font-size,
31
+ $font-family : $default-dropcap-font-family
32
+ ) {
33
+ &:first-letter {
34
+ @include adjust-font-size-to($size,$lines,$from-size);
35
+ font-family: $font-family;
36
+ float: left;
37
+ padding: $padding;
38
+
39
+ @content;
40
+ }
41
+ }
metadata ADDED
@@ -0,0 +1,91 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: accoutrement
3
+ version: !ruby/object:Gem::Version
4
+ hash: 29
5
+ prerelease:
6
+ segments:
7
+ - 0
8
+ - 0
9
+ - 1
10
+ version: 0.0.1
11
+ platform: ruby
12
+ authors:
13
+ - Eric Meyer
14
+ autorequire:
15
+ bindir: bin
16
+ cert_chain: []
17
+
18
+ date: 2012-11-30 00:00:00 Z
19
+ dependencies:
20
+ - !ruby/object:Gem::Dependency
21
+ name: compass
22
+ prerelease: false
23
+ requirement: &id001 !ruby/object:Gem::Requirement
24
+ none: false
25
+ requirements:
26
+ - - ">="
27
+ - !ruby/object:Gem::Version
28
+ hash: 43
29
+ segments:
30
+ - 0
31
+ - 12
32
+ - 2
33
+ version: 0.12.2
34
+ type: :runtime
35
+ version_requirements: *id001
36
+ description: Assorted Sass/Compass accoutrement & accessories
37
+ email: eric@oddbird.net
38
+ executables: []
39
+
40
+ extensions: []
41
+
42
+ extra_rdoc_files: []
43
+
44
+ files:
45
+ - README.md
46
+ - lib/accoutrement.rb
47
+ - stylesheets/_accoutrement.scss
48
+ - stylesheets/accoutrement/_background.scss
49
+ - stylesheets/accoutrement/_color.scss
50
+ - stylesheets/accoutrement/_math.scss
51
+ - stylesheets/accoutrement/_media.scss
52
+ - stylesheets/accoutrement/_pseudo-elements.scss
53
+ - stylesheets/accoutrement/_rhythm.scss
54
+ - stylesheets/accoutrement/_sass-lists.scss
55
+ - stylesheets/accoutrement/_tabs.scss
56
+ - stylesheets/accoutrement/_type.scss
57
+ homepage: http://oddbird.net/
58
+ licenses: []
59
+
60
+ post_install_message:
61
+ rdoc_options: []
62
+
63
+ require_paths:
64
+ - lib
65
+ required_ruby_version: !ruby/object:Gem::Requirement
66
+ none: false
67
+ requirements:
68
+ - - ">="
69
+ - !ruby/object:Gem::Version
70
+ hash: 3
71
+ segments:
72
+ - 0
73
+ version: "0"
74
+ required_rubygems_version: !ruby/object:Gem::Requirement
75
+ none: false
76
+ requirements:
77
+ - - ">="
78
+ - !ruby/object:Gem::Version
79
+ hash: 3
80
+ segments:
81
+ - 0
82
+ version: "0"
83
+ requirements: []
84
+
85
+ rubyforge_project:
86
+ rubygems_version: 1.8.24
87
+ signing_key:
88
+ specification_version: 3
89
+ summary: Assorted Sass/Compass accoutrement & accessories
90
+ test_files: []
91
+