open-index/open-npm huggingface dataset:
npm package: @nikoloza/scratch-all
Description: [![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/scratch-css/all) [![npm (scoped)](https://img.shields.io/npm/v/@nikoloza/scratch-all.svg)](https://www.npmjs.com/package/@nikoloza/scratch-all)
Latest version: 0.7.1

# All Scratch modules together

[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/scratch-css/all)
[![npm (scoped)](https://img.shields.io/npm/v/@nikoloza/scratch-all.svg)](https://www.npmjs.com/package/@nikoloza/scratch-all)

Joining all Scratch modules and packing as a single one. It includes all of those:

- [@scratch-css/reset](https://github.com/scratch-css/reset) - Scratch reset
- [@scratch-css/scratch](https://github.com/scratch-css/scratch) - Main Library
- [@scratch-css/grid](https://github.com/scratch-css/grid) - Grid system
- [@scratch-css/ui](https://github.com/scratch-css/ui) - UIkit
- [@scratch-css/helpers](https://github.com/scratch-css/helpers) - Helpers
- [@scratch-css/animations](https://github.com/scratch-css/animations) - Animations

To know more about Scratch and its modules you can [read here](https://github.com/scratch-css/scratch).

### Setup:

    npm install @scratch-css/all --save

You need to import it in your CSS file:

    @import '@scratch-css/scratch';

Or, import from `node_modules` path:

    @import '@scratch-css/scratch/index.css';

### Try:

Try to add this snippet in your CSS just to check if it works:

    body { background-color: var(--success) !important; }

Background must be green, [is not it](https://github.com/scratch-css/scratch/issues)?
npm package: @nikoloza/scratch-animations
Description: Animations library for Scratch users
Latest version: 0.7.0

# Animations
Animations library for Scratch users 

[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/scratch-css/animations)
[![npm (scoped)](https://img.shields.io/npm/v/@nikoloza/scratch-animations.svg)](https://www.npmjs.com/package/@nikoloza/scratch-animations)
[![David](https://img.shields.io/david/scratch-css/animations.svg)](https://www.npmjs.com/package/@nikoloza/scratch-animations)
npm package: @nikoloza/scratch-grid
Description: Flexible responsive grid system
Latest version: 0.7.0

# Scratch Grid
Flexible responsive grid system 

[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/scratch-css/grid)
[![npm (scoped)](https://img.shields.io/npm/v/@nikoloza/scratch-grid.svg)](https://www.npmjs.com/package/@nikoloza/scratch-grid)
[![David](https://img.shields.io/david/scratch-css/grid.svg)](https://www.npmjs.com/package/@nikoloza/scratch-grid)
npm package: @nikoloza/scratch-ui
Description: Scratch UI CSS basic components.
Latest version: 0.7.0

# Scratch UI
Scratch UI CSS basic components. 

[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/scratch-css/ui)
[![npm (scoped)](https://img.shields.io/npm/v/@nikoloza/scratch-ui.svg)](https://www.npmjs.com/package/@nikoloza/scratch-ui)
[![David](https://img.shields.io/david/scratch-css/ui.svg)](https://www.npmjs.com/package/@nikoloza/scratch-ui)

Components:
- form
  - field (input)
  - textarea
  - select
  - button
  - radio
  - checkbox
  - toggle slider
  - form groups
- layout 
  - container
  - header
  - footer
- sidebar
  - normal
  - off-canvas
- menu
  - dropdown
  - accordeon 
- modal
  - normal
  - sticky
  
and more coming soon.
    
The default design is just to use it in showcase. It's configurable and API reference is avaiable here.

You can also choose only ones you really need for your project, so you don't have to install them all. For this you can run:

    npm install @scratch-css/ui{/family{/component}}
    
Where `{family}` is the set of similar components (like `form` or `layout`) and `{component}` represents just a component (like `button` or `field` for form, or `header` or `sidebar` for `layout`). They are optional and you don't have to specify.