Φ / Scratch framework

Scratch is CSS framework and methodology to build web, mobile and TV applications with one code base. We have micro modular architecture, so you choose what you really want to take. Using it means to follow some good practices, make everything configurable and easy to change. We have some built-in features as well as some additional modules you may also want to use.

--

Scratch provides management system for these fields:

• Colors
• Units
• Responsive breakpoints
• Typography set
• Gutters (or gaps)
• Writing directions
• Reset

We also have other libraries as modules to enhance its possibilities:

• Reset - CSS reset for Scratch apps.
• Grid system - two types of grid system.
• UI kit - rich library of UI components.
• Helpers - helper classes to use inline in HTML.
• Animations - CSS animations and transitions.

They are based on Scratch, and are great examples of using it. You have all separated on npm, or you can use them all together.

--

Setup

To add Scratch in your npm dependencies list, run:

npm install @scratch-css/scratch --save

You need to import it in your CSS file afterwards:

@import '@scratch-css/scratch';

Or, import from node_modules path:

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

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?

--

Visualization

Scratch is not an UI framework, it just gives your a powerful API to build them efficiently. But, as I mentioned above, we also have UI components library on top of Scratch. It is available in this repository. You can install it via npm.

--

Preprocessors

Right now, I intend to use CSSNext based on PostCSS to write tomorrow's CSS today. I believe this is the best environment to write efficient, performant and pure CSS, with no extra stuff and fastest compile time possible. I may add support for LESS and SASS lovers in the future depend on demand.

--

History

Scratch has a little history. It slowly begun to be developed back in 2011. It was documented on Georgian language and looked like this. The first version on Github was written on LESS. It had built-in UI components, helpers and layout techniques including row-n grid system. Then, I cleaned it up from unnecessary things and decided to divide it by domains. Now, it has became very lightweight and modular framework.

--

Author(s)

• nikoloza - Creator of Scratch.
• vigour-io - Significant improvements and cool ideas have came while working at Vigour.
• You can also become supporter by contributing, creating an issue for any new idea or just being a stargazer.

--

License

Scratch is MIT licensed.

--

Contribution

To run a project, you probably need Node.js and NPM installed.

To install dependencies you need to run:

npm i webpack webpack-dev-server -g && npm i

To run, you can use:

npm start

For GIT related information, please read instructions at Contributing to Open Source on GitHub.