Meet Jack

A modern styling library with an affinity for animation. Just add content, kid.

Full Documentation

1. Getting Started

Install the package npm install jack-strap --save. There are a few options for harnessing the power of Jack.

1. For active development, load everything: <link rel="stylesheet" href="node_modules/jack-strap/dist/jack.css"> for the minified production version.

2. Import compiled component resources into your project's existing Sass/LESS: @import url('node_modules/jack-strap/dist/components/grid.css');

3. Import component Sass partials and overwrite the defaults inside src/settings/_user.config.scss for granular control, e.g.:

// Add project-specific prefix
$global_prefix: 'cc-';

// Opt out of Jack's reset stylesheet
$include_util_reset: false;

@import 'node_modules/jack-strap/src/jack';

or

@import 'node_modules/jack-strap/src/settings/colors';
@import 'node_modules/jack-strap/src/settings/sizes';
@import 'node_modules/jack-strap/src/typography/typography';

For a full list of configuration options, view node_modules/jack-strap/components/settings/_default.config.scss after installing the module.

2. Roadmap

• Animation
  • Keyframes
  • Easing
  • Timing management
• Form Controls
  • ~~Input~~
    • ~~Text~~
    • ~~Number~~
    • ~~Password~~
    • ~~Search~~
    • ~~Radio~~
    • ~~Checkbox~~
  • Textarea
  • Select
    • ~~Single~~
    • Multi
  • ~~Buttons~~
• Hero
  • ~~Full-width~~
  • Container-width
• Layout
  • ~~Cards~~
  • ~~Dividers~~
  • ~~Grid~~
  • ~~Sections~~
  • ~~Spacing (smart margins & padding)~~
  • ~~Wells~~
• ~~Lists~~
• Navigation
  • ~~Links~~
  • Menus
    • ~~Top~~
    • Side
    • Breadcrumb
  • Multi-level menus
  • ~~Tabs~~
• Notifications
  • ~~Alerts~~
  • ~~Modals~~
• ~~Tables~~
• Typography
  • Font size management
  • ~~Headers~~
  • ~~Paragraphs~~

3. Customization

• Sizing
  • ~~Break point sizes~~
  • Font sizes
  • ~~Spacing sizes~~ *Colors
  • ~~Color management~~

4. Browser/Device Support

The goal is to support IE11, Edge, Chrome, Safari, Firefox, and Opera out of the box.