Skip to content

Glue allows you to write clean, structured and maintainable html projects

License

Notifications You must be signed in to change notification settings

withmukeshjoshi/gluu

Repository files navigation

Gluu - Lightweight HTML Framework

What is Gluu? Gluu is a lightweight html compiler which help in maintaining large html/css/js projects by using partials. Gluu help writing clean and maintainable code. Sometime you dont want to use heavy frameworks but need features like partials and two way communication.

What is a partial? Partial is a reusable code which you can use throughout the project. for example header, footer, sidebar can be shared between all pages. It will make the code more readable and easy to maintain.

Benefits of Partials? Partial allows you writing clean, fast and maintainable code.

Prerequisites?

Gluu is one of the simple HTML framework that you will use.

  • npm

Installation

npm install gluu

----- YARN ------

yarn add gluu

create a gluu config file by running below command:

gluu init

you can manually create a gluu.config.json file and a folder named partials at the project root. default glue.config.json

{
  "partialDirectory": "partials",
  "syntax": "partial",
  "output": "dist",
  "ext": ".html",
  "src": "src",
  "pretty:true
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Basic Example of Implementing Partials -->
    <!-- gluu will search demo.html file inside the "partials" folder -->
    <partial name="demo.html" />
  </body>
</html>

You can also pass parameters to a partial

<partial name="demo.html" heading="This is a h1 heading" />

to use the parameter in partial file simply use {parameter}

<!-- demo.html -->
<h1>{heading}</h1>

There are times when you need to add some style/script dependencies to partial but do not want them to be included in the complied file. In most of the cases its because the main file already has the code. to prevent the duplicate code added to the complied html, use ignore tag.

<!-- any partial can have it -->
<ignore>
  <!-- your script/style here -->
</ignore>

CLI Paramters:

  • "-l" to show logs
  • "--pretty=false" to disable prettier

Goals

  • pass content to partial
  • Process multiple files
  • Prettify output files
  • add content to head/footer from the partial

For feedback and query, please write to admin@iammukesh.com

I also make youtube videos :) https://youtube.com/askmj