artin/tachyons
1
0
Fork 0
mirror of https://github.com/tachyons-css/tachyons.git synced 2026-02-06 14:06:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Remove installation of modules through npm

Browse Source 
* Removes function to install with npm and copy files to source
* Removes duplicative custom media declaration at head of src files
* Removes duplicative variables in border-colors and skins partials.
This commit is contained in:
mrmrs 2016-08-24 11:54:57 +01:00
parent bde8b6a868
commit 00eab9c362
38 changed files with 5 additions and 452 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
build/_tachyons.css
View File

@ -1,81 +0,0 @@
/*
* ████████╗ █████╗ ██████╗██╗ ██╗██╗ ██╗ ██████╗ ███╗ ██╗███████╗
* ╚══██╔══╝██╔══██╗██╔════╝██║ ██║╚██╗ ██╔╝██╔═══██╗████╗ ██║██╔════╝
* ██║ ███████║██║ ███████║ ╚████╔╝ ██║ ██║██╔██╗ ██║███████╗
* ██║ ██╔══██║██║ ██╔══██║ ╚██╔╝ ██║ ██║██║╚██╗██║╚════██║
* ██║ ██║ ██║╚██████╗██║ ██║ ██║ ╚██████╔╝██║ ╚████║███████║
* ╚═╝ ╚═╝ ╚═╝ ╚═════╝╚═╝ ╚═╝ ╚═╝ ╚═════╝ ╚═╝ ╚═══╝╚══════╝
*
* TABLE OF CONTENTS
*
* 1. External Library Includes
* - Normalize.css | http://normalize.css.github.io
* 2. Tachyons Modules
* 3. Variables
* - Media Queries
* - Colors
* 4. Debugging
* - Debug all
* - Debug children
*
*/
/* External Library Includes */
@import './_normalize';
/* Modules */
@import './_box-sizing';
@import './_background-size';
@import './_borders';
@import './_border-colors';
@import './_border-radius';
@import './_border-style';
@import './_border-widths';
@import './_box-shadow';
@import './_code';
@import './_coordinates';
@import './_clears';
@import './_display';
@import './_flexbox';
@import './_floats';
@import './_font-family';
@import './_font-style';
@import './_font-weight';
@import './_forms';
@import './_heights';
@import './_letter-spacing';
@import './_line-height';
@import './_links';
@import './_lists';
@import './_max-widths';
@import './_widths';
@import './_overflow';
@import './_position';
@import './_opacity';
@import './_skins';
@import './_spacing';
@import './_tables';
@import './_text-decoration';
@import './_text-align';
@import './_text-transform';
@import './_type-scale';
@import './_typography';
@import './_utilities';
@import './_visibility';
@import './_white-space';
@import './_vertical-align';
@import './_hovers';
@import './_styles';
/* Variables */
/* Importing here will allow you to override any variables in the modules */
@import './_colors';
@import './_media-queries';
/* Debugging */
@import './_debug_children';
/* Uncomment out the line below and rebuild the css if you want to use pesticide.io to debug layout .*/
/* @import './_debug'; */

77
build/index.js
View File

@ -1,77 +0,0 @@
var fs = require('fs')
var path = require('path')
var pkg = require('../package.json')
var tachyonsModules = require('tachyons-modules')
var copy = require('copy-files')
tachyonsModules().then(function (cssModules) {
var filteredModules = cssModules.filter(function (module) {
return [
// TODO: Fix me : (
'tachyons-base',
'tachyons-webpack',
'tachyons-display-verbose',
'tachyons-build-css'
].indexOf(module.name) == -1
}).map(function (cssModule) {
return cssModule.name
})
filteredModules.push('normalize.css')
var files = constructFiles(filteredModules)
copy({
files: files,
dest: path.join(__dirname, '../src'),
overwrite: true
}, function (err) {
if (err) {
console.error('Error occurred copying files')
console.error(err)
process.exit(1)
}
})
var srcCss = fs.readFileSync('./build/_tachyons.css', 'utf8')
var banner = '/* TACHYONS v' + pkg.version + ' | github.com/tachyons-css/tachyons */\n\n'
console.log(banner)
fs.writeFileSync(path.join(__dirname, '../src/tachyons.css'), banner + srcCss)
})
function constructFiles (modules) {
var files = {}
modules.forEach(function (module) {
console.log('Copying ' + module)
var moduleLocation = getModuleCssLocation(module)
var moduleName = getModuleKey(module)
files['_' + moduleName + '.css'] = moduleLocation
})
return files
}
function isTachyonsModule (module) {
return module.indexOf('tachyons') !== -1
}
function isNormalizeModule (module) {
return module === 'normalize.css'
}
function getModuleCssLocation (module) {
try {
if (isTachyonsModule(module)) {
return 'node_modules/' + module + '/' + require('../node_modules/' + module + '/package.json').style
} else if (isNormalizeModule(module)) {
return 'node_modules/' + module + '/' + module
} else {
console.error('Unknown module: ' + module)
}
} catch (e) {
console.log(e)
}
}
function getModuleKey (module) {
return module.replace(/(tachyons-|\.css)/ig, '')
}

