GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → mpetrovich → Stylemark

mpetrovich / Stylemark

Licence: mit
Generate interactive style guides from Markdown.

Programming Languages

javascript
184084 projects - #8 most used programming language

Labels

styleguidestyle-guide

Projects that are alternatives of or similar to Stylemark

Flake8
The official GitHub mirror of https://gitlab.com/pycqa/flake8
Stars: ✭ 1,112 (+412.44%)
Mutual labels:  styleguide, style-guide
Sscss
Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.
Stars: ✭ 119 (-45.16%)
Mutual labels:  styleguide, style-guide
Swift
Airbnb's Swift Style Guide.
Stars: ✭ 1,165 (+436.87%)
Mutual labels:  styleguide, style-guide
Livingstyleguide
Easily create front-end style guides with Markdown and Sass/SCSS.
Stars: ✭ 874 (+302.76%)
Mutual labels:  styleguide, style-guide
Javascript Style Guide
Airbnb JavaScript 스타일 가이드
Stars: ✭ 132 (-39.17%)
Mutual labels:  styleguide, style-guide
React Styleguide
ReactJS style guide for component-based projects.
Stars: ✭ 14 (-93.55%)
Mutual labels:  styleguide, style-guide
Catalog
Create living style guides using Markdown or React
Stars: ✭ 1,527 (+603.69%)
Mutual labels:  styleguide, style-guide
Javascript Airbnb
Перевод «JavaScript Style Guide» от Airbnb
Stars: ✭ 579 (+166.82%)
Mutual labels:  styleguide, style-guide
Vue Styleguidist
Created from react styleguidist for Vue Components with a living style guide
Stars: ✭ 2,133 (+882.95%)
Mutual labels:  styleguide, style-guide
Vue Styleguide Generator
React inspired style guide generator for Vue.js
Stars: ✭ 123 (-43.32%)
Mutual labels:  styleguide, style-guide
Styleguide Git Commit Message
/sBin/StyleGuide/Git/CommitMessage
Stars: ✭ 934 (+330.41%)
Mutual labels:  styleguide, style-guide
Styleguide Generators
An overview of automatic living styleguide generators
Stars: ✭ 1,902 (+776.5%)
Mutual labels:  styleguide, style-guide
Front End Style Guide
驴妈妈H5开发规范
Stars: ✭ 16 (-92.63%)
Mutual labels:  styleguide, style-guide
Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (-81.11%)
Mutual labels:  styleguide, style-guide
Styleguide
Style guides for Google-originated open-source projects
Stars: ✭ 29,382 (+13440.09%)
Mutual labels:  styleguide, style-guide
Typescript Guidelines
The TypeScript Guidebook
Stars: ✭ 104 (-52.07%)
Mutual labels:  styleguide, style-guide
A11y Style Guide
Accessibility (A11Y) Style Guide
Stars: ✭ 493 (+127.19%)
Mutual labels:  styleguide, style-guide
Git Style Guide
A Git Style Guide
Stars: ✭ 4,851 (+2135.48%)
Mutual labels:  styleguide, style-guide
Android Kotlin Style Guide
Kotlin style guide of FRESH LIVE since April, 2015.
Stars: ✭ 121 (-44.24%)
Mutual labels:  styleguide, style-guide
Ue4 Style Guide
An attempt to make Unreal Engine 4 projects more consistent
Stars: ✭ 2,656 (+1123.96%)
Mutual labels:  styleguide, style-guide
View All Similar Projects ➔

Stylemark   npm version Build Status

NOTICE: This project has been abandoned. See this issue for details.

Generate interactive style guides from Markdown. Document your style guide components in code comments or Markdown files, and Stylemark will generate a static HTML site with live, interactive components.

Bootstrap style guide

Examples

Installation

Requires Node 6.x+

npm install -g stylemark

For a native app with built-in auto-updating/hot-reloading, see Stylemark App.

Documenting style guide components

Documenting style guide components is as easy as writing Markdown. Components can be documented in dedicated Markdown files or as comment blocks within any source code. See the full Stylemark spec.

As a dedicated Markdown file

---
name: Button
category: Components
---

Buttons can be used with `<a>`, `<button>`, and `<input>` elements.

Types of buttons:

-   Default: Standard button
-   Primary: Provides extra visual weight and identifies the primary action in a set of buttons
-   Success: Indicates a successful or positive action

```types.html
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
```

As a comment block within source code

The language of your source code doesn't matter as long as the docs are in /* … */ comments.

/*
---
name: Button
category: Components
---

Buttons can be used with `<a>`, `<button>`, and `<input>` elements.

Types of buttons:
- Default: Standard button
- Primary: Provides extra visual weight and identifies the primary action in a set of buttons
- Success: Indicates a successful or positive action

```types.html
<button class="btn btn-default">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-success">Success</button>
```
*/
.btn {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    …
}
.btn-default {
    …
}

Generating the HTML style guide

In Node.js

stylemark({ input, output, configPath })
Name Type Description
input string Directory where to read from
output string Directory where to save the generated HTML
configPath string (optional) Filepath of the stylemark YAML configuration file, defaults to .stylemark.yml within the input directory. See Configuration

Example:

stylemark({
    input: "~/git/acme-source-code",
    output: "~/acme-style-guide",
    configPath: "~/acme-source-code/config/stylemark.yml",
})

On the command-line

stylemark -i <input> -o <output> -c <configPath> -w [<delay>] -b [<port>]
Name Description
-i Directory where to read from
-o Directory where to save the generated HTML
-c (optional) Filepath of the stylemark YAML configuration file, defaults to .stylemark.yml within the input directory. See Configuration
-w (optional) Will watch for file changes in <input> and rebuild the style guide, waiting at least <delay> milliseconds between successive changes (defaults to 2000)
-b (optional) Will open the style guide in your default browser at http://localhost:<port> and will automatically reload it when the style guide is updated. The port will be chosen automatically if not provided.

