• Stars
    star
    120
  • Rank 295,983 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created almost 11 years ago
  • Updated almost 10 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Grunting grunts with grunt & serving a pattern catalogue

grunt-patternprimer v0.1.1 Build Status devDependency Status

Grunt enabled port of adactios Pattern-Primer

What?!

As stated in the original docs:

Create little snippets of markup and save them to the "patterns folder." The pattern primer will generate a list of all the patterns in that folder. You will see the pattern rendered as HTML. You will also get the source displayed in a textarea.

Check also the related Blog Post & example from Jeremy.

Getting Started

This plugin requires Grunt ~0.4.0

If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:

npm install grunt-patternprimer --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-patternprimer');

Patternprimer task

Run this task with the grunt patternprimer command.

Task targets, files and options may be specified according to the grunt Configuring tasks guide.

Options

wwwroot

Type: String
Default: public

This is the Place all your HTML extracts (the pattern files) live it is relative to the <root> folder of your project.

css

Type: Array
Default: ['global.css']

Array with all the css files you that should be loaded in the parttern primer.

Note: You can also specify remote ressources like http://my.domain.com/style.css. They will be downloaded and stored locally in case of a snapshot. Does not work with ressorces from https sites.

dest

Type: String
Default: docs

Specifies the destination of the pattern files when running a snapshot build and/or running the live server.

ports

Type: Array
Default: [7020, 7030]

Ports that should be used when running the live server. The first index of that array will be used to serve the contents of the patterns folder live, the second port will be used to serve your last snapshot build (if one exists).

src

Type: String Default: public/patterns

The location of your pattern catalogue, this source will be used to deliver the pattern catalogue from the live server and to generate snapshots from it.

snapshot

Type: Boolean
Default: false

Determines if a live server should be fired up, or if the output ends up in the via dest configured snapshot directory.

index

Type: Boolean String Default: false

Define your own index template for the patterns. Should be a file ending with the .html extension. Please omit the closing </body> and </html> tags, they will be added autmagically.

Usage examples

Live delivery

This configuration will start a live server that servers your pattern catalogue on port 7020.

// Project configuration.
grunt.initConfig({
  patternprimer: {
    my_target: {
      ports: [7020],
      src: 'public/patterns',
      wwwroot: 'public',
      css: ['global.css']      
    }
  }
});

Creating snapshots

This configuration will not spin a live server, instead will save your catalogue (for static access) in the dest folder:

// Project configuration.
grunt.initConfig({
  patternprimer: {
    my_target: {
      wwwroot: 'public',
      css: ['global.css'],
      dest: 'docs',
      snapshot: true
    }
  }
});

Getting it all together

This configuration (my favourite) will enable you to run a live server & do snapshotting by specifying the task from the cmd.

grunt patternprimer:live will spin up the servers to deliver the live catalogue & the last snapshotted version.

grunt patternprimer:snapshot will generate and save a new snapshot.

// Project configuration.
grunt.initConfig({
  patternprimer: {
    options: {
      wwwroot: 'public',
      css: ['global.css'],
      dest: 'docs'
    },
    live: {
      ports: [7020, 7030],
      src: 'public/patterns',
    },
    snapshot: {
      snapshot: true
    }
  }
});

Need some Sass?

Including Sass into my config enabled me to start creating a master library of client style guides, which is very helpful when working with remote/new developers on a project.

Sass included version stevebritton Pattern-Primer

Release History

  • 2014-12-03 v0.1.2
  • 2014-03-04 v0.1.1 Added remote css & fixed #3
  • 2013-11-25โ€ƒโ€ƒโ€ƒv0.1.0โ€ƒโ€ƒโ€ƒInitial release.

More Repositories

1

plugin.video.netflix

Inputstream based Netflix plugin for Kodi
Python
1,236
star
2

web-conferences-2018

A list of Web & JavaScript related conferences happening in 2018.
597
star
3

grunt-requirejs

RequireJs (r.js) plugin for grunt.js
JavaScript
300
star
4

Backbone.Mutators

Backbone plugin to override getters and setters with logic
JavaScript
228
star
5

grunt-imagine

Grunt tasks for optimizing & inlining images
JavaScript
153
star
6

Backbone.Marionette.Handlebars

Spice up your Backbone.Marionette application with some handlebars flavour
JavaScript
72
star
7

Backbone.Rpc

Backbone.js Plugin for using Json Rpc interfaces
JavaScript
50
star
8

cfp-magick

Show JavaScript and Web conferences with open calls for papers in your terminal
JavaScript
49
star
9

Backbone.Chosen

One Collection, different models, mapped easy via configuration
JavaScript
48
star
10

deepspeech-demo

Demo App for Mozillas DeepSpeech project
JavaScript
16
star
11

serveit2

Quick & dirty static HTTP2 server
JavaScript
15
star
12

grunt-backbonebuilder

Build your customized backbone experience with grunt
JavaScript
14
star
13

grunt-jquerybuilder

Build your customized jquery experience with grunt
JavaScript
11
star
14

grunt-lodashbuilder

Build your Lo-Dash experience with grunt
JavaScript
9
star
15

firefox-element-screenshots

Screenshots single elements from Webpages using Firefox
JavaScript
8
star
16

jsdays-workshop

Demo for the JavaScript Days Workshop 2014
CSS
7
star
17

awb2ics

Abfuhrkalender ICS Generator fรผr AWB Kรถln
JavaScript
7
star
18

webusb-workshop

Learn how to steer POS printers with WebUSB
HTML
7
star
19

sloccount

Counts lines of code of HTML, CSS & JS - Outputs them in a Jenkins compatible format
JavaScript
6
star
20

require-messageformat-plugin

Simple requirejs wrapper around messageformat.js
JavaScript
6
star
21

nightlybuild.io

Page of the Nightlybuild.io conference
HTML
6
star
22

node-homeland

Interface for HM-CFG-USB2 & HM-CFG-LAN as well as an implementation for the BidCos protocol
JavaScript
6
star
23

Backbone.Utils

A few nice snippets around backbone that are not big enough to deserve their own plugin
JavaScript
5
star
24

plugin.video.telekom-sport

Telekom Sport Plugin for Kodi Mediacenter
Python
2
star
25

kodinerds-iptv-proxy

Python
2
star
26

audit-badge

Generates an npm audit badge
JavaScript
2
star
27

about.me

About me
1
star
28

grunt-sloccount

A grunt plugin for generating sloccount compatible reports
JavaScript
1
star
29

asciidisco.com

My blog & site reachable under asciidisco.com (soon)
JavaScript
1
star
30

kodi-release-helper

Kodi Release Helper
Python
1
star
31

grunt-documantix

Creates html doc stuff from docBlock comments
JavaScript
1
star