{
  "_args": [
    [
      {
        "raw": "dadi/parts",
        "scope": null,
        "escapedName": null,
        "name": null,
        "rawSpec": "dadi/parts",
        "spec": "github:dadi/parts",
        "type": "hosted",
        "hosted": {
          "type": "github",
          "ssh": "git@github.com:dadi/parts.git",
          "sshUrl": "git+ssh://git@github.com/dadi/parts.git",
          "httpsUrl": "git+https://github.com/dadi/parts.git",
          "gitUrl": "git://github.com/dadi/parts.git",
          "shortcut": "github:dadi/parts",
          "directUrl": "https://raw.githubusercontent.com/dadi/parts/master/package.json"
        }
      },
      "/Users/eduardoboucas/Sites/speedtracker-react"
    ]
  ],
  "_from": "dadi/parts",
  "_id": "@dadi/parts@1.0.0",
  "_inCache": true,
  "_installable": true,
  "_location": "/@dadi/parts",
  "_phantomChildren": {},
  "_requested": {
    "raw": "dadi/parts",
    "scope": null,
    "escapedName": null,
    "name": null,
    "rawSpec": "dadi/parts",
    "spec": "github:dadi/parts",
    "type": "hosted",
    "hosted": {
      "type": "github",
      "ssh": "git@github.com:dadi/parts.git",
      "sshUrl": "git+ssh://git@github.com/dadi/parts.git",
      "httpsUrl": "git+https://github.com/dadi/parts.git",
      "gitUrl": "git://github.com/dadi/parts.git",
      "shortcut": "github:dadi/parts",
      "directUrl": "https://raw.githubusercontent.com/dadi/parts/master/package.json"
    }
  },
  "_requiredBy": [
    "#USER",
    "/"
  ],
  "_resolved": "git+ssh://git@github.com/dadi/parts.git#8812795dce6f89b44d33709997ce28a526cfa046",
  "_shasum": "f8731bf80e7b3e3dcbb2ee24537b7fddf24007c7",
  "_shrinkwrap": null,
  "_spec": "dadi/parts",
  "_where": "/Users/eduardoboucas/Sites/speedtracker-react",
  "author": {
    "name": "Eduardo Boucas",
    "url": "eb@dadi.co"
  },
  "bugs": {
    "url": "https://github.com/dadi/parts/issues"
  },
  "dependencies": {},
  "description": "A foundation for front-end projects",
  "devDependencies": {},
  "gitHead": "8812795dce6f89b44d33709997ce28a526cfa046",
  "homepage": "https://github.com/dadi/parts#readme",
  "keywords": [
    "dadi",
    "parts",
    "css",
    "sass",
    "framework"
  ],
  "license": "MIT",
  "main": "_main.scss",
  "name": "@dadi/parts",
  "optionalDependencies": {},
  "readme": "<img src=\"http://dadi.tech/public/assets/svg/dadi-logo-colour3.svg\" width=\"200\">\n\n# Parts\n\n> A foundation for front-end projects\n\n## Table of contents\n1. [Introduction](#introduction)\n2. [Installation](#installation)\n3. [Usage](#usage)\n  - [Components](#components)\n  - [Utilities](#utilities)\n  - [Tools](#tools)\n  - [Generic](#generic)\n  - [Settings](#settings)\n\n---\n\n## Introduction\n\nDADI Parts is a CSS framework and a set of guidelines to kickstart a new front-end project. It draws inspiration from key references in the industry, such as Harry Robert's [inuitcss](https://github.com/inuitcss) and [Airbnb's CSS/Sass Styleguide](https://github.com/airbnb/css).\n\nIt's built on three core principles:\n\n- **Modularity**: Approach UIs as a group of modular, self-contained and reusable components as opposed to monolithic pages\n- **Separation of concerns**: A front-end component is typically made up of markup (HTML), styling (CSS) and functionality (JavaScript), and it must be built in such a way that allows any of those parts to change (or be removed) without that affecting the others\n- **Self-explanation**: Developers should be able to clearly understand the behaviour of a component and all the forces acting on it without requiring any previous exposure to the project or understanding of its inner workings. The structure of the project should give new developers a high level of confidence when commiting changes or new features, providing mechanisms to reduce the risk of unwanted side effects <-- needs review\n\n## Installation\n\n1. Install via npm\n\n   ```shell\n   npm install @dadi/parts --save\n   ```\n\n1. Create a `components` folder in your project's Sass directory\n\n1. Grab a [sample config file](_config.scss.sample), copy it to your project and start editing the settings\n\n1. Create a loader file where you'll load the config file, the DADI Parts core, the components and any other third-party library you wish to use\n\n  ```scss\n  // Load config\n  @import 'config';\n  \n  // Load core\n  @import '../path/to/node_modules/@dadi/parts/main';\n  \n  // Load components\n  @import 'components/components.button.scss';\n  ```\n\n## Usage\n\nStyles are applied against DOM elements that are targeted using classes and **never** IDs or tags. This ensures that the HTML markup,which conveys semantics, stays completely decoupled from CSS, which is purely visual. For example, you should be able to create a *button* component that can work as a `<a>`, `<button>` or `<input>` without that affecting its appearance.\n\nClasses are named using the [BEM naming convention](https://en.bem.info). Additionally, and for the sake of transparency and self-explanation, they must be prefixed with a namespace to clearly indicate what the class is for, why it exists and how safe it is to change it without that causing unwanted effects. [[Ref]](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)\n\nThe framework is formed of five different types of elements, each within they own directory:\n\n### Components\n\nThe building blocks of our UIs. They must be modular, reusable and self-contained. They are specific to each project, so the `components` directory is not packaged with Parts and must be placed within the project.\n\nComponent classes are prefixed with `c-`.\n\n*Example:*\n```scss\n.c-article {}\n.c-article__title {}\n.c-article__body {}\n.c-article__body--with-video {}\n```\n\n### Utilities\n\nSingle responsibility rules to achieve very specific tasks when a component is not possible or practical. These **should be avoided** when possible, as relying too much on utility classes harms consistency and breaks the premise of self-contained UI components.\n\n> *They do one thing in a very heavy-handed and inelegant way. They are to be used as a last resort when no other CSS hooks are available, or to tackle completely unique circumstances, e.g. using .u-text-center to centrally align one piece of text once and once only. They are only one step away from inline styles, so should be used sparingly.* [(source)](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)\n\nUtility classes are prefixed with `u-`.\n\n*Example:*\n```scss\n.u-padding-top {}\n.u-margin {}\n```\n\n### Tools\n\nHelper functions/mixins to perform general tasks. Tools do not expose any classes, and it's common for utility classes to utilise them.\n\nBoth mixins and functions are prefixed with `dp-`.\n\n*Example:*\n```scss\n.c-some-component {\n  @include dp-clearfix;\n  @include dp-wrapper(1200px);\n \n  font-size: dp-size('large');\n}\n```\n  \n### Generic\n\nCollection of rules to provide a consistent behaviour across different browsers (e.g. reset and normalise, box sizing). These affect projects globally and shouldn't be changed unless there's a very strong reason to do it.\n  \n### Settings\n\nConfiguration files. They exist both in the library core (setting the defaults) and on the project directories (customising the project). They configure things like font sizes and families, colours and spacing.\n",
  "readmeFilename": "README.md",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/dadi/parts.git"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "version": "1.0.0"
}