Permalink
Browse files

Improve build tooling, update tachyons

  • Loading branch information...
1 parent 7b5b579 commit ce553c21edb8f990fa285c5033ef1753027153b9 @johnotander johnotander committed Mar 13, 2016
Showing with 4,555 additions and 8 deletions.
  1. +7 −1 build.js
  2. +6 −6 package.json
  3. +42 −0 scss/_background-size.scss
  4. +18 −0 scss/_base.scss
  5. +101 −0 scss/_border-colors.scss
  6. +68 −0 scss/_border-radius.scss
  7. +47 −0 scss/_border-style.scss
  8. +62 −0 scss/_border-widths.scss
  9. +99 −0 scss/_borders.scss
  10. +84 −0 scss/_box-sizing.scss
  11. +20 −0 scss/_clearfix.scss
  12. +23 −0 scss/_code.scss
  13. +93 −0 scss/_colors.scss
  14. +91 −0 scss/_coordinates.scss
  15. +133 −0 scss/_debug.scss
  16. +18 −0 scss/_debug_children.scss
  17. +81 −0 scss/_display.scss
  18. +55 −0 scss/_floats.scss
  19. +76 −0 scss/_font-family.scss
  20. +30 −0 scss/_font-style.scss
  21. +54 −0 scss/_font-weight.scss
  22. +30 −0 scss/_forms.scss
  23. +29 −0 scss/_gradients.scss
  24. +110 −0 scss/_heights.scss
  25. +63 −0 scss/_hovers.scss
  26. +15 −0 scss/_images.scss
  27. +34 −0 scss/_letter-spacing.scss
  28. +34 −0 scss/_line-height.scss
  29. +35 −0 scss/_links.scss
  30. +26 −0 scss/_lists.scss
  31. +96 −0 scss/_max-widths.scss
  32. +47 −0 scss/_media-queries.scss
  33. +29 −0 scss/_module-template.scss
  34. +416 −0 scss/_normalize.scss
  35. +78 −0 scss/_overflow.scss
  36. +34 −0 scss/_position.scss
  37. +439 −0 scss/_skins.scss
  38. +545 −0 scss/_spacing.scss
  39. +523 −0 scss/_spacing_fallback.scss
  40. +15 −0 scss/_styles.scss
  41. +64 −0 scss/_svg-fills.scss
  42. +66 −0 scss/_svg-strokes.scss
  43. +38 −0 scss/_text-align.scss
  44. +31 −0 scss/_text-decoration.scss
  45. +54 −0 scss/_text-transform.scss
  46. +47 −0 scss/_type-scale.scss
  47. +74 −0 scss/_typography.scss
  48. +58 −0 scss/_utilities.scss
  49. +54 −0 scss/_vertical-align.scss
  50. +52 −0 scss/_visibility.scss
  51. +35 −0 scss/_white-space.scss
  52. +124 −0 scss/_widths.scss
  53. +51 −0 tachyons.scss
  54. +1 −1 test.js
