From 0ef6b1cd31d5e4c8680dcf9badff32cd6ce3bf81 Mon Sep 17 00:00:00 2001 From: Hannu Pelkonen Date: Tue, 18 Nov 2014 11:40:31 +0200 Subject: [PATCH] Use github readme as demo project overview page --- README.md | 7 ++--- lib/app/overview.md | 52 ---------------------------------- lib/app/styleguide_config.json | 2 +- package.json | 4 ++- 4 files changed, 7 insertions(+), 58 deletions(-) delete mode 100644 lib/app/overview.md diff --git a/README.md b/README.md index d756f1b4..e1e68caa 100644 --- a/README.md +++ b/README.md @@ -279,12 +279,11 @@ When sassVariables is defined and styleguide is served with the built-in server, ## Demo -Build demo styleguide and start a server +Build demo styleguide and start a server on port 3000 - gulp demo + npm run demo -Note: If you installed styleguide by cloning repository directly instead of npm you need to run `gulp build` first -You can change the default port (3000) with `--port`; +Note: If you installed styleguide by cloning repository directly instead of npm you need to run `npm run build` first The demo generates styleguide to `demo-output` directory. diff --git a/lib/app/overview.md b/lib/app/overview.md deleted file mode 100644 index 8e510180..00000000 --- a/lib/app/overview.md +++ /dev/null @@ -1,52 +0,0 @@ -# Example styleguide - -## About - -This styleguide is generated using SC5 styleguide generator. Styleguide -generator aims to decrease time spent on developing living styleguides and -support styleguide driven development workflows. - -### KSS - -KSS (Knyle Style Sheets) is a documentation syntax for stylesheets -(CSS/LESS/SASS..). Used by the likes of [GitHub](https://github.com/styleguide/css) - -Styleguide generator is largely based on KSS and kss-node projects. - - // Elements - // - // This section contains example documentation of different kinds of html - // elements - // - // Styleguide 3.0 - - // Buttons - // - // This section demonstrates the use of modifiers - // - // default - This is the default state of a button element - // .green - This is a button with a class modifier - // .red - This is another button with a class modifier - // :hover - This is a button with the hover pseudo modifier - // - // Markup: - // - // - // Styleguide 3.1 - -#### Improvements over kss-node -* UI built on Angular.js with search functionality -* Possibility to use SCSS variables as modifiers -* GitHub flavored Markdown for Overview -* Helper classes (for displaying colors etc.) -* In browser variable editing (experimental) -* A built-in server for hosting the styleguide and saving edited variables - -### Github repository - -https://github.com/SC5/sc5-styleguide - -## Overview page - -You can create an Overview page for your styleguide using Markdown, -check docs for more info. \ No newline at end of file diff --git a/lib/app/styleguide_config.json b/lib/app/styleguide_config.json index 859a1dfa..af8b1369 100644 --- a/lib/app/styleguide_config.json +++ b/lib/app/styleguide_config.json @@ -1,6 +1,6 @@ { "title": "SC5 Styleguide", - "overviewPath": "overview.md", + "overviewPath": "../../README.md", "styleVariables": "sass/_styleguide_variables.scss", "sass": { "src": "lib/app/sass/app.scss", diff --git a/package.json b/package.json index e1ecc02a..6a9b61d9 100644 --- a/package.json +++ b/package.json @@ -88,6 +88,8 @@ "scripts": { "test": "node_modules/istanbul/lib/cli.js cover --config=test/istanbul.conf.json --dir=coverage/mocha node_modules/mocha/bin/_mocha && node_modules/karma/bin/karma start test/karma.conf.js && node_modules/gulp/bin/gulp.js jscs", "coverage-report": "node_modules/istanbul/lib/cli.js report --root ./coverage --dir ./coverage/report lcov", - "prepublish": "node_modules/gulp/bin/gulp.js build" + "prepublish": "node_modules/gulp/bin/gulp.js build", + "build": "node_modules/gulp/bin/gulp.js build", + "demo": "node_modules/gulp/bin/gulp.js demo" } }