Skip to content
CSS and SCSS for adding QuickBooks animation to your project.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci use package lock and switch to `npm ci` for ci Jan 19, 2019
css add package-lock.json Dec 4, 2018
docs Clearer section header "Library structure" instead of "How it works" Jan 9, 2019
scss initial commit Dec 3, 2018
styled-components generate styled components Mar 18, 2019
tools babel setup Mar 18, 2019
.babelrc babel setup Mar 18, 2019
.gitignore generate styled components Mar 18, 2019
.npmrc .npmrc to avoid package-lock pointing to Intuit's npm registry Mar 18, 2019
CHANGELOG.md
CONTRIBUTING.md initial commit Dec 3, 2018
LICENSE.md
README.md
package-lock.json Bump version to: 0.1.0 [skip ci] Mar 19, 2019
package.json
postcss.config.js initial commit Dec 3, 2018

README.md

qbal - QuickBooks Animation Library

CircleCI Auto Release npm npm

The QuickBooks Animation Library is a solution to add QuickBooks motion to your product, page, or feature. Our motion is natural, guiding, and calm.

This is one approach to implementing and systematizing motion on the web. If you are an Intuit employee, refer to our design system for more detail on motion principles, motivation, and rationale.

Demos + Docs + Examples 👈 👈  😀 🎉

Challenges

  • Creating consistent QuickBooks style animation across marketing and product web experiences
  • Designers and developers collaborating on motion without working code examples

Approach

  • Ready-to-use QuickBooks motion styles that can be applied with CSS classes or SCSS mixins
  • Semantic mappings that make it clearer which animations to use and provide a path to updating specific animations (like qbal-trowserModal-enter) by updating the library
  • Detailed examples show exactly what animations look like to help designers and developers collaborate
  • Includes:
    • Entrance & exit animations for various UI elements (modals, dialogs, tooltips, etc.)
    • Transitions classes for height, width, opacity, and color
    • Plus more! See all examples 👀

Library structure

_qbal-variables.scss defines timing, easing, and property values to animate

_qbal-keyframes.scss builds the CSS keyframes needed for specific animations

_qbal-animation-classes.scss defines the cores set of generic animations

_qbal-semantic-classes.scss defines semantic mappings for entrance and exit animations for specific components

The 4 above files can be included via _qbal-mixins.scss and then used as mixins, or developers can use the CSS classes generated from qb_animation_library.scss.

Usage

Usage as CSS

  1. Download qb_animation_library.css

  2. Link to it in your HTML
    <link rel="stylesheet" href="path/to/qb_animation_library.css">

  3. Start adding classes:
    <div class="qbal-fade-enter"> ... </div>

Usage as SCSS

  1. Clone repository or download as ZIP

  2. Copy /scss folder to your project

  3. Import qbal mixins into your scss:
    @import "qbal-mixins";

  4. Start including mixins in your scss (mixin names are the same as the class names above):

    .my-tooltip {
      @include qbal-tooltip-enter;
    }

Usage as Styled Components

  1. npm install --save styled-components (if you haven't already)

  2. npm install --save qb-animation-library

  3. Then in your React component...

    To use any existing named animation:
      import styled, { keyframes, css } from "styled-components";
      import { fade_enter } from "qb-animation-library";
    
      const Container = styled.div`
        ${fade_enter(css, keyframes)}
      `;
    To use any animation variables like keyframes and easing curves:
      import styled, { keyframes, css } from "styled-components";
      import { animationVariables as animVars } from "qb-animation-library";
      
      const upEnterKf = keyframes`${animVars.keyframes_UpEnter}`;
      const fadeInKf = keyframes`${animVars.keyframes_FadeEnter}`;
      const styles = css`
        animation: ${upEnterKf} 2s ${animVars.ease_spirited_entrance},
                   ${fadeInKf}  1s ${animVars.ease_slow};
      `;
      const Container = styled.div`
        ${styles}
      `;

    See available animation variables in styled-components/animation-variables.js

License

This project is licensed under the MIT License - see the LICENSE.md file for details

Development setup

  • Clone repository and install

    git clone git@github.com:intuit/qb-animation-library.git
    cd qb-animation-library/
    npm install
  • To build CSS

    npm run build
  • To build CSS when SCSS files change

    npm run watch
  • To build CSS when SCSS files change & launch dev http server

    npm run dev

    Then open http://localhost:8080/ in your browser

  • To generate styled-components from tools/generate-styled-components.js

    npm run generate-styled-components
You can’t perform that action at this time.