From 958b1fe5355599a043445388e1df8b45be9bf50a Mon Sep 17 00:00:00 2001 From: Daniel Schildt Date: Tue, 12 Sep 2017 13:42:11 +0300 Subject: [PATCH 1/3] docs(README.md) update details - Fix details about minimum Node.js versions required. - Fix capitalization of tool names (SASS --> Sass). - Improve structure of English language sentences. - Run `gulp dev:doc` to update Table of Contents. - Improve Markdown syntax to fix markdownlint warnings: - MD022/blanks-around-headers: Headers should be surrounded by blank lines - MD009/no-trailing-spaces: Trailing spaces [Expected: 0; Actual: 2] - MD031/blanks-around-fences: Fenced code blocks should be surrounded by blank lines - MD032/blanks-around-lists: Lists should be surrounded by blank lines - MD004/ul-style: Unordered list style [Expected: dash; Actual: asterisk] - MD040/fenced-code-language: Fenced code blocks should have a language specified - MD034/no-bare-urls: Bare URL used - MD012/no-multiple-blanks: Multiple consecutive blank lines [Expected: 1; Actual: 2] --- README.md | 62 ++++++++++++++++++++++++++++--------------------------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/README.md b/README.md index 4a32f883..4ecfe778 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # SC5 style guide generator -[![Build Status](https://travis-ci.org/SC5/sc5-styleguide.svg?branch=master)](https://travis-ci.org/SC5/sc5-styleguide) [![dependencies](https://david-dm.org/SC5/sc5-styleguide.svg)](https://david-dm.org/SC5/sc5-styleguide) [![npm version](https://badge.fury.io/js/sc5-styleguide.svg)](http://badge.fury.io/js/sc5-styleguide) +[![Build Status](https://travis-ci.org/SC5/sc5-styleguide.svg?branch=master)](https://travis-ci.org/SC5/sc5-styleguide) [![dependencies](https://david-dm.org/SC5/sc5-styleguide.svg)](https://david-dm.org/SC5/sc5-styleguide) [![npm version](https://badge.fury.io/js/sc5-styleguide.svg)](http://badge.fury.io/js/sc5-styleguide) Style guide generator is a handy little tool that helps you generate good looking style guides from style sheets using KSS notation. It can be used as a command line utility, gulp task or Grunt task (needs grunt-gulp) with minimal effort. @@ -13,13 +13,13 @@ using KSS notation. It can be used as a command line utility, gulp task or Grunt - [Usage](#usage) - [Prerequisites](#prerequisites) - - [With gulp](#with-gulp) + - [With Gulp](#with-gulp) - [With Grunt](#with-grunt) - [As a command line tool](#as-a-command-line-tool) - [Build options](#build-options) - [Documenting syntax](#documenting-syntax) - [Defining an Angular directive](#defining-an-angular-directive) - - [Ignore parts of the style sheet from being processed](#ignore-parts-of-the-stylesheet-from-being-processed) + - [Ignore parts of the style sheet from being processed](#ignore-parts-of-the-style-sheet-from-being-processed) - [Wrapper markup](#wrapper-markup) - [Inserted markup](#inserted-markup) - [Pug (jade) markup](#pug-jade-markup) @@ -40,7 +40,6 @@ using KSS notation. It can be used as a command line utility, gulp task or Grunt ## Usage - You should familiarize yourself with both [KSS](https://github.com/kneath/kss) and [node-kss](https://github.com/kss-node/kss-node) to get yourself started. @@ -50,10 +49,10 @@ SC5 Style guide provides additions to KSS syntax which you can learn [below](#us The tool should be installed onto: -- node 0.12.x -- node 4.2.x +- Node 4.2.x +- Node 6.9.x -### With gulp +### With Gulp Install plugin locally: @@ -61,7 +60,7 @@ Install plugin locally: npm install sc5-styleguide --save-dev ``` -The gulp plugin contains two functions that requires different set of file streams: +The Gulp plugin contains two functions that requires different set of file streams: `generate()`: All unprocessed styles containing the KSS markup and style variables. This will process the KSS markup and collects variable information. @@ -104,7 +103,7 @@ gulp.task('watch', ['styleguide'], function() { gulp.task('styleguide', ['styleguide:generate', 'styleguide:applystyles']); ``` -This approach gives flexibility to use any preprocessor. For example, you can freely replace gulp-sass with gulp-ruby-sass. However, please notice that variable parsing works only for SASS, SCSS and LESS files. +This approach gives flexibility to use any preprocessor. For example, you can freely replace gulp-sass with gulp-ruby-sass. However, please notice that variable parsing works only for Sass, SCSS and Less files. If you do not use preprocessor you can directly pipe CSS files to `applyStyles()`. @@ -112,7 +111,7 @@ See [Build options](#build-options) section for complete documentation of differ ### With Grunt -For projects using Grunt, install the plugin, gulp and the `grunt-gulp` bridge. +For projects using Grunt, install the plugin, Gulp and the `grunt-gulp` bridge. ```bash npm install sc5-styleguide gulp grunt-gulp --save-dev @@ -159,13 +158,13 @@ grunt.registerTask('default', ['gulp:styleguide-generate', 'gulp:styleguide-appl ``` When using Grunt, we recommend processing styles in Grunt tasks as you do for your main application and pass -the resultant CSS into styleguide's gulp tasks. +the resultant CSS into styleguide's Gulp tasks. For more specific documentation see the next section. ### As a command line tool -This way is less recommended as it less helps with introducing the styleguide into the day-to-day process. +This way of usage is not recommended, as it does not help as much with introduction of the styleguide into the day-to-day development process. Install plugin globally: @@ -175,7 +174,7 @@ npm install -g sc5-styleguide Styleguide command line tool requires two sets of source files: -`--kss-source`: Unprocessed files containing the KSS markup and LESS/SASS variables +`--kss-source`: Unprocessed files containing the KSS markup and Less/Sass variables `--style-source` Pre-processed/compiled style sheets to be used in the styleguide @@ -235,7 +234,7 @@ Show/hide Markup section. **hideSubsectionsOnMainSection** (boolean, optional, default: false) -This option enables to prevent loading of subsections. +This option enables to prevent loading of subsections. **beforeBody** (array or string, optional) @@ -337,6 +336,7 @@ You can define your own styles with /* Define your styles here */ } ``` + PostCSS configuration supports mixins, nesting, variables, media queries. @@ -505,9 +505,10 @@ Ignored styles ### Wrapper markup Sometimes your component examples need a wrapper. For example: -* you need to show how to use `
  • ` element which works only with `