baseguide - npm Package Compare versions

Comparing version 1.9.0 to 2.0.0

gulpfile.js

@@ -6,6 +6,6 @@ var gulp = require('gulp');
 var config = {
-	'src': './',
-	'dest': 'dist/',
-	'minify': true,
-	'sourcemaps': false
+  'src': './',
+  'dest': 'dist/',
+  'minify': true,
+  'sourcemaps': false
 };
@@ -16,4 +16,4 @@
 gulp.task('html', function() {
-	return gulp.src('*.html')
-		.pipe(browserSync.stream());
+  return gulp.src('*.html')
+    .pipe(browserSync.stream());
 });
@@ -23,21 +23,22 @@
 gulp.task('styles', function() {
-	return gulp.src(config.src + 'scss/**/*.scss')
-		.pipe($.if(config.sourcemaps, $.sourcemaps.init()))
-		.pipe($.sass({
-			precision: 8,
-			outputStyle: 'expanded'
-		}).on('error', function(error) {
-			$.util.log($.util.colors.red(error.message));
-			this.emit('end');
-		}))
-		.pipe($.postcss([
-			autoprefixer()
-		]))
-		.pipe(gulp.dest(config.dest + 'css'))
-		.pipe(browserSync.stream())
-		.pipe($.cleanCss({compatibility: 'ie8'}))
-		.pipe($.if(config.sourcemaps, $.sourcemaps.write()))
-		.pipe($.rename({suffix: '.min'}))
-		.pipe($.if(config.minify, gulp.dest(config.dest + 'css')))
-		.pipe(browserSync.stream());
+  return gulp.src(config.src + 'scss/*.scss')
+    .pipe($.if(config.sourcemaps, $.sourcemaps.init()))
+    .pipe($.sass({
+      precision: 8,
+      outputStyle: 'expanded'
+    }).on('error', function(error) {
+      $.util.log($.util.colors.red(error.message));
+      this.emit('end');
+    }))
+    .pipe($.postcss([
+      autoprefixer()
+    ]))
+    .pipe($.if(config.sourcemaps, $.sourcemaps.write()))
+    .pipe(gulp.dest(config.dest + 'css'))
+    .pipe(browserSync.stream())
+    .pipe($.cleanCss({compatibility: 'ie9'}))
+    .pipe($.if(config.sourcemaps, $.sourcemaps.write()))
+    .pipe($.rename({suffix: '.min'}))
+    .pipe($.if(config.minify, gulp.dest(config.dest + 'css')))
+    .pipe(browserSync.stream());
 });
@@ -47,8 +48,8 @@
 gulp.task('stylelint', function() {
-	return gulp.src(config.src + 'scss/**/*.scss')
-		.pipe($.postcss([
-			require('stylelint')
-		], {
-			syntax: require('postcss-scss')
-		}));
+  return gulp.src(config.src + 'scss/**/*.scss')
+    .pipe($.postcss([
+      require('stylelint')
+    ], {
+      syntax: require('postcss-scss')
+    }));
 });
@@ -58,26 +59,34 @@
 gulp.task('scripts', function() {
-	return gulp.src(config.src + 'js/*.js')
-		.pipe($.include().on('error', function(error) {
-			$.util.log($.util.colors.red(error.message));
-			this.emit('end');
-		}))
-		.pipe(gulp.dest(config.dest + 'js'))
-		.pipe(browserSync.stream())
-		.pipe($.if(config.sourcemaps, $.sourcemaps.init()))
-		.pipe($.uglify().on('error', function(error) {
-			$.util.log($.util.colors.red(error.message));
-			this.emit('end');
-		}))
-		.pipe($.if(config.sourcemaps, $.sourcemaps.write()))
-		.pipe($.rename({suffix: '.min'}))
-		.pipe($.if(config.minify, gulp.dest(config.dest + 'js')))
-		.pipe(browserSync.stream());
+  return gulp.src(config.src + 'js/*.js')
+    .pipe($.include().on('error', function(error) {
+      $.util.log($.util.colors.red(error.message));
+      this.emit('end');
+    }))
+    .pipe(gulp.dest(config.dest + 'js'))
+    .pipe(browserSync.stream())
+    .pipe($.if(config.sourcemaps, $.sourcemaps.init()))
+    .pipe($.uglify().on('error', function(error) {
+      $.util.log($.util.colors.red(error.message));
+      this.emit('end');
+    }))
+    .pipe($.if(config.sourcemaps, $.sourcemaps.write()))
+    .pipe($.rename({suffix: '.min'}))
+    .pipe($.if(config.minify, gulp.dest(config.dest + 'js')))
+    .pipe(browserSync.stream());
 });
 