Example: Build a style guide from path/to/source/code with a custom config file location, and save the generated HTML to path/to/style/guide

stylemark -i path/to/source/code -o path/to/style/guide -c ~/acme-source-code/config/stylemark.yml

Example: Build and open the style guide in a browser, and automatically rebuild and reload it when the source code is modified

stylemark -i path/to/source/code -o path/to/style/guide -w -b

Configuration file

The Stylemark configuration file is a YAML file that contains settings to use when generating the HTML style guide.

NOTE: All paths are relative to root project directory of the configuration file (ie. the first ancestor directory that contains package.json).

name: Name of the style guide

excludeDir: (optional) Regex pattern (in double quotes) or list of directories to exclude; .git and node_modules are always excluded
match: (optional) Regex pattern or list of files to process; by default, common source files are included

assets: (optional) List of relative file/directory paths to copy and mirror in the generated style guide

theme:
    logo: (optional) Filepath or URL of your logo
    css: (optional) List of any CSS files to include in the <head> of the generated styleguide; see Theming section
    js: (optional) List of any JS files to include in the <body> of the generated styleguide; see Theming section
    sidebar:
        background: (optional) Background of the sidebar; any valid CSS background property allowed, but hex colors must be quoted
        textColor: (optional) Text color of the sidebar; any valid CSS color property allowed, but hex colors must be quoted

examples:
    css: (optional) List of any CSS files to include in the <head> of each rendered example
    js: (optional) List of any JS files to include in the <head> of each rendered example
    doctypeTag: (optional) HTML doctype to use for each rendered example; defaults to "<!doctype html>"
    htmlTag: (optional) <html> tag to use for each rendered example; defaults to "<html>"
    bodyTag: (optional) <body> tag to use for each rendered example; defaults to "<body>"
    headHtml: (optional) HTML to insert before the closing </head> tag for each rendered example
    bodyHtml: (optional) HTML template of the example; the example's HTML content will be inserted in place of "{html}"

webpackAppPath: For Webpack apps (esp. React, Angular, etc.), this is the `output.library` value in your webpack config
emberAppName: For Ember apps, this is the name of the Ember app exported to the window object

order: (optional) See Ordering section

Ordering

The relative order of categories can be defined by prefixing a category name with +, -, or nothing:

  • Categories prefixed with + will be listed first
  • Categories prefixed with - will be listed last
  • Unprefixed categories will be listed in between

Omitted categories are ordered as if they were included but unprefixed.

Within each of the +-, --, and un-prefixed groups, the specified order will be preserved. Example:

order:
- +Getting Started
- +Overview
- +Grid
- Topography
- -Extras
- -Other

Theming

The look and feel of the generated styleguide can be customized in the theme section of the config.

For example:

theme:
    css:
    - theme/theme.css

    js:
    - theme/theme.js

    sidebar:
        background: rgb(200, 0, 0)
        textColor: "#fff"

With that configuration, Stylemark will include theme/theme.css and theme/theme.js in the generated styleguide. Note that the background and textColor styles defined in the sidebar section will override any similar styles set in theme/theme.css.

Stylemark includes a number of CSS class hooks you can use to style specific elements. These CSS classes all start with theme- and include:

  • theme-content: The main scrollable page content
  • theme-content-category: Set of elements that make up a category
  • theme-content-element: An element, including its title and documentation
  • theme-content-element-description: An element's documentation, not including its title
  • theme-content-element-title: An element's title
  • theme-content-element-source: An element's source filepath container
  • theme-content-element-source-label: The text label of an element's source filepath
  • theme-content-element-source-path: The filepath string of an element's source filepath
  • theme-mobile-nav: The navigation view visible on smaller viewports
  • theme-mobile-nav-select: The <select> tag for the navigation dropdown visible on smaller viewports
  • theme-page: The entire page, including the content and sidebar
  • theme-sidebar: The sidebar
  • theme-sidebar-categories: The set of categories in the sidebar
  • theme-sidebar-category: A category in the sidebar, including its elements
  • theme-sidebar-category-title: A sidebar category's title
  • theme-sidebar-element: An element within a sidebar category
  • theme-sidebar-footer: Sidebar footer
  • theme-sidebar-header: Sidebar header
  • theme-sidebar-header-logo: Sidebar header logo
  • theme-sidebar-header-title: Sidebar header title that contains the styleguide name
  • theme-sidebar-search: Sidebar search module
  • theme-sidebar-search-no-results: Text that appears when no sidebar search results are found

IMPORTANT: Use only these theme- classes when customizing your styleguide. Relying on any other internal classes will result in your styles breaking when those internal classes change or are removed.

Example configuration

Here's a sample configuration with all options provided:

name: Acme Design

excludeDir:
    - dist
    - docs

assets:
    - dist
    - fonts

theme:
    logo: assets/brand/logo.png

    css:
        - theme/theme.css

    js:
        - theme/theme.js

    sidebar:
        background: "#3b2a55"
        textColor: "#fff"

examples:
    css:
        - dist/css/app.min.css

    js:
        - https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
        - dist/js/app.min.js

    doctypeTag: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    htmlTag: <html id="acme">
    bodyTag: <body class="acme-body">

    headHtml: |
        <meta name="google-site-verification" content="52cae…">
        <script>
            window.disableRouting = true;
        </script>

    bodyHtml: |
        <div style="padding: 20px">
            {html}
        </div>

order:
    - +Introduction
    - +Installation
    - -Credits
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].