kayessess 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +7 -0
- data/app/assets/javascripts/kayessess.js.coffee +1 -0
- data/app/assets/javascripts/kss.coffee +60 -0
- data/app/assets/stylesheets/_constants.scss +38 -0
- data/app/assets/stylesheets/kayessess.css.scss +34 -0
- data/app/assets/stylesheets/layout/_footer.scss +3 -0
- data/app/assets/stylesheets/layout/_header.scss +6 -0
- data/app/assets/stylesheets/layout/_main.scss +4 -0
- data/app/assets/stylesheets/layout/_masthead.scss +8 -0
- data/app/assets/stylesheets/layout/_navigation.scss +11 -0
- data/app/assets/stylesheets/lib/_base.scss +25 -0
- data/app/assets/stylesheets/lib/_functions.scss +27 -0
- data/app/assets/stylesheets/lib/_mixins.scss +64 -0
- data/app/assets/stylesheets/lib/_reset.scss +207 -0
- data/app/assets/stylesheets/lib/_spacing.scss +17 -0
- data/app/assets/stylesheets/lib/_syntax.scss +73 -0
- data/app/assets/stylesheets/modules/_examples.scss +38 -0
- data/app/assets/stylesheets/modules/_section.scss +108 -0
- data/app/controllers/kayessess/application_controller.rb +21 -0
- data/app/controllers/kayessess/sections_controller.rb +32 -0
- data/app/helpers/kayessess/styleguide_helper.rb +40 -0
- data/app/views/kayessess/common/_section_example.html.erb +17 -0
- data/app/views/kayessess/sections/_node.html.erb +11 -0
- data/app/views/kayessess/sections/_section.html.erb +30 -0
- data/app/views/kayessess/sections/example.html.erb +1 -0
- data/app/views/kayessess/sections/index.html.erb +8 -0
- data/app/views/kayessess/sections/show.html.erb +1 -0
- data/app/views/kayessess/styleguides/show.html.erb +3 -0
- data/app/views/layouts/kayessess/application.html.erb +23 -0
- data/app/views/layouts/kayessess/example.html.erb +14 -0
- data/config/routes.rb +7 -0
- data/lib/kayessess.rb +26 -0
- data/lib/kayessess/engine.rb +5 -0
- data/lib/kayessess/node.rb +52 -0
- data/lib/kayessess/section.rb +47 -0
- data/lib/kayessess/section_example.rb +36 -0
- data/lib/kayessess/styleguide.rb +32 -0
- data/lib/kayessess/tree.rb +88 -0
- data/lib/kayessess/version.rb +4 -0
- data/spec/internal/app/assets/stylesheets/_buttons.scss +42 -0
- data/spec/internal/app/assets/stylesheets/_media.scss +47 -0
- data/spec/internal/app/assets/stylesheets/application.css.scss +4 -0
- data/spec/internal/config/database.yml +3 -0
- data/spec/internal/config/routes.rb +3 -0
- data/spec/internal/db/schema.rb +3 -0
- data/spec/internal/log/test.log +4783 -0
- data/spec/internal/public/favicon.ico +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_button.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_clearfix.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_font-family.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_hide-text.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_html5-input-types.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_position.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_prefixer.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_retina-image.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_size.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_timing-functions.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/12e26da9dc8e29bde6b3bdb4173aa411e3614e29/_triangle.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/2049046df5e7b3a94767f06ad9d0d0796114b6dd/_new-breakpoint.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/2049046df5e7b3a94767f06ad9d0d0796114b6dd/_private.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/2049046df5e7b3a94767f06ad9d0d0796114b6dd/_px-to-em.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_compact.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_flex-grid.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_grid-width.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_linear-gradient.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_modular-scale.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_px-to-em.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_radial-gradient.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_tint-shade.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/44d6d1a16e832c1fcf2a0d1a6167325825c3eb0d/_transition-property-name.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/4dfc8659f6b1555d2eca193102c23305a928b168/_bourbon-deprecated-upcoming.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/4dfc8659f6b1555d2eca193102c23305a928b168/_bourbon.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/5a6e588d52ee67e6c609e7701c027b0390d36093/_base.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/5a6e588d52ee67e6c609e7701c027b0390d36093/_functions.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/5a6e588d52ee67e6c609e7701c027b0390d36093/_mixins.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/5a6e588d52ee67e6c609e7701c027b0390d36093/_reset.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/5a6e588d52ee67e6c609e7701c027b0390d36093/_spacing.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_animation.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_appearance.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_backface-visibility.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_background-image.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_background.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_border-image.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_border-radius.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_box-sizing.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_columns.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_flex-box.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_font-face.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_hidpi-media-query.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_image-rendering.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_inline-block.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_keyframes.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_linear-gradient.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_perspective.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_placeholder.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_radial-gradient.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_transform.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_transition.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/6c489dba74c0c65c297abb80b17831eede932610/_user-select.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/751df40b886f0883d824c8a32ad7e1b78a63ef31/_neat-helpers.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/751df40b886f0883d824c8a32ad7e1b78a63ef31/_neat.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_fill-parent.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_grid.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_media.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_omega.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_outer-container.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_pad.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_private.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_reset.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_row.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_shift.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_span-columns.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_to-deprecate.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/9833bdec3b1a6019a06dfc84df9a7abf85e8c6a5/_visual-grid.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/a28048e3433aec44160545a405511793e0520b02/_grid.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/a28048e3433aec44160545a405511793e0520b02/_visual-grid.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/a41979aab5bf44efb1e4880ffea764e10d77f1fa/_buttons.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/a41979aab5bf44efb1e4880ffea764e10d77f1fa/_media.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/a41979aab5bf44efb1e4880ffea764e10d77f1fa/application.css.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/abed7ee14e15589abcbd11bec0e030a0de712857/_deprecated-webkit-gradient.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/abed7ee14e15589abcbd11bec0e030a0de712857/_gradient-positions-parser.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/abed7ee14e15589abcbd11bec0e030a0de712857/_linear-positions-parser.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/abed7ee14e15589abcbd11bec0e030a0de712857/_radial-arg-parser.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/abed7ee14e15589abcbd11bec0e030a0de712857/_radial-positions-parser.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/abed7ee14e15589abcbd11bec0e030a0de712857/_render-gradients.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/abed7ee14e15589abcbd11bec0e030a0de712857/_shape-size-stripper.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/edf5faa858343614be55813ea5a7f1135eb25f5a/_constants.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sass/edf5faa858343614be55813ea5a7f1135eb25f5a/styleguide.css.scssc +0 -0
- data/spec/internal/tmp/cache/assets/test/sprockets/0c29d0fb2c8b827e458f500e8ae74379 +0 -0
- data/spec/internal/tmp/cache/assets/test/sprockets/34033ab56926764fc4b0479691b702cb +0 -0
- data/spec/internal/tmp/cache/assets/test/sprockets/7cd1aef370557f982ef64885342d2534 +0 -0
- data/spec/internal/tmp/cache/assets/test/sprockets/8ab512c9b33ac90e699b73469d71f061 +0 -0
- data/spec/internal/tmp/cache/assets/test/sprockets/bcca522c6302f184f12fe0e8a7d7e71a +0 -0
- data/spec/internal/tmp/cache/assets/test/sprockets/c13fc73ceafa45876a901b3e775b83ae +0 -0
- data/spec/lib/node_spec.rb +101 -0
- data/spec/lib/section_spec.rb +47 -0
- data/spec/lib/styleguide_spec.rb +19 -0
- data/spec/lib/tree_spec.rb +60 -0
- data/spec/spec_helper.rb +20 -0
- data/spec/use_coveralls.rb +2 -0
- data/spec/use_simplecov.rb +15 -0
- metadata +567 -0
data/README.md
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
# Kayessess [![Build Status](https://travis-ci.org/aerobicio/kayessess.png)](https://travis-ci.org/aerobicio/kayessess) [![Code Climate](https://codeclimate.com/github/aerobicio/kayessess.png)](https://codeclimate.com/github/aerobicio/kayessess) [![Coverage Status](https://coveralls.io/repos/aerobicio/kayessess/badge.png)](https://coveralls.io/r/aerobicio/kayessess)
|
2
|
+
|
3
|
+
## A Rails plugin/gem for helping to get KSS into your Rails app.
|
4
|
+
|
5
|
+
Mad hacks on going.
|
6
|
+
|
7
|
+
![](http://f.cl.ly/items/3g0A2w011Q0M2i441D23/anim0205-1_e0.gif)
|
@@ -0,0 +1 @@
|
|
1
|
+
#= require kss
|
@@ -0,0 +1,60 @@
|
|
1
|
+
# Vendored from https://raw.github.com/kneath/kss/master/lib/kss.coffee
|
2
|
+
#
|
3
|
+
# ---
|
4
|
+
#
|
5
|
+
# This class scans your stylesheets for pseudo classes, then inserts a new CSS
|
6
|
+
# rule with the same properties, but named 'psuedo-class-{{name}}'.
|
7
|
+
#
|
8
|
+
# Supported pseudo classes: hover, disabled, active, visited, focus, target.
|
9
|
+
#
|
10
|
+
# Example:
|
11
|
+
#
|
12
|
+
# a:hover{ color:blue; }
|
13
|
+
# => a.pseudo-class-hover{ color:blue; }
|
14
|
+
class KssStateGenerator
|
15
|
+
psuedo_selectors = [
|
16
|
+
'hover',
|
17
|
+
'enabled',
|
18
|
+
'disabled',
|
19
|
+
'active',
|
20
|
+
'visited',
|
21
|
+
'focus',
|
22
|
+
'target',
|
23
|
+
'checked',
|
24
|
+
'empty',
|
25
|
+
'first-of-type',
|
26
|
+
'last-of-type',
|
27
|
+
'first-child',
|
28
|
+
'last-child']
|
29
|
+
|
30
|
+
constructor: ->
|
31
|
+
pseudos = new RegExp "(\\:#{psuedo_selectors.join('|\\:')})", "g"
|
32
|
+
|
33
|
+
try
|
34
|
+
for stylesheet in document.styleSheets
|
35
|
+
if stylesheet.href && stylesheet.href.indexOf(document.domain) >= 0
|
36
|
+
idxs = []
|
37
|
+
for rule, idx in stylesheet.cssRules
|
38
|
+
if (rule.type == CSSRule.STYLE_RULE) and pseudos.test(rule.selectorText)
|
39
|
+
replaceRule = (matched, stuff) ->
|
40
|
+
return matched.replace(/\:/g, '.pseudo-class-')
|
41
|
+
@insertRule(rule.cssText.replace(pseudos, replaceRule))
|
42
|
+
pseudos.lastIndex = 0
|
43
|
+
|
44
|
+
# Takes a given style and attaches it to the current page.
|
45
|
+
#
|
46
|
+
# rule - A CSS rule String (ex: ".test{ display:none; }").
|
47
|
+
#
|
48
|
+
# Returns nothing.
|
49
|
+
insertRule: (rule) ->
|
50
|
+
headEl = document.getElementsByTagName('head')[0]
|
51
|
+
styleEl = document.createElement('style')
|
52
|
+
styleEl.type = 'text/css'
|
53
|
+
if styleEl.styleSheet
|
54
|
+
styleEl.styleSheet.cssText = rule
|
55
|
+
else
|
56
|
+
styleEl.appendChild(document.createTextNode(rule))
|
57
|
+
|
58
|
+
headEl.appendChild(styleEl)
|
59
|
+
|
60
|
+
new KssStateGenerator
|
@@ -0,0 +1,38 @@
|
|
1
|
+
@import "neat-helpers";
|
2
|
+
|
3
|
+
// Root type sizing
|
4
|
+
// ----------------------------------------
|
5
|
+
$base-font-size: 1.0;
|
6
|
+
$line-height-ratio: 1.5;
|
7
|
+
|
8
|
+
// Spacing units and sizings
|
9
|
+
// ----------------------------------------
|
10
|
+
$_spacing-tight: 0.7rem;
|
11
|
+
$_spacing-medium: 1.4rem;
|
12
|
+
$_spacing-wide: 2.8rem;
|
13
|
+
$_spacing-superwide: 3.6rem;
|
14
|
+
|
15
|
+
// Grid & layout structure
|
16
|
+
// ----------------------------------------
|
17
|
+
$_grid-prefix: unquote("");
|
18
|
+
$column: 10rem;
|
19
|
+
$gutter: 2rem;
|
20
|
+
$grid-columns: 6;
|
21
|
+
$max-width: 140rem;
|
22
|
+
$visual-grid: false;
|
23
|
+
$visual-grid-index: front;
|
24
|
+
$visual-grid-color: #C75D48;
|
25
|
+
$visual-grid-opacity: 0.05;
|
26
|
+
|
27
|
+
// Style
|
28
|
+
// ----------------------------------------
|
29
|
+
$font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
30
|
+
$background-color: #ffffff;
|
31
|
+
$color: #2B315C;
|
32
|
+
|
33
|
+
$red: #E2857E;
|
34
|
+
$orange: #EEC03D;
|
35
|
+
$yellow: #F0E53F;
|
36
|
+
$green: #C3DE32;
|
37
|
+
$blue: #9AC7FE;
|
38
|
+
$purple: #D4AAFE;
|
@@ -0,0 +1,34 @@
|
|
1
|
+
@charset "utf-8";
|
2
|
+
|
3
|
+
// External Mixins and Constants
|
4
|
+
// ----------------------------------------
|
5
|
+
@import "bourbon";
|
6
|
+
@import "constants";
|
7
|
+
@import "neat";
|
8
|
+
|
9
|
+
// only apply a reset to things that are kayessess
|
10
|
+
[class*=kayessess] {
|
11
|
+
@import "lib/reset";
|
12
|
+
}
|
13
|
+
|
14
|
+
// Namespace everything inside a scope
|
15
|
+
// ----------------------------------------
|
16
|
+
html.kayessess {
|
17
|
+
|
18
|
+
// Mixins, functions and placeholders
|
19
|
+
// ----------------------------------------
|
20
|
+
@import "lib/mixins";
|
21
|
+
@import "lib/functions";
|
22
|
+
|
23
|
+
|
24
|
+
// Base styles, unclassed HTML elems
|
25
|
+
// ----------------------------------------
|
26
|
+
@import "lib/base";
|
27
|
+
@import "lib/spacing";
|
28
|
+
|
29
|
+
@import "layout/*";
|
30
|
+
|
31
|
+
@import "lib/syntax";
|
32
|
+
|
33
|
+
@import "modules/*";
|
34
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
&,
|
2
|
+
body {
|
3
|
+
font-family: $font-family;
|
4
|
+
min-height: 100%;
|
5
|
+
height: 100%;
|
6
|
+
}
|
7
|
+
|
8
|
+
& {
|
9
|
+
background-color: $background-color;
|
10
|
+
color: $color;
|
11
|
+
|
12
|
+
&.is-example {
|
13
|
+
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAAAAACo4kLRAAAAF0lEQVR4AWP4Dwff4WBoCyKYCOkhLQgAy9OIQG/ubwsAAAAASUVORK5CYII=');
|
14
|
+
|
15
|
+
.kayessess__examples{
|
16
|
+
@include clearfix;
|
17
|
+
|
18
|
+
padding: 50px;
|
19
|
+
}
|
20
|
+
|
21
|
+
.kayessess__example__code {
|
22
|
+
display: none;
|
23
|
+
}
|
24
|
+
}
|
25
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
// Join a list of strings together using a joining string, eg;
|
2
|
+
//
|
3
|
+
// $a: top right bottom left;
|
4
|
+
// implode('-', $a) == "top-right-bottom-left"
|
5
|
+
//
|
6
|
+
@function implode($joiner, $vars...) {
|
7
|
+
$join: "";
|
8
|
+
$string: "";
|
9
|
+
@for $i from 1 through length($vars) {
|
10
|
+
$var: nth($vars, $i);
|
11
|
+
@if $var {
|
12
|
+
$string: "#{$string}#{$join}#{$var}";
|
13
|
+
@if $i == 1 { $join: $joiner; }
|
14
|
+
}
|
15
|
+
}
|
16
|
+
@return $string;
|
17
|
+
}
|
18
|
+
|
19
|
+
|
20
|
+
// Return a spacing size - used in the rare cases where we want to use
|
21
|
+
// combinations of spacing sizes
|
22
|
+
@function get_spacing($size) {
|
23
|
+
@if $size == tight { @return $_spacing-tight; }
|
24
|
+
@if $size == medium { @return $_spacing-medium; }
|
25
|
+
@if $size == wide { @return $_spacing-wide; }
|
26
|
+
@if $size == superwide { @return $_spacing-superwide; }
|
27
|
+
}
|
@@ -0,0 +1,64 @@
|
|
1
|
+
// Text overflow is still a vendor-prefixed property for IE8
|
2
|
+
// clip | ellipsis | string
|
3
|
+
@mixin text-overflow($overflow) {
|
4
|
+
-webkit-text-overflow: $overflow;
|
5
|
+
-khtml-text-overflow: $overflow;
|
6
|
+
-moz-text-overflow: $overflow;
|
7
|
+
-o-text-overflow: $overflow;
|
8
|
+
text-overflow: $overflow;
|
9
|
+
overflow: hidden;
|
10
|
+
white-space: nowrap;
|
11
|
+
}
|
12
|
+
|
13
|
+
@mixin font-size($font-size, $line_height: 1.5){
|
14
|
+
font-size: $font-size * 10px;
|
15
|
+
font-size: $font-size * 1rem;
|
16
|
+
line-height: $line_height;
|
17
|
+
}
|
18
|
+
|
19
|
+
// Utility mixin for setting spacing (margin + padding). Useful for inside
|
20
|
+
// mediaqueries where the standard spacing classes cannot be @extended
|
21
|
+
//
|
22
|
+
// returns [$method]: $size;
|
23
|
+
// returns [$method]-$direction: size;
|
24
|
+
@mixin spacing($method, $size, $direction: false) {
|
25
|
+
@if $direction {
|
26
|
+
#{$method}-#{$direction}: get_spacing($size);
|
27
|
+
} @else {
|
28
|
+
#{$method}: get_spacing($size);
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
32
|
+
@mixin margin($size, $direction: false) {
|
33
|
+
@include spacing(margin, $size, $direction);
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin padding($size, $direction: false) {
|
37
|
+
@include spacing(padding, $size, $direction);
|
38
|
+
}
|
39
|
+
|
40
|
+
@function strip_unit($value) {
|
41
|
+
@return $value / ($value * 0 + 1);
|
42
|
+
}
|
43
|
+
|
44
|
+
@function to_rem($value){
|
45
|
+
@return strip_unit($value) * 1rem;
|
46
|
+
}
|
47
|
+
|
48
|
+
@mixin hardware_accelerate() {
|
49
|
+
-webkit-transform: translateZ(0);
|
50
|
+
-webkit-perspective: 1000;
|
51
|
+
-webkit-backface-visibility: hidden;
|
52
|
+
}
|
53
|
+
|
54
|
+
// Makes items un-selectable. I.e. if you tap and hold on a button, it won't get selected.
|
55
|
+
@mixin noselect {
|
56
|
+
@include prefixer(user-select, none, webkit moz o spec);
|
57
|
+
|
58
|
+
-webkit-touch-callout: none;
|
59
|
+
}
|
60
|
+
|
61
|
+
@mixin antialiased {
|
62
|
+
-webkit-font-smoothing: antialiased;
|
63
|
+
-moz-osx-font-smoothing: grayscale;
|
64
|
+
}
|
@@ -0,0 +1,207 @@
|
|
1
|
+
// Use border-box for everything by default, even :before and :after
|
2
|
+
[class*=kayessess]{ &, &:before, &:after{ @include box-sizing(border-box); } }
|
3
|
+
|
4
|
+
// 1. Keeps page centred in all browsers regardless of content height
|
5
|
+
// 2. Prevents iOS text size adjust after orientation change, without disabling user zoom
|
6
|
+
// www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
|
7
|
+
html.kayessess {
|
8
|
+
overflow-y: scroll; // 1
|
9
|
+
-webkit-text-size-adjust: 100%; // 2
|
10
|
+
-ms-text-size-adjust: 100%; // 2
|
11
|
+
text-size-adjust: 100%; // 2
|
12
|
+
min-height: 100%;
|
13
|
+
}
|
14
|
+
|
15
|
+
// 1. Clear default browser margin
|
16
|
+
// 2. Default line-height inconsistent across browsers
|
17
|
+
body {
|
18
|
+
margin:0; // 1
|
19
|
+
line-height:1; // 2
|
20
|
+
}
|
21
|
+
|
22
|
+
|
23
|
+
// 1. Nicer image sizing in IE
|
24
|
+
// 2. Common default
|
25
|
+
img[class*=kayessess] {
|
26
|
+
-ms-interpolation-mode: bicubic; // 1
|
27
|
+
display:block; // 2
|
28
|
+
}
|
29
|
+
|
30
|
+
// Lists
|
31
|
+
// ------------------------------------------------
|
32
|
+
ol[class*=kayessess],
|
33
|
+
ul[class*=kayessess] {
|
34
|
+
margin:0;
|
35
|
+
padding:0;
|
36
|
+
}
|
37
|
+
|
38
|
+
dl[class*=kayessess],
|
39
|
+
dd[class*=kayessess] {
|
40
|
+
margin:0;
|
41
|
+
}
|
42
|
+
|
43
|
+
|
44
|
+
// Reset list items back to normal block display.
|
45
|
+
// This allows us to use lists for semantic markup
|
46
|
+
// without needing to set this each time.
|
47
|
+
// Lists only look like lists in blocks of copy.
|
48
|
+
li {
|
49
|
+
display: block;
|
50
|
+
padding: 0;
|
51
|
+
margin: 0;
|
52
|
+
list-style: none;
|
53
|
+
}
|
54
|
+
|
55
|
+
// Headings
|
56
|
+
// ------------------------------------------------
|
57
|
+
// Resets all headings to look like normal text
|
58
|
+
h1[class*=kayessess],
|
59
|
+
h2[class*=kayessess],
|
60
|
+
h3[class*=kayessess],
|
61
|
+
h4[class*=kayessess],
|
62
|
+
h5[class*=kayessess],
|
63
|
+
h6[class*=kayessess] {
|
64
|
+
font-weight:inherit;
|
65
|
+
line-height:inherit;
|
66
|
+
font-size:inherit;
|
67
|
+
margin:0;
|
68
|
+
}
|
69
|
+
|
70
|
+
// Block Text
|
71
|
+
// ------------------------------------------------
|
72
|
+
p[class*=kayessess] {
|
73
|
+
margin:0;
|
74
|
+
}
|
75
|
+
|
76
|
+
blockquote[class*=kayessess] {
|
77
|
+
margin:0;
|
78
|
+
}
|
79
|
+
|
80
|
+
|
81
|
+
// Improve the appearance of preformatted text
|
82
|
+
pre[class*=kayessess] {
|
83
|
+
white-space: pre;
|
84
|
+
white-space: pre-wrap;
|
85
|
+
word-wrap: break-word;
|
86
|
+
margin:0;
|
87
|
+
font-family:inherit;
|
88
|
+
font-size:inherit;
|
89
|
+
}
|
90
|
+
|
91
|
+
// Inline Text
|
92
|
+
// ------------------------------------------------
|
93
|
+
cite[class*=kayessess] {
|
94
|
+
font-style:normal;
|
95
|
+
}
|
96
|
+
|
97
|
+
ins[class*=kayessess] {
|
98
|
+
text-decoration:none;
|
99
|
+
}
|
100
|
+
|
101
|
+
dfn[class*=kayessess] {
|
102
|
+
font-style:inherit;
|
103
|
+
}
|
104
|
+
|
105
|
+
del[class*=kayessess] {
|
106
|
+
text-decoration:none;
|
107
|
+
}
|
108
|
+
|
109
|
+
mark[class*=kayessess] {
|
110
|
+
background:none;
|
111
|
+
color:inherit;
|
112
|
+
}
|
113
|
+
|
114
|
+
address[class*=kayessess] {
|
115
|
+
font-style:normal;
|
116
|
+
}
|
117
|
+
|
118
|
+
tt[class*=kayessess],
|
119
|
+
code[class*=kayessess],
|
120
|
+
kbd[class*=kayessess],
|
121
|
+
samp[class*=kayessess] {
|
122
|
+
font-family: Meslo, Menlo, monospace;
|
123
|
+
font-size: inherit;
|
124
|
+
}
|
125
|
+
|
126
|
+
b[class*=kayessess],
|
127
|
+
strong[class*=kayessess] {
|
128
|
+
font-weight:inherit;
|
129
|
+
}
|
130
|
+
|
131
|
+
em[class*=kayessess] {
|
132
|
+
font-style:inherit;
|
133
|
+
}
|
134
|
+
|
135
|
+
small[class*=kayessess] {
|
136
|
+
font-size:100%;
|
137
|
+
}
|
138
|
+
|
139
|
+
q[class*=kayessess] {
|
140
|
+
quotes: none;
|
141
|
+
|
142
|
+
&:before,
|
143
|
+
&:after {
|
144
|
+
content: '';
|
145
|
+
content: none;
|
146
|
+
}
|
147
|
+
}
|
148
|
+
|
149
|
+
a[class*=kayessess] {
|
150
|
+
font-weight:inherit;
|
151
|
+
color:inherit;
|
152
|
+
text-decoration:none;
|
153
|
+
|
154
|
+
&:hover,
|
155
|
+
&:active {
|
156
|
+
outline: none;
|
157
|
+
}
|
158
|
+
}
|
159
|
+
|
160
|
+
a[class*=kayessess] img[class*=kayessess]{
|
161
|
+
border: none;
|
162
|
+
}
|
163
|
+
|
164
|
+
|
165
|
+
// Set sub, sup without affecting line-height: gist.github.com/413930
|
166
|
+
sub[class*=kayessess],
|
167
|
+
sup[class*=kayessess] {
|
168
|
+
font-size: 75%;
|
169
|
+
line-height: 0;
|
170
|
+
position: relative;
|
171
|
+
}
|
172
|
+
|
173
|
+
sup[class*=kayessess] {
|
174
|
+
top: -0.5em;
|
175
|
+
}
|
176
|
+
|
177
|
+
sub[class*=kayessess] {
|
178
|
+
bottom: -0.25em;
|
179
|
+
}
|
180
|
+
|
181
|
+
// HTML 5 Block Elements
|
182
|
+
// ------------------------------------------------
|
183
|
+
article[class*=kayessess],
|
184
|
+
aside[class*=kayessess],
|
185
|
+
details[class*=kayessess],
|
186
|
+
figcaption[class*=kayessess],
|
187
|
+
figure[class*=kayessess],
|
188
|
+
footer[class*=kayessess],
|
189
|
+
header[class*=kayessess],
|
190
|
+
hgroup[class*=kayessess],
|
191
|
+
menu[class*=kayessess],
|
192
|
+
nav[class*=kayessess],
|
193
|
+
section[class*=kayessess] {
|
194
|
+
display:block;
|
195
|
+
}
|
196
|
+
|
197
|
+
// Tables
|
198
|
+
// ------------------------------------------------
|
199
|
+
table[class*=kayessess] {
|
200
|
+
width: 100%;
|
201
|
+
border-collapse: collapse;
|
202
|
+
border-spacing: 0;
|
203
|
+
}
|
204
|
+
|
205
|
+
th[class*=kayessess] {
|
206
|
+
font-weight:inherit;
|
207
|
+
}
|