+// Lint javascript
+gulp.task('eslint', function() {
+  return gulp.src(config.src + 'js/**/*.js')
+    .pipe($.eslint())
+    .pipe($.eslint.format())
+    .pipe($.eslint.failAfterError());
+});
+
 // Optimize images
 gulp.task('images', function() {
-	return gulp.src(config.src + 'img/**/*.{gif,jpg,png,svg}')
-		.pipe($.cache($.imagemin()))
-		.pipe(gulp.dest(config.dest + 'img'))
-		.pipe(browserSync.stream());
+  return gulp.src(config.src + 'img/**/*.{gif,jpg,png,svg}')
+    .pipe($.cache($.imagemin()))
+    .pipe(gulp.dest(config.dest + 'img'))
+    .pipe(browserSync.stream());
 });
@@ -90,19 +99,19 @@
 gulp.task('serve', ['build'], function() {
-	browserSync.init({
-		server: true,
-		notify: false,
-		snippetOptions: {
-			rule: {
-				match: /<\/body>/i
-			}
-		}
-		/*
-		proxy: 'example.com',
-		files: config.dest,
-		serveStatic: [{
-			route: '', // remote path
-			dir: config.dest // local path
-		}],
-		*/
-	});
+  browserSync.init({
+    server: true,
+    notify: false,
+    snippetOptions: {
+      rule: {
+        match: /<\/body>/i
+      }
+    }
+    /*
+    proxy: 'example.com',
+    files: config.dest,
+    serveStatic: [{
+      route: '', // remote path
+      dir: config.dest // local path
+    }],
+    */
+  });
 });
@@ -112,6 +121,6 @@
 gulp.task('watch', function() {
-	gulp.watch('*.html', ['html']);
-	gulp.watch(config.src + 'scss/**/*.scss', ['styles']);
-	gulp.watch(config.src + 'js/**/*.js', ['scripts']);
-	gulp.watch(config.src + 'img/**/*.{gif,jpg,png,svg}', ['images']);
+  $.watch(config.src + '*.html', function() { gulp.start('html') });
+  $.watch(config.src + 'scss/**/*.scss', function() { gulp.start('styles') });
+  $.watch(config.src + 'js/**/*.js', function() { gulp.start('scripts') });
+  $.watch(config.src + 'img/**/*.{gif,jpg,png,svg}', function() { gulp.start('images') });
 });
@@ -118,0 +127,0 @@