4
src/_background-size.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
BACKGROUND SIZE

76
src/_border-colors.css
View File

@ -1,79 +1,3 @@
/*
Tachyons
COLOR VARIABLES
Grayscale
- Solids
- Transparencies
*/
:root {
--black: #000;
--near-black: #111;
--dark-gray:#333;
--mid-gray:#555;
--gray: #777;
--silver: #999;
--light-silver: #aaa;
--moon-gray: #ccc;
--light-gray: #eee;
--near-white: #f4f4f4;
--white: #fff;
--transparent: transparent;
--black-90: rgba(0,0,0,.9);
--black-80: rgba(0,0,0,.8);
--black-70: rgba(0,0,0,.7);
--black-60: rgba(0,0,0,.6);
--black-50: rgba(0,0,0,.5);
--black-40: rgba(0,0,0,.4);
--black-30: rgba(0,0,0,.3);
--black-20: rgba(0,0,0,.2);
--black-10: rgba(0,0,0,.1);
--black-05: rgba(0,0,0,.05);
--black-025: rgba(0,0,0,.025);
--black-0125: rgba(0,0,0,.0125);
--white-90: rgba(255,255,255,.9);
--white-80: rgba(255,255,255,.8);
--white-70: rgba(255,255,255,.7);
--white-60: rgba(255,255,255,.6);
--white-50: rgba(255,255,255,.5);
--white-40: rgba(255,255,255,.4);
--white-30: rgba(255,255,255,.3);
--white-20: rgba(255,255,255,.2);
--white-10: rgba(255,255,255,.1);
--white-05: rgba(255,255,255,.05);
--white-025: rgba(255,255,255,.025);
--white-0125: rgba(255,255,255,.0125);
--dark-red: #f00008;
--red: #ff3223;
--orange: #f3a801;
--gold: #f2c800;
--yellow: #ffde37;
--purple: #7d5da9;
--light-purple: #8d4f92;
--hot-pink: #d62288;
--dark-pink: #c64774;
--pink: #f49cc8;
--dark-green: #006C71;
--green: #41D69F;
--navy: #001b44;
--dark-blue: #00449e;
--blue: #357edd;
--light-blue: #96ccff;
--lightest-blue: #cdecff;
--washed-blue: #f6fffe;
--washed-green: #e8fdf5;
--washed-yellow: #fff8d5;
--light-pink: #efa4b8;
--light-yellow: #f3dd70;
--light-red: #ffd3c0;
}
/*
BORDER COLORS

4
src/_border-radius.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
BORDER RADIUS

4
src/_border-style.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
BORDER STYLES

4
src/_border-widths.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
BORDER WIDTHS

4
src/_borders.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
BORDER BASE

4
src/_box-shadow.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
BOX-SHADOW

4
src/_clears.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
CLEARFIX

4
src/_coordinates.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
COORDINATES

4
src/_display.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
DISPLAY

4
src/_flexbox.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
FLEXBOX

7
src/_floats.css
View File

@ -1,10 +1,3 @@
/* Media Query Variables */
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
FLOATS

4
src/_font-style.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
FONT STYLE

4
src/_font-weight.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
FONT WEIGHT

4
src/_heights.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
HEIGHTS

3
src/_hovers.css
View File

@ -1,6 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
HOVER EFFECTS

4
src/_letter-spacing.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
LETTER SPACING

5
src/_line-height.css
View File

@ -1,8 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
LINE HEIGHT / LEADING

4
src/_max-widths.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
MAX WIDTHS

