basscss - npm Package Compare versions

Comparing version 4.2.1 to 4.2.4

bower.json

 {
   "name": "basscss",
-  "version": "4.2.0",
+  "version": "4.2.4",
   "homepage": "https://github.com/jxnblk/basscss",
@@ -9,3 +9,3 @@ "authors": [
   "description": "Low-level CSS Toolkit",
-  "main": "basscss.css",
+  "main": "./css/basscss.css",
   "keywords": [
@@ -12,0 +12,0 @@ "CSS",

docs/src/model.js

@@ -111,14 +111,14 @@
       title: 'Basics',
-      description: 'CSS and Web Design Fundamentals',
+      description: 'Understanding the basics of designing for the web with CSS is essential to using Basscss effectively. This guide covers the fundamentals to help get you started.',
       link: '/docs/guides/basics',
       sections: [
-        { title: 'Document Structure', link: '/docs/guides/basics/#markup' },
-        { title: 'Multiclass CSS Pattern', link: '/docs/guides/basics/#multi-class-pattern' },
-        { title: 'Typography', link: '/docs/guides/basics/#typography' },
-        { title: 'Block-Level and Inline Elements', link: '/docs/guides/basics/#block-level-inline' },
-        { title: 'Display Property', link: '/docs/guides/basics/#display' },
+        { title: 'Document Structure', link: '/docs/guides/basics/#document-structure' },
+        { title: 'Multiclass CSS Pattern', link: '/docs/guides/basics/#multiclass-css-pattern' },
+        { title: 'Typography', link: '/docs/guides/basics/#writing-and-typography' },
+        { title: 'Block-Level and Inline Elements', link: '/docs/guides/basics/#block-level-and-inline-elements' },
+        { title: 'Display Property', link: '/docs/guides/basics/#display-property' },
         { title: 'Box Model', link: '/docs/guides/basics/#box-model' },
         { title: 'Floats', link: '/docs/guides/basics/#floats' },
         { title: 'Widths', link: '/docs/guides/basics/#widths' },
-        { title: 'Media Queries and Mobile-First Approach', link: '/docs/guides/basics/#media-queries' },
+        { title: 'Media Queries and Mobile-First Approach', link: '/docs/guides/basics/#media-queries-and-mobile-first-approach' },
         { title: 'Positions', link: '/docs/guides/basics/#positions' },
@@ -130,3 +130,3 @@ { title: 'Extending Basscss', link: '/docs/guides/basics/#extending-basscss' }
       title: 'Page Layout',
-      description: 'Using the Grid System to Create an Entire Page',
+      description: 'Creating page layouts in Basscss is incredibly fast and flexible. This guide will walk you through common layout patterns to create an entire page with a basic information hierarchy.',
       link: '/docs/guides/layout',
@@ -144,3 +144,3 @@ sections: [
       title: 'UI Elements',
-      description: 'Styling Custom Controls for Interactivity',
+      description: 'Basscss can be used to create many different user interface elements out of the box. With utility styles and a thoughtfully-architected templating system, you can keep CSS bloat to a minimum, while making iterative design changes to partials and components.',
       link: '/docs/guides/ui',
@@ -163,14 +163,14 @@ sections: [
       title: 'Tips & Tricks',
-      description: 'Getting the Most Out of Basscss',
+      description: 'Basscss is a versatile starting point for any project. These tips and tricks will help you build on top of its foundation in an elegant and maintainable way.',
       link: '/docs/guides/tips',
       sections: [
         { title: 'Avoid Overrides', link: '/docs/guides/tips/#avoid-overrides' },
-        { title: 'Utility Styles are Immutable', link: '/docs/guides/tips/#utility-styles' },
+        { title: 'Utility Styles are Immutable', link: '/docs/guides/tips/#utility-styles-are-immutable' },
         { title: 'Look Before Adding', link: '/docs/guides/tips/#look-before-adding' },
         { title: 'Avoid Magic Numbers', link: '/docs/guides/tips/#avoid-magic-numbers' },
-        { title: 'Don’t Use Contextual Selectors', link: '/docs/guides/tips/#contextual-selectors' },
+        { title: 'Don’t Use Contextual Selectors', link: '/docs/guides/tips/#don-t-use-contextual-selectors' },
         { title: 'Handle Complexity in Markup', link: '/docs/guides/tips/#handle-complexity-in-markup' },
         { title: 'Keep Specificity Low', link: '/docs/guides/tips/#keep-specificity-low' },
-        { title: 'Don’t Nest Selectors', link: '/docs/guides/tips/#dont-nest-selectors' },
-        { title: 'Don’t Use IDs as Selectors', link: '/docs/guides/tips/#dont-use-ids' },
+        { title: 'Don’t Nest Selectors', link: '/docs/guides/tips/#don-t-nest-selectors' },
+        { title: 'Don’t Use IDs as Selectors', link: '/docs/guides/tips/#don-t-use-ids-as-selectors' },
         { title: 'Separate Structure and Skin', link: '/docs/guides/tips/#separate-structure-and-skin' }
@@ -185,4 +185,8 @@ ]
       sections: [
-        { title: 'Principles', link: '/docs/principles/#principles' },
-        { title: 'Organization', link: '/docs/principles/#organization' },
+        { title: 'Open/Closed Principle', link: '/docs/principles/#follow-the-open-closed-principle' },
+        { title: 'Design with Reuse in Mind', link: '/docs/principles/#design-with-reuse-in-mind' },
+        { title: 'Don’t Make Assumptions', link: '/docs/principles/#don-t-make-assumptions' },
+        { title: 'Clarity Over Cleverness', link: '/docs/principles/#clarity-over-cleverness' },
+        { title: 'Balance Consistency with Flexibility', link: '/docs/principles/#balance-consistency-with-flexibility' },
+        { title: 'Organizing Principles', link: '/docs/principles/#organizing-principles' },
         { title: 'Naming Conventions', link: '/docs/principles/#naming-conventions' },
@@ -211,3 +215,2 @@ ]
     },
-    modules: { title: 'Modules', link: '/docs/modules' },
     styles: { title: 'Table of Styles', link: '/docs/styles' },
@@ -214,0 +217,0 @@ stats: { title: 'Stats', link: '/docs/stats' },

package.json

 {
   "name": "basscss",
-  "version": "4.2.1",
+  "version": "4.2.4",
   "description": "Low-level CSS toolkit",
@@ -8,13 +8,12 @@ "style": "src/basscss.css",
     "basscss-background-images": "0.0.4",
-    "basscss-base-buttons": "^1.0.0",
-    "basscss-base-forms": "^1.0.2",
+    "basscss-base-buttons": "^1.0.3",
+    "basscss-base-forms": "^1.0.4",
     "basscss-base-reset": "0.0.3",
-    "basscss-base-tables": "^0.1.0",
+    "basscss-base-tables": "^0.1.1",
     "basscss-base-typography": "0.0.3",
     "basscss-color-base": "0.0.2",
     "basscss-color-borders": "0.0.2",
-    "basscss-color-buttons": "^0.1.1",
     "basscss-color-forms": "0.0.2",
     "basscss-color-forms-dark": "0.0.2",
-    "basscss-color-tables": "0.0.2",
+    "basscss-color-tables": "^0.1.0",
     "basscss-colors": "0.0.2",
@@ -26,4 +25,3 @@ "basscss-defaults": "^0.2.0",
     "basscss-ui-utility-button-sizes": "^1.0.0",
-    "basscss-ui-utility-disclosure-states": "0.0.6",
-    "basscss-ui-utility-groups": "0.0.4",
+    "basscss-ui-utility-groups": "^1.0.0",
     "basscss-utility-headings": "0.0.6",
@@ -34,3 +32,12 @@ "basscss-utility-layout": "0.0.2",
     "basscss-utility-white-space": "0.0.3",
-    "flex-object": "^1.0.4"
+    "flex-object": "^1.0.4",
+    "basscss-button-gray": "0.0.1",
+    "basscss-button-nav-light": "0.0.2",
+    "basscss-button-blue": "0.0.1",
+    "basscss-button-red": "0.0.1",
+    "basscss-button-nav-dark": "0.0.3",
+    "basscss-button-light-gray": "0.0.2",
+    "basscss-button-nav-tab": "0.0.2",
+    "basscss-button-blue-outline": "0.0.3",
+    "basscss-color-buttons": "^1.0.1"
   },
@@ -67,3 +74,2 @@ "devDependencies": {
     "gulp-zip": "^2.0.2",
-    "gulp-marked": "^1.0.0",
     "marked-example": "^1.0.3",
@@ -74,3 +80,11 @@ "gulp-footer": "^1.0.5",
     "highlight.js": "^8.4.0",
-    "humanize-plus": "^1.5.0"
+    "humanize-plus": "^1.5.0",
+    "swig": "^1.4.2",
+    "swig-marked": "0.0.1",
+    "front-matter": "^0.2.0",
+    "gulp-data": "^1.1.1",
+    "gulp-marked": "^1.0.0",
+    "through2": "^0.6.3",
+    "basscss-highlight": "0.0.1",
+    "basscss-button-nav-tab": "0.0.3"
   },
@@ -90,3 +104,2 @@ "basscss": {
       "basscss-ui-utility-groups",
-      "basscss-ui-utility-disclosure-states",
       "basscss-positions",
@@ -96,6 +109,14 @@ "basscss-grid",
       "basscss-color-base",
+      "basscss-color-buttons",
       "basscss-color-forms",
       "basscss-color-forms-dark",
       "basscss-color-tables",
-      "basscss-color-buttons",
+      "basscss-button-blue",
+      "basscss-button-blue-outline",
+      "basscss-button-gray",
+      "basscss-button-light-gray",
+      "basscss-button-red",
+      "basscss-button-nav-light",
+      "basscss-button-nav-dark",
+      "basscss-button-nav-tab",
       "basscss-colors",
@@ -102,0 +123,0 @@ "basscss-color-borders",

tasks/module-docs.js

 
 var fs = require('fs');
-var gulp = require('gulp');
 var path = require('path');
-var rename = require('gulp-rename');
-var header = require('gulp-header');
-var footer = require('gulp-footer');
-var marked = require('gulp-marked');
-var markedExample = require('marked-example');
 var camelcase = require('camel-case');
+var swig = require('swig');
 
 module.exports = function() {
 
-  var exampleOptions = {
-    classes: {
-      container: 'mb2 bg-darken-1 rounded',
-      rendered: 'p2',
-      code: 'm0 p2 bg-darken-1 rounded-bottom'
-    }
-  };
+  var modules = require('../package.json').basscss.modules;
+  var model = new require('../docs/src/model.js')();
 
-  var markedOptions = {
-    renderer: { code: markedExample(exampleOptions) }
-  };
+  require('swig-highlight').apply(swig);
+  swig.setDefaults({
+    loader: swig.loaders.fs(path.resolve(__dirname, '../docs/src/templates'))
+  });
 
-  var sources = require('../package.json').basscss;
-
-  var modules = sources.modules;
-
   modules.forEach(function(module) {
     var filename = './node_modules/' + module + '/README.md';
-    var data = require('../node_modules/' + module + '/package.json');
-    var html = '{% extends "layouts/module.html" %}\n' + 
-      '{% set page = modules.' + camelcase(module) + ' %}\n' +
-      '{% set isdocs = true %}\n' +
-      '{% set module = modules.' + camelcase(module) + ' %}\n' +
-      '{% block content %}\n\n' +
-      '<!-- {{ module.header | safe }} -->\n' +
-      '<div class="flex flex-wrap flex-center mb3">\n' +
-      '<div class="flex-auto">\n' +
-      '<h1 class="h4 m0">{{ module.name }}\n' +
-      '<span class="h6">v{{ module.version }}</span>\n' +
-      '{% if module.optional %}' +
-      '<span class="h6 caps red">Optional</span>\n' +
-      '{% endif %}' +
-      '</h1>\n' +
-      '<h1 class="caps m0">{{ module.title }}</h1>\n' +
-      '</div>\n' +
-      '<div class="mxn1 mb2">\n' +
-      '<a href="{{ module.npmLink }}" class="h6 button button-narrow button-nav-light">NPM</a>\n' +
-      '<a href="{{ module.githubLink }}" class="h6 button button-narrow button-nav-light">Github</a>\n' +
-      '</div>\n' +
-      '</div>\n' +
+    var html = '{% extends "layouts/docs.html" %}\n' + 
+      '{% block content %}\n' +
       '{{ module.content | safe }}\n' +
-      '\n\n{% endblock %}\n';
+      '{% endblock %}\n';
 
-    var dir = path.join(__dirname, '../docs/src/templates/docs/modules/' + module);
+    var tpl = swig.compile(html, { filename: '/docs/modules/' + camelcase(module) + '.html' });
+    model.page = model.modules[camelcase(module)];
+    model.module = model.modules[camelcase(module)];
+
+    var rendered = tpl(model);
+
+    var dir = path.join(__dirname, '../docs/modules/' + module);
     if (!fs.existsSync(dir)) fs.mkdirSync(dir);
-    fs.writeFileSync(dir + '/index.html', html);
+    fs.writeFileSync(dir + '/index.html', rendered);
   });
@@ -61,0 +34,0 @@

tasks/swig.js

@@ -6,3 +6,10 @@
 
-var data = require('../docs/src/model');
+var fm = require('front-matter');
+var rename = require('gulp-rename');
+var marked = require('marked');
+var markedExample = require('marked-example');
+var through = require('through2');
+
+var model = require('../docs/src/model');
+
 var options = {
@@ -18,5 +25,42 @@ setup: function(swig) {
   },
-  data: data
+  data: model
 };
 
+var exampleOptions = {
+  classes: {
+    container: 'mb2 bg-darken-1 rounded',
+    rendered: 'p2',
+    code: 'm0 p2 bg-darken-1 rounded-bottom'
+  }
+};
+
+var renderer = new marked.Renderer();
+renderer.code = markedExample(exampleOptions);
+
+var mdSwig = function(opt) {
+  return through.obj(function(file, encoding, callback) {
+    var contents = file.contents.toString();
+    var matter = fm(contents);
+    var html = marked(matter.body, { renderer: renderer });
+    var layout = matter.attributes.layout || null;
+    var page = matter.attributes.page || null;
+    var isguide = matter.attributes.isguide || false;
+    html = '{% block content %}\n' + html + '\n{% endblock %}\n';
+    if (isguide) {
+      html = '{% set isguide = true %}\n' + html;
+    }
+    if (page) {
+      html = '{% set page = ' + page + ' %}\n' + html;
+    }
+    if (layout) {
+      html = '{% extends "' + layout + '" %}\n' + html;
+    } else {
+      html = '{% extends "layouts/docs.html" %}\n' + html;
+    }
+    file.contents = new Buffer(html);
+    this.push(file);
+    callback();
+  });
+};
+
 module.exports = function() {
@@ -27,8 +71,12 @@ gulp.src([
       '!./docs/src/templates/partials/**/*',
-      '!./docs/src/templates/macros/**/*',
-      '!./docs/src/templates/examples/**/*'
     ])
     .pipe(swig(options))
     .pipe(gulp.dest('./'));
+
+  gulp.src('./docs/src/templates/**/*.md')
+    .pipe(mdSwig())
+    .pipe(rename({ extname: '.html' }))
+    .pipe(swig(options))
+    .pipe(gulp.dest('./'));
 };
 

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10230999

increased by0.75%

Number of low supply chain risk alerts

53

decreased by-3.64%

Worsened metrics

Dependency count

33

increased by26.92%

Dev dependency count

43

increased by19.44%

Number of package files

264

decreased by-37.14%

Lines of code

12961

decreased by-13.69%

Dependency changes

• + Addedbasscss-button-blue@0.0.1

• + Addedbasscss-button-blue-outline@0.0.3

• + Addedbasscss-button-gray@0.0.1

• + Addedbasscss-button-light-gray@0.0.2

• + Addedbasscss-button-nav-dark@0.0.3

• + Addedbasscss-button-nav-light@0.0.2

• + Addedbasscss-button-nav-tab@0.0.2

• + Addedbasscss-button-red@0.0.1

• + Addedbasscss-button-blue-outline@0.0.3(transitive)

• + Addedbasscss-button-nav-dark@0.0.3(transitive)

• + Addedbasscss-button-nav-light@0.0.2(transitive)

• + Addedbasscss-color-buttons@1.0.2(transitive)

• + Addedbasscss-color-tables@0.1.4(transitive)

• + Addedbasscss-ui-utility-groups@1.0.1(transitive)

• - Removedbasscss-ui-utility-disclosure-states@0.0.6

• - Removedbasscss-color-buttons@0.1.2(transitive)

• - Removedbasscss-color-tables@0.0.2(transitive)

• - Removedbasscss-ui-utility-disclosure-states@0.0.6(transitive)

• - Removedbasscss-ui-utility-groups@0.0.4(transitive)

• Updatedbasscss-base-buttons@^1.0.3

• Updatedbasscss-base-forms@^1.0.4

• Updatedbasscss-base-tables@^0.1.1

• Updatedbasscss-color-buttons@^1.0.1

• Updatedbasscss-color-tables@^0.1.0

• Updatedbasscss-ui-utility-groups@^1.0.0