package.json

 {
   "name": "baseguide",
   "description": "Lightweight and robust CSS framework for prototyping and production code.",
-  "version": "1.9.0",
+  "version": "2.0.0",
   "keywords": [
@@ -19,20 +19,22 @@ "css",
   "devDependencies": {
-    "autoprefixer": "^6.7.7",
-    "browser-sync": "^2.18.8",
+    "autoprefixer": "^7.1.2",
+    "browser-sync": "^2.18.13",
     "gulp": "^3.9.1",
     "gulp-cache": "^0.4.6",
-    "gulp-clean-css": "^3.0.4",
+    "gulp-clean-css": "^3.7.0",
+    "gulp-eslint": "^4.0.0",
     "gulp-if": "^2.0.2",
-    "gulp-imagemin": "^3.1.1",
+    "gulp-imagemin": "^3.3.0",
     "gulp-include": "^2.3.1",
     "gulp-load-plugins": "^1.5.0",
-    "gulp-postcss": "^6.4.0",
+    "gulp-postcss": "^7.0.0",
     "gulp-rename": "^1.2.2",
     "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^2.4.1",
-    "gulp-uglify": "^2.1.2",
+    "gulp-sourcemaps": "^2.6.0",
+    "gulp-uglify": "^3.0.0",
     "gulp-util": "^3.0.8",
-    "postcss-scss": "^0.4.1",
-    "stylelint": "^7.9.0",
-    "stylelint-config-standard": "^16.0.0"
+    "gulp-watch": "^4.3.11",
+    "postcss-scss": "^1.0.2",
+    "stylelint": "^8.0.0",
+    "stylelint-config-standard": "^17.0.0"
   },
@@ -44,4 +46,4 @@ "browserslist": [
     "ie >= 9",
-    "safari >= 6"
+    "safari >= 8"
   ]
 }

README.md

@@ -10,3 +10,3 @@ # [Baseguide](http://basegui.de)
 * CSS-only custom form controls
-* Robust grid system with flexbox support
+* Robust flexbox grid
 * Extendable breakpoint system
@@ -17,4 +17,4 @@ * Consistent vertical rhythm and modular scale
 ## Table of Contents
-* [Installation](#installation)
-* [Usage](#usage)
+* [Install](#install)
+* [Development](#development)
 * [Breakpoints](#breakpoints)
@@ -28,31 +28,41 @@ * [Grid](#grid)
 
-## Installation
+## Install
 
-**Install from npm**
+### Download
 
-```sh
-npm install baseguide
-```
+* [baseguide.css](https://raw.githubusercontent.com/slavanga/baseguide/master/dist/css/baseguide.css) (uncompressed)
+* [baseguide.min.css](https://raw.githubusercontent.com/slavanga/baseguide/master/dist/css/baseguide.min.css) (compressed)
 
-**Clone the Repo**
+### CDN
 
-```sh
-git clone -b master https://github.com/slavanga/baseguide
+Link directly to Baseguide on [cdnjs](https://cdnjs.com/libraries/baseguide).
+
+```html
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/baseguide/2.0.0/css/baseguide.min.css">
 ```
 
-**Load from CDN**
+### Package Managers
 
-[https://cdnjs.com/libraries/baseguide](https://cdnjs.com/libraries/baseguide)
+[npm](https://www.npmjs.com/package/baseguide): `npm install baseguide`
 
-**Download**
+[yarn](https://yarnpkg.com/en/package/baseguide): `yarn add baseguide`
 
-[https://github.com/slavanga/baseguide/archive/master.zip](https://github.com/slavanga/baseguide/archive/master.zip)
 
+## Development
 
-## Usage
+### Dependencies
+Use `npm install` or `yarn install` to install the dev dependencies.
 
+### Gulp
+The included gulpfile takes care of compiling, optimizing and minifying your assets.
+
+| Command           | Description                                                                                              |
+| :---------------- | :------------------------------------------------------------------------------------------------------- |
+| `gulp`            | Build files, watch for changes and start a local server using [Browsersync](https://www.browsersync.io/) |
+| `gulp build`      | Build files once                                                                                         |
+| `gulp watch`      | Watch files and build when a change occurs                                                               |
+
 ### Sass
-
 Default variables can be changed before importing Baseguide.
-Take a look at the [_settings.scss](https://github.com/slavanga/baseguide/blob/master/scss/baseguide/_settings.scss) file to get an overview of all variables.
+Take a look at the [_settings.scss](https://github.com/slavanga/baseguide/blob/master/scss/baseguide/settings/_settings.scss) file to see all variables.
 
@@ -67,10 +77,3 @@ ```scss
 
-### Gulp
 
-The included gulpfile takes care of compiling, optimizing and minifying your assets. Running the following command will install all dependencies and start a local server using [Browsersync](https://www.browsersync.io/).
-
-```sh
-npm install && gulp
-```
-
 ## Breakpoints
@@ -83,6 +86,7 @@ Breakpoints can easily be configured using the ```$mq-breakpoints``` map. Note that the breakpoints have to be sorted from small to large.
 $mq-breakpoints: (
-  xs: 480px,
-  sm: 768px,
-  md: 992px,
-  lg: 1200px
+  xs: 0,
+  sm: 400px,
+  md: 680px,
+  lg: 960px,
+  xl: 1200px
 );
@@ -99,3 +103,3 @@ ```
 @include mq(md) {
-  
+
 }
@@ -107,3 +111,3 @@ ```
 ```css
-@media (min-width: 62em) {
+@media (min-width: 42.5em) {
 
@@ -115,24 +119,6 @@ }
 
-#### Legacy Support
-To support browsers without native media query support you could use [respond.js](https://github.com/scottjehl/Respond).
-
-A static solution without Javascript is possible by setting ```$mq-responsive``` to ```false```. The code below generates an additional stylesheet where only styles in large (lg) media queries are included.
-
-```scss
-// oldie.scss
-$mq-responsive: false;
-$mq-static-breakpoint: lg;
-
-@import 'main';
-```
-
-Include the generated CSS file after the rest of your styles to serve a fixed width layout to legacy browsers.
-```html
-<!--[if lt IE 9]><link rel="stylesheet" href="css/oldie.css"><![endif]-->
-```
-
 ### Breakpoint Loop
 The ```loop-breakpoints``` mixin iterates through all breakpoints. It sets three global variables and outputs the ```@content``` for each breakpoint.
 ```scss
-@include loop-breakpoints($mq: true, $inclusive: false, $breakpoint-keys: $mq-breakpoints-list) {
+@include loop-breakpoints($breakpoints: $mq-breakpoints, $inclusive: true, $mq: true) {
   @debug $breakpoint;
@@ -163,4 +149,18 @@ @debug $is-first-breakpoint;
 ## Grid
-The grid system is inspired by [Bootstrap](https://getbootstrap.com/css/#grid).
+The grid system is responsive and follows the mobile first pattern. It offers predefined classes for quick layouts as well as powerful mixins for more semantic layouts.
 
+The number of columns is controlled by the ```$grid-columns``` variable which defaults to 12.
+
+
+### Basic Example
+
+```html
+<div class="container">
+  <div class="row">
+    <div class="col col-md-6"></div>
+    <div class="col col-md-6"></div>
+  </div>
+</div>
+```
+
 ### Gutters
@@ -215,4 +215,2 @@ The gutters are controlled by the ```$grid-gutter``` variable. It can either be a global value across all breakpoints or a map with gutter values per breakpoint.
 
-Tip: You can turn off the default columns output by setting ```$grid-columns-output``` to ```false```.
-
 #### Two Column Layout
@@ -223,7 +221,7 @@
   .col-content {
-    @include column(8);
+    @include column(80%);
   }
 
   .col-sidebar {
-    @include column(4);
+    @include column(40%);
   }
@@ -268,10 +266,6 @@ }
 
-### Flexbox
-The flexbox grid can be activated by setting ```$grid-flexbox``` to ```true```. This is no kill switch for older browsers as the floats are kept in place for a basic fallback. Browsers that support flexbox and flex-wrap ([Support table](http://caniuse.com/#search=flexbox)) will get these benefits:
+### Float Fallback
+There is a float fallback to make the grid work in browsers that don’t support flexbox. This fallback can be disabled by setting ```$grid-fallback: false```.
 
-* CSS-only equal height columns
-* Easy vertical and horizontal alignment of columns
-* Ordering and reversing of columns using CSS
 
-
 ## Forms
@@ -292,29 +286,10 @@
 The custom forms component was designed with progressive enhancement in mind.
-While the controls are functional in all browsers the following ones get the fully enhanced experience:
+IE 9 doesn’t support the custom select styles. All other [supported browsers](#browser-support) get the fully enhanced experience.
 
-* Android 2.3+
-* Chrome
-* Firefox 35+
-* IE 10+
-* Mobile Safari 4+
-* Safari 5.1+
-* Opera 15+
 
-You can set the variable ```$use-custom-forms``` to ```false``` to disable custom form styles in all browsers.
-
-### Caveats
-In iOS versions prior to 5.1.1 the code below is required to make custom radio buttons and checkboxes work.
-
-```js
-if (document.addEventListener) {
-  document.addEventListener('click', function() {}, false);
-}
-```
-
-
 ## Browser Support
 * Latest stable: Chrome, Firefox, Opera
-* IE 8+
-* Safari 6+
-* Mobile Safari 6+
+* IE 9+
+* Safari 8+
+* Mobile Safari 8+
 * Android Browser 2.3+
@@ -321,0 +296,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

241535

increased by21.25%

Number of package files

44

increased by33.33%

Worsened metrics

Dev dependency count

20

increased by11.11%

Lines of code

2299

decreased by-36.63%

Number of lines in readme file

297

decreased by-7.76%

No dependency changes