@internetarchive/ia-design-system

0.3.1-alpha.21 • Public • Published

IA Design System (WIP)

This repository has:

  • Design Principles (theory)
  • CSS and JavaScript for reusable components

This can be thought of as Internet Archive's own Bootstrap.

Everything contained so far is a work in progress.

Some decisions so far:

  • Like Bootstrap, components are just CSS and maybe JS. There is recommended HTML which can be implemented in PHP, React, Web Components, etc.
  • ITCSS is used to structure the CSS.
  • LESS is used, so that we can easily integrate with existing Petabox code.

Using in Your Project

It's highly recommended you use Yarn or NPM to install the design system as a dependency, but you may also clone the repository directly into your project.

Yarn/NPM will ensure assets get built by default, but if you clone directly you'll need to run yarn install && yarn prepare from inside the ia-design-system directory to build assets.

Importing LESS/CSS

If you're using LESS, just use @import rules:

// Import the entire system:
@import 'path/to/node_modules/ia-design-system/src/styles/index.less';

// OR you can import just the parts you need:
@import 'path/to/node_modules/ia-design-system/src/styles/settings.less';
@import 'path/to/node_modules/ia-design-system/src/styles/utils.less';
@import 'path/to/node_modules/ia-design-system/src/styles/generic.less';

// If you're not using Yarn/NPM, just replace the node_modules path with the appropriate path:
@import 'path/to/ia-design-system/src/styles/index.less';

If you're using vanilla CSS, pull the built CSS file in via a plain old <link> tag:

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="path/to/node_modules/ia-design-system/public/styles/index.css">

    <!-- If you're not using Yarn/NPM, just replace the node_modules path with the appropriate path: -->
    <link rel="stylesheet" href="path/to/ia-design-system/public/styles/index.css">
  </head>
</html>

Importing JavaScript

From inside your project's JavaScript file, assuming ES2015 or CommonJS:

import IaDesignSystem from 'ia-design-system';

// If you're not using Yarn/NPM, just point the import directly to the file:
import IaDesignSystem from './path/to/ia-design-system/public/scripts/index.js';

If you're using ES5 or a module bundler, import it via a plain old <script> tag:

<!doctype html>
<html>
  <head>
    <script src="path/to/node_modules/ia-design-system/public/scripts/index.js"></script>

    <!-- If you're not using Yarn/NPM, just replace the node_modules path with the appropriate path: -->
    <script src="path/to/ia-design-system/public/scripts/index.js"></script>
  </head>
</html>

Fractal

This site is built using Fractal, a tool for building pattern libraries. When developing or modifying components, you can run a local server with Fractal. You can also build a static version of the site for public deployment or archival.

Contributing

First, install dependencies:

yarn install

Either perform a one-time asset build:

yarn build:assets

Or watch your assets so the built files get rebuilt whenever the source files change:

yarn watch

Then start the local Fractal server. The command will notify you of the URL that the site is served from.

yarn start

Building the Static Site

yarn install
yarn build:site

This will place static files in the build/ directory. You can copy these out to place on a static web host.

Contact

For questions and comments, please contact:

Keywords

none

Install

npm i @internetarchive/ia-design-system

DownloadsWeekly Downloads

49

Version

0.3.1-alpha.21

License

AGPL-3.0-only

Unpacked Size

316 kB

Total Files

30

Last publish

Collaborators

  • jim-at-ia
  • tracey.pooh
  • latonv
  • markcarranza
  • ibnesayeed
  • bfalling
  • mitraardron
  • rchrd2
  • vbanos
  • kngenie
  • hyzhak
  • iisa
  • jbuckner
  • shaneriley
  • cdrini
  • nsharma123
  • mattm-archive
  • dualcnhq