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:
<style>
.page { padding: 24px 0; width: 100% !important; font-size: 12px; color: #f00; }
@media and (min-width: 768px) { .page { font-size: 14px; } }
</style>
<div class="page"></div>
.page { padding: 24px 0; width: 100% !important; font-size: 12px; color: #f00; }
@media and (min-width: 768px) { .page { font-size: 14px; } }
</style>
<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>
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
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
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}}.
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>
<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}}?
Notice that the 2 layers with font-size-18px have been grouped in the resulting {{$css}}?
<style>
.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;}
</style>
<div know="yf">black 18px light</div>
<div know="bv">red 24px bold</div>
<div know="ay">blue 18 px semibold</div>
.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;}
</style>
<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>
<div know="table-row">
<div know="cell">Bottom Left</div>
<div know="cell">Bottom Right</div>
</div>
</div>
<div know="table-row">
<div know="cell">Top Left</div>
<div know="cell">Top Right</div>
</div>
<div know="table-row">
<div know="cell">Bottom Left</div>
<div know="cell">Bottom Right</div>
</div>
</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>
</div>
<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>
</div>
xxsm
xsm
sm
md
lg
xl
xxl
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>
<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]">
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.
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="https://cdn.jsdelivr.net/gh/knowcss/knowcss@latest/src/knowcss-colors.js"></script>
<script src="https://cdn.jsdelivr.net/gh/knowcss/knowcss@latest/src/knowcss-shorthand.js"></script>
<!-- Use latest stable, minified version -->
<script src="https://cdn.jsdelivr.net/gh/knowcss/knowcss@latest/dist/js/knowcss.min.js"></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>
</div>
<script src="https://cdn.jsdelivr.net/gh/knowcss/knowcss@latest/src/knowcss-colors.js"></script>
<script src="https://cdn.jsdelivr.net/gh/knowcss/knowcss@latest/src/knowcss-shorthand.js"></script>
<!-- Use latest stable, minified version -->
<script src="https://cdn.jsdelivr.net/gh/knowcss/knowcss@latest/dist/js/knowcss.min.js"></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>
</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}}.
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]);
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>
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.