Chasse: Simplifying HTML Boilerplates

The Simplicity of HTML.

Without the Boilerplate!!

Define your components in HTML. Reuse them wherever you want to.

Build static websites the classic way - no frameworks, no learning curves.

Write and ship sites like a pro - all in a simple command.

Works seamlessly with your favourite IDE, frameworks and utilities...



Static Websites?

Many static websites can be shipped efficiently without the use of package managers or static site generators with their own jargon. Run a simple command and be good to go.

HTML-Only

Chasse puts a slight spin to the good old HTML syntax by introducing components, which are all handled by the parser. So no plugins or IDE extensions needed.

Similar Use to Sass

Usage of Chasse is derived from Sass, just to keep things similar. Define a parent file, run a command and convert to browser-usable HTML files. That's all!!

Not Another Tool to Learn

Learning new things is frustrating when all you want is to quickly get the job done. This is not a framework or library to wrap your head around, but a CLI parser to ease things.

Inspired from the Greats

Chasse is inspired from React components, Django template inheritance and Sass mixins. Use components like React & borrowing into files like Django templates.

CSS Frameworks

Chasse integrates well with most of the CSS frameworks out there that utilize classes within HTML for styling. For custom CSS, it is handled the usual way, or with Sass or Less.


"Moving away from the basic and boxing yourself

into a site generating framework is easy, until

you start running out of patience to learn all

customizations and feel the box closing in..."

Most static sites are general enough to be taken care of by static site generators. But at times the cons might just be too overwhelming

for a particular project. Dependency management, package installations, learning the framework, managing SEO and accessibility separately.

It's easy to choose a static site generator and spend hours at it. But often there is no one size-fits-all solution for everything.

Sometimes, all you need is HTML - with superpowers...


Quickly Get Started

  • Install the Chasse binary on your system. The installation section shall walk you through the whole process.
  • Create a parent Chasse file, named as template.chasse.html:
    HTML
    <Navbar!!>
        <nav>
            <ul>
                <li>About</li>
                <li>Contact</li>
                ...
            </ul>
        </nav>
    </Navbar!!>
    
    <Footer!!>
        <footer>
            All rights reserved.
        </footer>
    </Footer!!> />
  • Create a child Chasse file, named as child.chasse.html (declare the parent files to import from, then use the components in the file):
    HTML
    <template!!>
    
    <!DOCTYPE HTML5>
    <html>
        ...
        <Navbar!! />
        ...
        <UniversalFooter!! />
    </html>
  • The first argument is the file that needs to be converted. The second argument is the relative path to the folder where the generated HTML files are to be kept. Run this commmand, and you will get all your HTML files in one place:
    Shell
    chasse child.chasse.html src
  • Glance through the code again to notice the use of exclamation points while declaring and using components. It is mandatory to follow all these rules (the .chasse.html extension, spaces between words and exclamations (and trailing slashes), capitalized component names), et cetera.
  • There are much more customizations, features, recommendations and development magic available in the documentation. Check it out first!!