Merge pull request #100 from papercss/gulpfile

Each component have its own css file in dist/components

gulpfile.js

@@ -3,13 +3,13 @@ var gulp = require('gulp'),
   	less = require('gulp-less'),
     cleanCSS = require('gulp-clean-css'),
     rename = require('gulp-rename');
- 
+
 gulp.task('webserver', function() {
   connect.server({
     livereload: true
   });
 });
- 
+
 gulp.task('less', function() {
   gulp.src('src/styles.less')
     .pipe(less())
@@ -18,7 +18,7 @@ gulp.task('less', function() {
     .pipe(gulp.dest('dist'))
     .pipe(connect.reload());
 });
- 
+
 gulp.task('watch', function() {
   gulp.watch('src/*.less', ['less']);
 });
@@ -29,6 +29,13 @@ gulp.task('minify-css', () => {
     .pipe(rename('paper.min.css'))
     .pipe(gulp.dest('dist'));
 });
- 
+
+gulp.task('components', () => {
+  gulp.src('src/*.less')
+    .pipe(less())
+    .pipe(cleanCSS({format: 'beautify'}))
+    .pipe(gulp.dest('dist/components'));
+});
+
 gulp.task('default', ['less', 'webserver', 'watch']);
-gulp.task('build', ['less', 'minify-css'])
+gulp.task('build', ['components', 'less', 'minify-css']);

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "start": "node node_modules/gulp/bin/gulp.js",
     "build": "node node_modules/gulp/bin/gulp.js build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "node node_modules/gulp/bin/gulp.js build"
   },
   "repository": {
     "type": "git",

src/alerts.less

@@ -1,3 +1,6 @@
+@import './colors.less';
+@import './borders.less';
+
 .alert{
     .border;
     padding: 15px;
@@ -15,4 +18,4 @@
     }
 }
 
-.make-alert-color-classes();
+.make-alert-color-classes();

src/article.less

@@ -1,5 +1,6 @@
-article {
+@import './colors.less';
 
+article {
 	.article-title {
 		font-size: 3rem;
 	}

src/badges.less

@@ -1,3 +1,6 @@
+@import './colors.less';
+@import './borders.less';
+
 .badge {
   .border;
 
@@ -22,4 +25,4 @@
   }
 }
 
-.make-badge-color-classes();
+.make-badge-color-classes();

src/borders.less

@@ -1,3 +1,5 @@
+@import './colors.less';
+
 .border {
     border: 2px solid @primary;
 }

src/buttons.less

@@ -1,3 +1,8 @@
+@import './colors.less';
+@import './shadows.less';
+@import './borders.less';
+@import './forms.less'; // .disabled
+
 button, .paper-btn, [type="button"] {
     .shadow;
     align-self:center;

src/cards.less

@@ -1,3 +1,6 @@
+@import './colors.less';
+@import './shadows.less';
+
 .card {
   .shadow;
   .shadow-hover;
@@ -55,4 +58,4 @@
     border: 0;
     border-radius: 0;
   }
-}
+}

src/code.less

@@ -1,3 +1,5 @@
+@import './colors.less';
+
 code {
     padding: 2px 4px;
     font-size: 80%;

src/container.less

@@ -1,3 +1,5 @@
+@import './colors.less';
+
 @large-screen: ~"screen and (max-width: 1200px)";
 @medium-screen: ~"screen and (max-width: 992px)";
 @small-screen: ~"screen and (max-width: 768px)";
@@ -53,4 +55,3 @@ hr:after {
         margin-bottom: 0;
     }
 }
-

src/fonts.less

@@ -1,7 +1,9 @@
+@import './colors.less';
+
 @import url('https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC');
 
 @global-font-size: 20px;
-@header-font: 'Patrick Hand SC'; 
+@header-font: 'Patrick Hand SC';
 @body-font: 'Neucha';
 @font-color: @primary;
 
@@ -43,4 +45,4 @@ h6 {
 }
 .text-right {
     text-align: right;
-}
+}

src/forms.less

@@ -1,3 +1,5 @@
+@import './colors.less';
+
 input, select, textarea {
     display: block;
     background:transparent;
@@ -100,4 +102,4 @@ input, select, textarea {
 fieldset.form-group {
     border: none;
     padding: 0;
-}
+}

src/images.less

@@ -1,3 +1,6 @@
+@import './colors.less';
+@import './borders.less';
+
 img {
     max-width: 100%;
     height: auto;
@@ -20,4 +23,4 @@ img {
         border: 0;
         border-radius: 0;
     }
-}
+}

src/popovers.less

@@ -1,3 +1,6 @@
+@import './colors.less';
+@import './borders.less';
+
 // Core popovers
 [popover-top],
 [popover-right],

src/tables.less

@@ -1,3 +1,5 @@
+@import './colors.less';
+
 table {
     box-sizing: border-box;
     width: 100%;
@@ -28,4 +30,4 @@ table {
     &.table-alternating tbody tr:nth-of-type(even) {
         color: lighten(@primary, 25%);
     }
-}
+}

src/tabs.less

@@ -1,3 +1,5 @@
+@import './colors.less';
+
 .tabs {
     .content {
         display: none;
@@ -33,6 +35,6 @@
             display:block;
         }
     }
-    
+
     .loop(5);
-}
+}