{this.props.title}

What is cssnext?

+ cssnext is a CSS transpiler that allows you to use + the latest CSS syntax today. + It transforms CSS specs into more compatible CSS + so you don't need to wait for browser support. + + + You can literally write future-proof CSS + and forget old preprocessor specific syntax. + +

Features

+ custom properties & `var()` +

+ reduced `calc()` +

+ custom media queries +

+ media queries ranges +

+ custom selectors +

+ automatic vendor prefixes +

+ `color()` support +

+ `gray()` support +

+ `hwb()` support +

+ hexa `#rrggbbaa` support +

+ `rebeccapurple` +

+ `:matches` pseudo-class +

+ `:not` pseudo-class + + (to l.3) + +

+ font-variant + + (to font-feature-settings) + +

+ filters + + (svg fallback) + +

+ `rem` units fallback + + (to px) + +

+ ::pseudo syntax + + (`:` compat) + +

+ + _l.* are level of the specification (when information is relevant)_ + +

Why cssnext?

+ Prior to 2015, CSS was frustrating by not having any specification for features we were looking for. + No variables, no math, no color manipulation & no customization. + Things are going to change soon since a lot of work has been made by the W3C to write new specs to make our life easier. + With cssnext, you can start using some new features today! +

+[webpack](https://github.com/cssnext/cssnext-loader) +, +[gulp](https://github.com/cssnext/gulp-cssnext) +, +[grunt](https://github.com/cssnext/grunt-cssnext) +, +[brunch](https://github.com/cssnext/cssnext-brunch) +, +[broccoli](https://github.com/cssnext/broccoli-cssnext) +, +[connect](https://github.com/cssnext/cssnext-connect) +, +[duo](https://github.com/cssnext/duo-cssnext) +or in +[prepros 5](https://prepros.io/) +

+ + + ) + } +} diff --git a/docs/src/modules/Analytics/index.js b/docs/src/modules/Analytics/index.js new file mode 100644 index 0000000..73bdee8 --- /dev/null +++ b/docs/src/modules/Analytics/index.js @@ -0,0 +1,25 @@ +import React, {Component} from "react" + +import isogram from "isogram" + +export default class Analytics extends Component { + + render() { + return ( + + ) + } +} diff --git a/docs/src/modules/Body/index.js b/docs/src/modules/Body/index.js new file mode 100644 index 0000000..5de0c53 --- /dev/null +++ b/docs/src/modules/Body/index.js @@ -0,0 +1,47 @@ +import React, {Component, PropTypes} from "react" + +import Header from "../Header" +import Footer from "../Footer" +import Analytics from "../Analytics" + +export default class Body extends Component { + + static defaultProps = { + scripts: [], + footer: true, + } + + static contextTypes = { + pkg: PropTypes.object.isRequired, + file: PropTypes.object.isRequired, + } + + static propTypes = { + children: PropTypes.oneOfType([ + PropTypes.array, + PropTypes.object, + ]).isRequired, + scripts: PropTypes.array, + footer: PropTypes.bool, + } + + render() { + return ( + + +

+ + {this.props.children} + +

What is cssnext?

Features

Why cssnext?

Future-proof code

It's fast. Lightning fast.

Active development

Based on NPM ecosystem

+ {file.title} +