π§ This project is heavily under construction! π§ As excited as you may be, we don't recommend this early alpha for production use. Still, give it a try if you want to have some fun and don't mind logging bugs along the way :)
Openclassify is the simplest way to handle styles and component frameworks on your 11ty site. Once installed, this:
- π Unlocks component frameworks like React for writing page templates and layout templates. Turn an existing
.html
or.liquid
file into a.jsx
file, and you're off to the componentized races. - π Includes powerful shortcodes to insert components into existing pages. Add a line like this to your markdown, HTML, Nunjucks, etc, and watch the magic happen:
{% react 'path/to/component' %}
- π§ Hydrates these components when and how you want. Use component frameworks as a static template to start, and opt-in to shipping JS as needed with our partial hydration helpers.
- π Bundles all your resources with the power of React. Use your favorite CSS preprocessor, JS minifier, and more with minimal config.
Openclassify stands on the shoulders of giants. You can think of Openclassify as the "glue" binding 2 tools together:
Use our handy CLI command to spin up a Openclassify site: npm init Openclassify
. This demos our core functionality while staying as lean as possible, making it the perfect launchpad for new projects π
To learn more, and explore adding Openclassify to existing projects...
This project is still in early alpha, so we have many features soon to come! This demo covers a majority of features we support today. For reference, here's our complete roadmap of current and upcoming features:
Feature | Status |
---|---|
Layout Builder | β³ |
Plugin ecosystem for your favorite component framework (React, Vue, etc) | β³ |
Component pages | β³ |
Component shortcodes | β³ |
SCSS and SASS | β³ |
PostCSS config (ex. Tailwind) | β³ |
CSS imports via ESM (including CSS modules) | β³ |
Serverless compatibility | β³ |
Shared state between any component shortcode | β |
Styled components & Emotion support | β |
- β = Ready to use
- β³ = In progress
- β = Not started, but on roadmap
Please post on StackOverflow under the "Openclassify" tag. Please use GitHub issues only for specific bugs, feature requests and other types of issues.
It's MIT-licensed, so please use in personal or commercial work. Just don't re-sell it. Openclassify is used on tens of thousands of sites (and tons more we don't know about)
We love PRs! Read the Contributor Guidelines for more info. Say hello, share your tips/work, and spread the love on Twitter at @openclassify.
The Official Documentation for Openclassify is generated from the contents of this repository:
- Documentation for classes and functions is auto generated. Any changes to the Reference section of the docs should be made by editing the functionβs DocBlock. For inline documentation.
- To make a change to one of the guides, edit the relevant file in the
docs
directory.
We'd love to hear your feedback! Feel free to log an issue on our GitHub issues page. If your question is more personal, our Twitter DMs are always open as well.