.. | ||
bin | ||
docs | ||
lib | ||
misc | ||
plugins | ||
.eslintrc.cjs | ||
aliases.ini | ||
boilerplate.txt | ||
CHANGELOG.md | ||
cli.php | ||
composer.json | ||
CssCrush.php | ||
index.js | ||
LICENSE.txt | ||
package-lock.json | ||
package.json | ||
README.md |
A CSS preprocessor designed to enable a modern and uncluttered CSS workflow.
- Automatic vendor prefixing
- Variables
- Import inlining
- Nesting
- Functions (color manipulation, math, data-uris etc.)
- Rule inheritance (@extends)
- Mixins
- Minification
- Lightweight plugin system
- Source maps
See the docs for full details.
Setup (PHP)
If you're using Composer you can use Crush in your project with the following line in your terminal:
composer require css-crush/css-crush:dev-master
If you're not using Composer yet just download the library into a convenient location and require the bootstrap file:
<?php require_once 'path/to/CssCrush.php'; ?>
Basic usage (PHP)
<?php
echo csscrush_tag('css/styles.css');
?>
Compiles the CSS file and outputs the following link tag:
<link rel="stylesheet" href="css/styles.crush.css" media="all" />
There are several other functions for working with files and strings of CSS:
csscrush_file($file, $options)
- Returns a URL of the compiled file.csscrush_string($css, $options)
- Compiles a raw string of css and returns the resulting css.csscrush_inline($file, $options, $tag_attributes)
- Returns compiled css in an inline style tag.
There are a number of options available for tailoring the output, and a collection of bundled plugins that cover many workflow issues in contemporary CSS development.
Setup (JS)
npm install csscrush
Basic usage (JS)
// All methods can take the standard options (camelCase) as the second argument.
const csscrush = require('csscrush');
// Compile. Returns promise.
csscrush.file('./styles.css', {sourceMap: true});
// Compile string of CSS. Returns promise.
csscrush.string('* {box-sizing: border-box;}');
// Compile and watch file. Returns event emitter (triggers 'data' on compile).
csscrush.watch('./styles.css');
Contributing
If you think you've found a bug please create an issue explaining the problem and expected result.
Likewise, if you'd like to request a feature please create an issue with some explanation of the requested feature and use-cases.
Pull requests are welcome, though please keep coding style consistent with the project (which is based on PSR-2).
Licence
MIT