13
src/_media-queries.css
View File

@ -5,7 +5,8 @@
Media query values can be changed to fit your own content.
There are no magic bullets when it comes to media query width values.
They should be declared in em units - and they should be set to meet
the needs of your content.
the needs of your content. You can also add additional media queries,
or remove some of the existing ones.
These media queries can be referenced like so:
@ -22,20 +23,14 @@
}
@media (--breakpoint-large) {
.large-screen-specific-style {
background-color: red;
}
}
@media (--breakpoint-extra-large) {
.extra-large-screen-specific-style {
.large-and-larger-screen-specific-style {
background-color: red;
}
}
*/
/* Media Queries */
@custom-media --breakpoint-not-small screen and (min-width: 30em);
@custom-media --breakpoint-medium screen and (min-width: 30em) and (max-width: 60em);
@custom-media --breakpoint-large screen and (min-width: 60em);
@custom-media --breakpoint-extra-large screen and (min-width: 120em);

2
src/_module-template.css
View File

@ -1,6 +1,6 @@
/*
MEDIA QUERIES
MODULE NAME
Use this scaffolding to create or extend your own modules with tachyons
style architecture.

4
src/_outlines.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
OUTLINES

4
src/_overflow.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
OVERFLOW

4
src/_position.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
POSITIONING

74
src/_skins.css
View File

@ -1,77 +1,3 @@
/*
COLOR VARIABLES
Variables to set colors for
color, background-color, and border-color
*/
/* variables */
:root {
--black-90: rgba(0,0,0,.9);
--black-80: rgba(0,0,0,.8);
--black-70: rgba(0,0,0,.7);
--black-60: rgba(0,0,0,.6);
--black-50: rgba(0,0,0,.5);
--black-40: rgba(0,0,0,.4);
--black-30: rgba(0,0,0,.3);
--black-20: rgba(0,0,0,.2);
--black-10: rgba(0,0,0,.1);
--black-05: rgba(0,0,0,.05);
--white-90: rgba(255,255,255,.9);
--white-80: rgba(255,255,255,.8);
--white-70: rgba(255,255,255,.7);
--white-60: rgba(255,255,255,.6);
--white-50: rgba(255,255,255,.5);
--white-40: rgba(255,255,255,.4);
--white-30: rgba(255,255,255,.3);
--white-20: rgba(255,255,255,.2);
--white-10: rgba(255,255,255,.1);
--transparent: transparent;
--black: #000;
--near-black: #111;
--dark-gray:#333;
--mid-gray:#555;
--gray: #777;
--silver: #999;
--light-silver: #aaa;
--moon-gray: #ccc;
--light-gray: #eee;
--near-white: #f4f4f4;
--white: #fff;
--dark-red: #f00008;
--red: #ff3223;
--orange: #f3a801;
--gold: #f2c800;
--yellow: #ffde37;
--purple: #7d5da9;
--light-purple: #8d4f92;
--hot-pink: #d62288;
--dark-pink: #c64774;
--pink: #f49cc8;
--dark-green: #006c71;
--green: #41d69f;
--navy: #001b44;
--dark-blue: #00449e;
--blue: #357edd;
--light-blue: #96ccff;
--lightest-blue: #cdecff;
--washed-blue: #f6fffe;
--washed-green: #e8fdf5;
--washed-yellow: #fff8d5;
--light-pink: #efa4b8;
--light-yellow: #f3dd70;
--light-red: #ffd3c0;
}
/*
SKINS

7
src/_tables.css
View File

@ -4,13 +4,6 @@
*/
:root {
--light-silver: #aaa;
--moon-gray: #ccc;
--light-gray: #eee;
--near-white: #f4f4f4;
}
.collapse {
border-collapse: collapse;
border-spacing: 0;

4
src/_text-align.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
TEXT ALIGN

4
src/_text-decoration.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
TEXT DECORATION

4
src/_text-transform.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
TEXT TRANSFORM

4
src/_type-scale.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
TYPE SCALE

4
src/_typography.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
TYPOGRAPHY

4
src/_vertical-align.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
VERTICAL ALIGN

4
src/_visibility.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
VISIBILITY

4
src/_white-space.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
WHITE SPACE

4
src/_widths.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
WIDTHS

4
src/_word-break.css
View File

@ -1,7 +1,3 @@
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
WORD BREAK