View
@@ -9,10 +9,16 @@ glob('./node_modules/tachyons/src/**/*.css', (err, files) => {
throw err
}
+ var baseFile = ''
files.forEach(file => {
var css = fs.readFileSync(file, 'utf8')
var fileName = file.replace(/(\.\/node_modules\/tachyons\/src\/|\.css)/g, '')
- fs.writeFileSync(fileName + '.scss', cssScss(css))
+ if (fileName !== 'tachyons') {
+ fs.writeFileSync('scss/' + fileName + '.scss', cssScss(css))
+ baseFile += '@import "scss/' + fileName + '";\n'
+ }
})
+
+ fs.writeFileSync('tachyons.scss', baseFile)
})
View
@@ -1,9 +1,9 @@
{
"name": "tachyons-sass",
- "description": "[Alpha] Transpiled Sass partials for Tachyons.",
+ "description": "Transpiled Sass partials for Tachyons",
"author": "John Otander",
- "version": "0.1.0",
- "style": "sass/tachyons.scss",
+ "version": "4.0.0-beta.12",
+ "style": "tachyons.scss",
"scripts": {
"start": "node build.js",
"test": "ava"
@@ -18,12 +18,12 @@
],
"license": "MIT",
"dependencies": {
- "tachyons": "^3.0.3"
+ "tachyons": "^4.0.0-beta.12"
},
"devDependencies": {
- "ava": "^0.10.0",
+ "ava": "^0.13.0",
"css-scss": "^0.1.0",
- "glob": "^6.0.4",
+ "glob": "^7.0.3",
"node-sass": "^3.4.2"
}
}
@@ -0,0 +1,42 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+ BACKGROUND SIZE
+
+ Base:
+ bg = background-size
+
+ Modifiers:
+ cv = cover
+ cn = contain
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+ .bg-cv { background-size: cover; }
+ .bg-cn { background-size: contain; }
+
+@media #{$breakpoint-not-small} {
+ .bg-cv-ns { background-size: cover; }
+ .bg-cn-ns { background-size: contain; }
+}
+
+@media #{$breakpoint-medium} {
+ .bg-cv-m { background-size: cover; }
+ .bg-cn-m { background-size: contain; }
+}
+
+@media #{$breakpoint-large} {
+ .bg-cv-l { background-size: cover; }
+ .bg-cn-l { background-size: contain; }
+}
View
@@ -0,0 +1,18 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+ BASE
+
+*/
+
+html,
+body {
+ height: 100%;
+}
+
@@ -0,0 +1,101 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+ BORDER COLORS
+
+ Use in cobmination with the _borders.css module
+ Or for more flexibility the _border-styles.css and _border-widths.css modules
+
+ Base:
+ b-- = border
+
+ Modifiers:
+ Add a border color. There is a one to one mapping of color values
+ in the _colors.css module.
+
+ */
+
+.b--black { border-color: $black; }
+.b--near-black { border-color: $near-black; }
+.b--dark-gray { border-color: $dark-gray; }
+.b--mid-gray { border-color: $mid-gray; }
+.b--gray { border-color: $gray; }
+.b--silver { border-color: $silver; }
+.b--light-silver { border-color: $light-silver; }
+.b--light-gray { border-color: $light-gray; }
+.b--near-white { border-color: $near-white; }
+.b--white { border-color: $white; }
+
+.b--white-10 { border-color: hsla(0, 0, 100%, .1); }
+.b--white-20 { border-color: hsla(0, 0, 100%, .2); }
+.b--white-25 { border-color: hsla(0, 0, 100%, .25); }
+.b--white-30 { border-color: hsla(0, 0, 100%, .3); }
+.b--white-40 { border-color: hsla(0, 0, 100%, .4); }
+.b--white-50 { border-color: hsla(0, 0, 100%, .5); }
+.b--white-60 { border-color: hsla(0, 0, 100%, .6); }
+.b--white-70 { border-color: hsla(0, 0, 100%, .7); }
+.b--white-75 { border-color: hsla(0, 0, 100%, .75); }
+.b--white-80 { border-color: hsla(0, 0, 100%, .8); }
+.b--white-90 { border-color: hsla(0, 0, 100%, .9); }
+
+.b--black-0125 { border-color: hsla(0, 0, 0, .0125); }
+.b--black-025 { border-color: hsla(0, 0, 0, .025); }
+.b--black-05 { border-color: hsla(0, 0, 0, .05); }
+.b--black-10 { border-color: hsla(0, 0, 0, .1); }
+.b--black-20 { border-color: hsla(0, 0, 0, .2); }
+.b--black-25 { border-color: hsla(0, 0, 0, .25); }
+.b--black-30 { border-color: hsla(0, 0, 0, .3); }
+.b--black-40 { border-color: hsla(0, 0, 0, .4); }
+.b--black-50 { border-color: hsla(0, 0, 0, .5); }
+.b--black-60 { border-color: hsla(0, 0, 0, .6); }
+.b--black-70 { border-color: hsla(0, 0, 0, .7); }
+.b--black-75 { border-color: hsla(0, 0, 0, .75); }
+.b--black-80 { border-color: hsla(0, 0, 0, .8); }
+.b--black-90 { border-color: hsla(0, 0, 0, .9); }
+
+.b--blue { border-color: $blue; }
+.b--light-blue { border-color: $light-blue; }
+.b--lightest-blue { border-color: $lightest-blue; }
+.b--dark-blue { border-color: $dark-blue; }
+.b--darkest-blue { border-color: $darkest-blue; }
+.b--yellow { border-color: $yellow; }
+.b--light-yellow { border-color: $light-yellow; }
+.b--lightest-yellow { border-color: $lightest-yellow; }
+.b--dark-yellow { border-color: $dark-yellow; }
+.b--darkest-yellow { border-color: $darkest-yellow; }
+.b--orange { border-color: $orange; }
+.b--light-orange { border-color: $light-orange; }
+.b--lightest-orange { border-color: $lightest-orange; }
+.b--dark-orange { border-color: $dark-orange; }
+.b--darkest-orange { border-color: $darkest-orange; }
+.b--red { border-color: $red; }
+.b--light-red { border-color: $light-red; }
+.b--lightest-red { border-color: $lightest-red; }
+.b--dark-red { border-color: $dark-red; }
+.b--darkest-red { border-color: $darkest-red; }
+.b--teal { border-color: $teal; }
+.b--light-teal { border-color: $light-teal; }
+.b--lightest-teal { border-color: $lightest-teal; }
+.b--dark-teal { border-color: $dark-teal; }
+.b--darkest-teal { border-color: $darkest-teal; }
+.b--green { border-color: $green; }
+.b--light-green { border-color: $light-green; }
+.b--lightest-green { border-color: $lightest-green; }
+.b--dark-green { border-color: $dark-green; }
+.b--darkest-green { border-color: $darkest-green; }
+.b--pink { border-color: $pink; }
+.b--light-pink { border-color: $light-pink; }
+.b--lightest-pink { border-color: $lightest-pink; }
+.b--dark-pink { border-color: $dark-pink; }
+.b--darkest-pink { border-color: $darkest-pink; }
+.b--purple { border-color: $purple; }
+.b--light-purple { border-color: $light-purple; }
+.b--lightest-purple { border-color: $lightest-purple; }
+.b--dark-purple { border-color: $dark-purple; }
+.b--darkest-purple { border-color: $darkest-purple; }
@@ -0,0 +1,68 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+ BORDER RADIUS
+
+ Base:
+ br = border-radius
+
+ Modifiers:
+ n = none
+ 1 = 1st step in scale
+ 2 = 2nd step in scale
+ 3 = 3rd step in scale
+ 4 = 4th step in scale
+ 5 = 5th step in scale
+ circ = circle
+ -100 = 100%
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+ .brn { border-radius: 0; }
+ .br1 { border-radius: .125rem; }
+ .br2 { border-radius: .25rem; }
+ .br3 { border-radius: .5rem; }
+ .br4 { border-radius: 1rem; }
+ .br5 { border-radius: 2rem; }
+ .br-100 { border-radius: 100%; }
+
+@media #{$breakpoint-not-small} {
+ .brn-ns { border-radius: 0; }
+ .br1-ns { border-radius: .125rem; }
+ .br2-ns { border-radius: .25rem; }
+ .br3-ns { border-radius: .5rem; }
+ .br4-ns { border-radius: 1rem; }
+ .br5-ns { border-radius: 2rem; }
+ .br-100-ns { border-radius: 100%; }
+}
+
+@media #{$breakpoint-medium} {
+ .brn-m { border-radius: 0; }
+ .br1-m { border-radius: .125rem; }
+ .br2-m { border-radius: .25rem; }
+ .br3-m { border-radius: .5rem; }
+ .br4-m { border-radius: 1rem; }
+ .br5-m { border-radius: 2rem; }
+ .br-100-m { border-radius: 100%; }
+}
+
+@media #{$breakpoint-large} {
+ .brn-l { border-radius: 0; }
+ .br1-l { border-radius: .125rem; }
+ .br2-l { border-radius: .25rem; }
+ .br3-l { border-radius: .5rem; }
+ .br4-l { border-radius: 1rem; }
+ .br5-l { border-radius: 2rem; }
+ .br-100-l { border-radius: 100%; }
+}
@@ -0,0 +1,47 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+ BORDER STYLES
+
+ Base:
+ bs = border-style
+
+ Modifiers:
+ none = none
+ dotted = dotted
+ solid = solid
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+ */
+
+.bs-none { border-style: none; }
+.bs-dotted { border-style: dotted; }
+.bs-solid { border-style: solid; }
+
+@media #{$breakpoint-not-small} {
+ .bs-none-ns { border-style: none; }
+ .bs-dotted-ns { border-style: dotted; }
+ .bs-solid-ns { border-style: solid; }
+}
+
+@media #{$breakpoint-medium} {
+ .bs-none-m { border-style: none; }
+ .bs-dotted-m { border-style: dotted; }
+ .bs-solid-m { border-style: solid; }
+}
+
+@media #{$breakpoint-large} {
+ .bs-none-l { border-style: none; }
+ .bs-dotted-l { border-style: dotted; }
+ .bs-solid-l { border-style: solid; }
+}
@@ -0,0 +1,62 @@
+
+// Converted Variables
+
+
+// Custom Media Query Variables
+
+
+/*
+
+ BORDER WIDTHS
+
+ Base:
+ bw = border-width
+
+ Modifiers:
+ 0 = 0 width border
+ 1 = 1st step in border-width scale
+ 2 = 2nd step in border-width scale
+ 3 = 3rd step in border-width scale
+ 4 = 4th step in border-width scale
+ 5 = 5th step in border-width scale
+
+ Media Query Extensions:
+ -ns = not-small
+ -m = medium
+ -l = large
+
+*/
+
+.bw0 { border-width: 0; }
+.bw1 { border-width: .125rem; }
+.bw2 { border-width: .25rem; }
+.bw3 { border-width: .5rem; }
+.bw4 { border-width: 1rem; }
+.bw5 { border-width: 2rem; }
+
+@media #{$breakpoint-not-small} {
+ .bw0-ns { border-width: 0; }
+ .bw1-ns { border-width: .125rem; }
+ .bw2-ns { border-width: .25rem; }
+ .bw3-ns { border-width: .5rem; }
+ .bw4-ns { border-width: 1rem; }
+ .bw5-ns { border-width: 2rem; }
+}
+
+@media #{$breakpoint-medium} {
+ .bw0-m { border-width: 0; }
+ .bw1-m { border-width: .125rem; }
+ .bw2-m { border-width: .25rem; }
+ .bw3-m { border-width: .5rem; }
+ .bw4-m { border-width: 1rem; }
+ .bw5-m { border-width: 2rem; }
+}
+
+@media #{$breakpoint-large} {
+ .bw0-l { border-width: 0; }
+ .bw1-l { border-width: .125rem; }
+ .bw2-l { border-width: .25rem; }
+ .bw3-l { border-width: .5rem; }
+ .bw4-l { border-width: 1rem; }
+ .bw5-l { border-width: 2rem; }
+}
Oops, something went wrong.

0 comments on commit ce553c2

Please sign in to comment.