Git Product home page Git Product logo

style-guide's Introduction

Build Status

octocat style

Style Guide

Common styles and pattern library for daptiv. You can view the style guide here.

Install

Style-guide is available as bower package. This can be included by creating an entry in your bower.json file with the url https://github.com/daptiv/style-guide.git#VERSION where VERSION is the version you care to use.

Running Locally

  • First install dependencies npm install && bundle install
  • For development, run: grunt serve this starts a local web server and a watch task.
  • In a browser, go to: http://localhost:8888/style-guide this will automatically refresh when changes are made.

Pull requests

We use pullquester to create pull requests. It provides all the important information for requests and instructions on how to publish changes after the pull request is complete.

Publishing

The site:

  1. Pull latest master: git checkout master && git pull
  2. Run npm version patch

The npm package:

IMPORTANT NOTE: Before publishing you need to have a npm account. Once you have an account, please create a pull request adding yourself to the CONTRIBUTORS file referencing one of the owners to review.

  1. Pull latest master: git checkout master && git pull
  2. log in to npm npm login
  3. publish the package npm publish

More Information

Some versions of npm do not correctly call the postversion script. If you run npm version and all it outputs to the command line is a version number, you are running one of the affected versions of npm.

In the event that the postversion script is not run, simply run npm run-script postversion

Running npm version will:

  1. Update package.json's version according to the rule provided. (most of the time by incrementing patch number)
  2. Commit the change to package.json and tag the resulting commit with the same version
  3. Push the commit and tag up to github.
  4. Run grunt publish which will, in turn:
    1. Build the site
    2. Publish the newly built site to the gh-pages branch
    3. Push the gh-pages branch to github, updating the style guide site

style-guide's People

Contributors

akalman avatar boskya avatar delta62 avatar dizard2001 avatar hyperd avatar park9140 avatar pbalsley avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

style-guide's Issues

Add guide section for z-index

The idea is to identify z-index ranges for different components.

It could roughly follow google's material and elevation spec

Known z-indices that we are using right now:

  • dropdown menu is z-index: 100
  • executive browser:
    • header: 9 (should be greater than content-body)
    • content-body: 10 (should be less than header)

z-indices we need to consider:

  • spa/ppm modals
  • dropdown message boxes (black system changes/green,yellow,red pane messages)
  • jquery widgets

compiled css not packaged

style guide should be packaged with the built css

sass should be packaged under /sass/
css should be packaged under /css/

this would be a major rev to the style guide

style guide does not come packaged with font awesome dependencies

the style guide is dependent on the font awesome styles. But this dependency is resolved during the build process, not during the package process. This means that consumers trying to import the style guide sass files will fail to do so because style guide can't find its own font awesome styles.

we should include some package steps so that when the style guide is installed via bower the font awesome styles are already loaded.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.