All Projects → sable-virt → Frontnote

sable-virt / Frontnote

Licence: mit
Node.jsを使ったスタイルガイドジェネレーター

Programming Languages

javascript
184084 projects - #8 most used programming language
stylus
462 projects

Projects that are alternatives of or similar to Frontnote

Sscss
Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.
Stars: ✭ 119 (+63.01%)
Mutual labels:  styleguide, scss, sass
Gulp Frontnote
スタイルガイドジェネレーターFrontNoteのGulpプラグイン
Stars: ✭ 7 (-90.41%)
Mutual labels:  styleguide, scss, sass
Css
Believe in Better CSS
Stars: ✭ 262 (+258.9%)
Mutual labels:  styleguide, scss, sass
Css
The CSS design system that powers GitHub
Stars: ✭ 10,670 (+14516.44%)
Mutual labels:  styleguide, scss, sass
A11y Style Guide
Accessibility (A11Y) Style Guide
Stars: ✭ 493 (+575.34%)
Mutual labels:  styleguide, scss, sass
Sierra
Sierra SCSS library
Stars: ✭ 852 (+1067.12%)
Mutual labels:  scss, sass
Livingstyleguide
Easily create front-end style guides with Markdown and Sass/SCSS.
Stars: ✭ 874 (+1097.26%)
Mutual labels:  styleguide, sass
Libsasshost
.NET wrapper around the LibSass library with the ability to support a virtual file system.
Stars: ✭ 71 (-2.74%)
Mutual labels:  scss, sass
Html Sass Babel Webpack Boilerplate
Webpack 4 + Babel + ES6 + SASS + HTML Modules + Livereload
Stars: ✭ 35 (-52.05%)
Mutual labels:  scss, sass
Sassmagic
Collection best of Sass mixins and function
Stars: ✭ 795 (+989.04%)
Mutual labels:  scss, sass
Hive Framework
A website development framework built with Sass, and incorporating jQuery UI.
Stars: ✭ 14 (-80.82%)
Mutual labels:  scss, sass
Cusca
A ghost theme
Stars: ✭ 42 (-42.47%)
Mutual labels:  scss, sass
Sass A11ycolor
🌈 Generate the nearest accessible color with Sass.
Stars: ✭ 24 (-67.12%)
Mutual labels:  scss, sass
Sass Webpack Plugin
[Deprecated] 🌈 Get your stylesheets together
Stars: ✭ 14 (-80.82%)
Mutual labels:  scss, sass
Uicookbook
A few recipes and build workflows for UI dev
Stars: ✭ 19 (-73.97%)
Mutual labels:  scss, sass
Three Dots
🔮 CSS loading animations made by single element.
Stars: ✭ 912 (+1149.32%)
Mutual labels:  scss, sass
Snack Helper
🗃 A universal CSS helper library.
Stars: ✭ 50 (-31.51%)
Mutual labels:  scss, sass
Jekyll Bootstrap4
Bootstrap 4 with Jekyll minimalistic example site
Stars: ✭ 43 (-41.1%)
Mutual labels:  scss, sass
Generator Baukasten
Awesome!
Stars: ✭ 50 (-31.51%)
Mutual labels:  scss, sass
React Frontend Dev Portfolio
Easy to adapt and deploy React portfolio inspired with solutions found at GitHub.
Stars: ✭ 55 (-24.66%)
Mutual labels:  scss, sass

FrontNote

GitHub version Build Status Code Climate

FrontNote

StyleGuide Generator Node.jsを使ったスタイルガイドジェネレーター

Usage - 使い方

First, install frontnote:

npm install frontnote --save-dev
var FrontNote = require('frontnote');
var note = new FrontNote({
	out: './docs'
});
note.render('path/**/*.css').subscribe(function() {
	//callback
});

Plugins - プラグイン

API

FrontNote(options);

options

Type: Object Default value: {}

Option. Please see options section for more information.

オプション 詳しくはオプションの項をご覧ください。

note.render(files,callback);

files

@Required
Type: String | Array
Pattern to be matched.
Please see the minimatch documentation for more details.

マッチさせたいパターン
詳しくはminimatchのドキュメントをご覧ください。

callback

Type: Function Default value: null

Call this function when generated style guide.

スタイルガイドが生成された後に実行するされる関数

Option - オプション

options.title

Type: String Default value: StyleGuide

Title of StyleGuide.

スタイルガイドのタイトル

ログを詳細に表示します

options.overview

Type: String Default value: __dirname + '/styleguide.md''

StyleGuide overview file's path. Overview file is required Markdown format.

index.htmlに表示するオーバービューファイル(マークダウン)のパス
オーバービューファイルはマークダウン形式です。

options.template

Type: String Default value: __dirname + '/template''

StyleGuide template path.

スタイルガイドのテンプレートパス

options.includeAssetPath

Type: String Default value: assets/**/*

The path of the file you want to copy the generated directory.

生成されたディレクトリにコピーしたいファイルパス

options.out

Type: String Default value: ./frontnote

Directory in which to generate a style guide.

options.css

Type: String|Array Default value: ./style.css

Path of CSS that you want to read in HTML. In the array or string.

HTMLに読み込みたいCSSのパス。文字列または配列で指定します。

options.script

Type: String|Array Default value: null

Path of JS that you want to read in HTML. In the array or string.

HTMLに読み込みたいJSのパス。文字列または配列で指定します。

options.clean

Type: Boolean Default value: false

Clean files and folder from options.out directory.

出力先ディレクトリとファイルを削除します。

options.verbose

Type: Boolean Default value: false

Display a detailed log

ログを詳細に表示します

options.params

Type: Object Default value: {}

Custom variables for using ejs templates.

ejsテンプレート内で使う任意の変数を定義できます。

Template - テンプレート

frontnote-template

テンプレートはfrontnote-templateを参考にカスタマイズできます

Comment Style - コメントの書き方

File overview - ファイル概要

Only 1 comment block in a file.
1ファイルに1つき1ブロックだけ記述できます。

/*
#overview
fileoverview title

fileoverview comment
*/

Section - セクション

Section of style guide. '@' means attribute of this section. (ex. @deprecated @todo)

各スタイルごとに記述します。
@をつけるとこのセクションに属性ラベルをつけることができます(例: @非推奨, @todo

/*
#styleguide
style title

style comment.

@deprecated
@非推奨
@todo
@your-attribute

```
sample code here.
```
*/

Color Pallet - カラーパレット

Create color guide カラーガイドを作成します。

/*
#colors

@primary #996600
@secondary #333
@color-name color-code
*/

Test

npm install
npm test
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].