caspersleep / nightshade

Casper's design system for building web and digital applications. Powered by Ando.

Nightshade

Casper's system for designing and building interfaces for Casper.

Getting Started

Pre-requisites

1. Node
2. Gulp
3. JSPM

Setup

1. Set Node version

Nightshade uses Node 5.10.1. If you have nvm installed, you set the correct version engine from .nvmrc.

# check/set Node version
nvm use
# if you need to install 5.0.0
nvm install 5.10.1
nvm use

2. Install dependencies

npm install

3. Setup .env

Adds local .env file to your repository.

gulp setup

4. Start local server

Stat a local webserver at an open port, usually 3000. BrowserSync will watch and reload your environment when files change.

gulp

Working with local data

npm install json-server -g

Run npm start to kickoff the json server at :3003.

nightshade's Issues

Pattern: Logo

Vision

Add logo page with useage rules

Current State

• No implementation for logo.
• Completed designs https://trello.com/c/sNLW1GGH
• Logo copy and rules https://www.evernote.com/l/ACTj4XXAuetAZJktU8N0sLFiuSsaNof8ERc

Scope

• [ ]

Anti-Vision

Footer version needs to read from package.json

Vision

Footer reads from package.json to always remain current

Current State

Footer version is currently hard-coded in _nightshade_layout.html.

Scope

• Footer reads from package.json

Anti-Vision

Multi-language components

Vision

We should be able to see how components render in different languages.

Current State

Sample components are all rendered in hard-coded English.

Scope

• Configurable way to specify copy in different languages (e.g. EN, DE)
• JS selector to dynamically switch between languages

Anti-Vision

Pattern: Typography

Vision

Pattern for typography.

Current State

Partial implementation for typography.

Scope

• [ ]

Anti-Vision

Pattern: Color

Vision

Pattern for color.

Current State

Partial implementation for color.

Scope

• [ ]

Anti-Vision

Nav drawer should build from list

Vision

Style guide menu should be auto-populated by a configuration file.

Current State

Style guide menu is currently hardcoded HTML.

Scope

• Configuration file that specifies what to build into the menu
• Flag to build to production/ready for production so we can have in-progress work locally but not live

Anti-Vision

A configuration file that's too obtuse for non-devs to use

Pattern: Icons

Vision

• A basic pattern page for icons that organizes the icons by group
• Documentation section on the pattern page that shows the available default icons sizes
• Documentation section that includes icon macro and sass useage

Current State

• Icons page lists all the icons alphabetically
• Icons page page does not include any documentation or information about the pattern
• Icons page is hackily generated by creating a list of icons with icons-config gulp task

Scope

• Organize icons in 8 groups with 5 per row. Details
• Take out press logos from nightshade-icons storefront directory. Move to press directory
• Add link from Icons pattern page to press folder in github
• Show overview at top of the page with example of one icon in all size

Affects

• https://github.com/CasperSleep/nightshade-icons

Anti-Vision

• Cleaning up and standardizing icons (requires too much design time)

REF

• Evernote
• Trello

Move pattern data object to YAML

Vision

Pattern data should be written in YAML, to make it easier for designers to read/write.

Current State

Pattern data is currently written as a JS object.

Scope

• Setup gulp task to read and parse yaml files through the templates.

Move these built patterns to YAML:

• Buttons
• Popovers
• Tooltips
• Banners

Anti-Vision

• Overly refactoring the current pattern macros
• Changing design/layout

Pattern: Forms

Vision

Add pattern page for forms including rules for useage

Current State

• Designs are ready https://www.dropbox.com/sh/typw0w0he8636rh/AACdu9Aw8NhCEbgwrCnA4NH-a?dl=0
• Useage rules https://www.evernote.com/l/ACShpa58p-1OtK8QN9hYxtsBsugEeTOtHyw

Scope

• Plan out page/input macro
• Create macro for form input
• Build out forms pattern page

Anti-Vision

• No need to update Casper Classic unless Nightshade styles have been updated #

Pattern: Notifications

Vision

Add pattern for notifications and rules for useage to Nightshade

Current State

• Design is re-working colors to make sure notifications don't clash with colored background
• Reference Notification code from Casper.com repo
• Design rules and content for Nightshade pattern page https://www.evernote.com/l/ACQZ_dlvmTBOkIGGcokl0PAMn3PSgdZN3dQ

Scope

• Create macro for notification
• Build out notification page

Anti-Vision

• Don't update Casper repo. Will tackle this when we move nightshade-core styles into Casper Classic

REF: https://trello.com/c/PXxaPToP

All patterns have JSDoc style comments

Vision

All patterns should have JSDoc comments.

Current State

Only some patterns have JSDoc comments.

Scope

The following patterns need JSDoc comments:

• [ ]

Anti-Vision

Implement JSDoc/Dox

Vision

We want to access our .js file documentation comments in an easy to use online viewer.

Current State

All nightshade-core The documentation is hard-coded, although some modules have JSDoc-style comments already.

Scope

• Ideally use JSDoc/Dox to generate documentation
• Add link to menu in same group as Sassdoc

Anti-Vision

• Not required for CSS.