Nov 29, 2022 - v2.0.7 Released!
KnowCSS, The NoCSS Engine

Introducing KnowCSS, the revolutionary NoCSS Engine

Create responsive, modern, optimized, dynamic, cross-compatible layouts as you type in-browser with real-time preview.
No pre-processing or post-processing required!
Stop Doing This:
   .page { padding: 24px 0; width: 100% !important; font-size: 12px; color: #f00; }
   @media and (min-width: 768px) { .page { font-size: 14px; } }
<div class="page"></div>
Start Doing This:
Dynamic: <div know="padding-24px/0 width-100%! font-size-12px color-red md{font-size-14px}"></div>
Shorthand: <div know="p-24/0 w-100%! px-12 red md{px-14}"></div>
Minified: <div know="p-24/0 full! 12 red md{14}"></div>
Ok, what is "KnowCSS"?
{{$knowcss}} is a free-form, class-based, JavaScript engine which generates, optimizes, and minimizes your {{$css}} for you, in real-time, without ever requiring you to leave your code!
{{$knowcss}} has no restrictions and no limitations.
If you know {{$css}}, you already {{$knowcss}}!
And, what is "NoCSS"?
NoCSS, literally meaning "No CSS", is a new approach to generating {{$css}} without creating separate stylesheets or adding style tags to elements. With classes alone, added directly into your {{$html}} tags, you can design an entire website as you type in a single {{$html}} template with NO CSS.
Does KnowCSS affect site performance?
No. {{$knowcss}} is entirely built for speed to render all your {{$css}} instantaneously, in real-time, on every page render with no slowdown and no CLS. Your visitors will see no page render difference between a traditional {{$css}} file and {{$knowcss}}. However, {{$knowcss}} renders even faster than a blocking {{$css}} file, especially if a large set of styles are in use. Run this site through Lighthouse and see the results for yourself.
What is "KnowParent"?
KnowParent is the incredibly simple {{$knowcss}} method for applying styles to the parent of an element!

Discover More
What is "KnowCSS Now"?
KnowCSS Now is the {{$knowcss}} IDE that runs entirely in browser, offering real-time preview, optimization, and minification of your {{$html}} and {{$css}}.

By developing directly in your favorite browser, there is no need to post-process, upload, refresh, or WAIT!

With KnowCSS Now, the power to develop layouts fast and efficiently is at your fingertips.

Try It Now
How is KnowCSS different from other frameworks?
First off, {{$knowcss}} is not a framework. Frameworks incur restrictions and limitations. Also, most frameworks force you to abandon existing knowledge, requiring you to completely learn new concepts and methods.

Many frameworks require you to spend time with configuration files, build processes, and development headaches. {{$knowcss}} eliminates all of that.

The goal of {{$knowcss}} is to give you complete freedom to write your own code using everything that you already know about {{$css}}. Or, if you are a beginner, to help you learn {{$css}} concepts and methods with an easily consumable approach.

Anything you could do in traditional {{$css}} can be accomplished entirely with {{$knowcss}}.
Can I see a basic example?
<div know="color-000 font-size-18px light">black 18px light</div>
<div know="color-f00 font-size-24px bold">red 24px bold</div>
<div know="color-00f font-size-18px semibold">blue 14px semibold</div>
The above {{$html}} with {{$knowcss}} classes will convert to the {{$html}} and {{$css}} below.
Notice that the 2 layers with font-size-18px have been grouped in the resulting {{$css}}?
.yf {color:#000; font-weight:300;}
.bv {color:#f00; font-size:24px; font-weight:700;}
.ay {color:#00f; font-weight:600;}
.yf, .ay {font-size:18px;}
<div know="yf">black 18px light</div>
<div know="bv">red 24px bold</div>
<div know="ay">blue 18 px semibold</div>
What about tables?
<div know="table center collapse all{padding-5px border-1px/solid/black alignmiddle}">
<div know="table-row">
<div know="cell">Top Left</div>
<div know="cell">Top Right</div>
<div know="table-row">
<div know="cell">Bottom Left</div>
<div know="cell">Bottom Right</div>
Top Left
Top Right
Bottom Left
Bottom Right
Can KnowCSS target screen sizes?
Yes. You may use standard screen sizes (Ex: sm, md, lg) or target by exact width (ex: 480, 640, 768).
<div know="all{color-gray display-inline margin-0/10px padding-2px}">
<div know="xxsm{color-000 semibold} xxsm-border=2px/solid/#000"></div>
<div know="xsm{color-300 semibold} xsm-border=2px/solid/#300"></div>
<div know="sm{color-600 semibold} sm-border=2px/solid/#600"></div>
<div know="md{color-900 semibold} md-border=2px/solid/#900"></div>
<div know="lg{color-c00 semibold} lg-border=2px/solid/#c00"></div>
<div know="xl{color-f00 semibold} xl-border=2px/solid/#f00"></div>
<div know="xxl{color-f00 semibold} xxl-border=2px/solid/#f00"></div>
And images? With hover/touch effects?
To reduce redundancy in code, and to reuse common sets of attributes and actions, you may use the <define> tag to assign a variable to be referenced by other elements. In this example, [ro] is defined and used to apply repeated styles to each of the 3 images while [hl] and [hr] define the hover actions.
<define know="[ro] width-100px height-100px border-radius-50% border-1px/solid/#ccc opacity-0.75 margin-0/5px transition-transform/1s/linear"></define>
<define know="[hl] hover{border-1px/solid/#933 opacity-1.0 transform=rotate(20deg)}"></define>
<define know="[hr] hover{border-1px/solid/#933 opacity-1.0 transform=rotate(-20deg)}"></define>
<img src="lion.jpg" know="[ro] [hl]">
<img src="dog.jpg" know="[ro] [hr]">
<img src="owl.jpg" know="[ro] [hl]">
Lion Dog Owl
Can I still use my own, existing custom classes?
No problem. Use standard class and style attributes or, with the know attribute, just wrap classes in a retain{}, keep{} or my{} grouping.
Or prefix individual classes with retain-, keep-, or my- and {{$knowcss}} will convert those to your original classnames at runtime.
So, you needn't worry, as {{$knowcss}} will leave your original class="" & style="" attributes and any existing stylesheets untouched while applying {{$knowcss}} generated classes & styles in real-time.
<div know="my{col-6 col-sm-4} retain-existing-class keep-this-class">
The above {{$html}} has no {{$knowcss}} classes defined. Your existing classes would be reverted so that you may include your existing stylesheet to retain those classes.
<div know="col-6 col-sm-4 existing-class this-class">
Does KnowCSS work with React, Next.js, and other frameworks/libraries?
Yes. {{$knowcss}} will do an initial render on DOMContentLoaded. From there, call $know().render() on useEffect() or other hooks and {{$knowcss}} will immediately re-render.
Ok. How do I install KnowCSS?
<!-- Copy these 2 files locally to customize colors and shorthand -->
<script src=""></script>
<script src=""></script>

<!-- Use latest stable, minified version -->
<script src=""></script>

<div id="root">
<div know="bold color-black font-size-16px">Hello, world.</div>
<div know="color-333 font-size-12px italic">KnowCSS was here!</div>
Can I include KnowCSS in my node.js project?
Yes. By installing KnowedCSS, the node.js module (Express, React, and Next.js compatible), you can easily create {{$knowcss}} templates in your project with KnowCSS Now.
Your raw {{$html}} with {{$knowcss}} classes will be converted to usable {{$css}} and {{$html}}.
$ npm install knowcss
const knowedcss = require('knowcss');
var ret = knowedcss.compile('<div know="font-size-16px">Hello, world!</div>' );
console.log('css == ' + ret[1]);
console.log('html == ' + ret[0]);
css == .bz{font-size:16px}
html == <div class="bz">Hello, world!</div>
Any final words?
Prepare to be impressed. This entire website is built in {{$knowcss}}! View source now to see how it was accomplished within the <div know="root"></div> block.
© 2021 Jay Doublay
{ knowcss } <The-NoCSS-Engine/>