div
v0.0.2
Published
Website Builder
Maintainers
tonyleanpmReadme
Say Hello to Div 👋
A website builder you’ll actually enjoy using. No more bloated frameworks, complicated configs, or dependency chaos. We're taking back the art and reclaiming the throne of crafting simple HTML websites 👑
🛠️ Setup in a Snap
Make sure you have node installed on your machine. Then copy/paste the following command in your terminal:
npm install -g divNow you'll have the div command available on your machine, allowing you to run the following:
- div new folder-name - Create a new website with the welcome template
- div dev - Start up a dev environment for your website
- div build - Build a production ready version of your website (available in the
sitedirectory)
Next, head on over to the official documentation to learn more about building your site.
🖐️ Five reasons this might just be your jam!
1. Page-based Routing
Each file within the pages directory corresponds to a route on your website. With a structure like this:
pages
├── index.html
├── about.html
├── contact
│ ├── index.html
│ ├── form
│ │ ├── index.htmlYour new site will have the following routes available:
http://localhost:3000
http://localhost:3000/about
http://localhost:3000/contact
http://localhost:3000/contact/form2. Layouts
Design layouts that multiple pages can utilize.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
</head>
<body>
{slot}
</body>
</html>Then, use it in any page.
<layout title="Radical Righteousness" src="main.html">
<h1>🏄♂️ Totally Tubuloso Website</h1>
</layout>3. Includes
Create re-usable HTML partials with the <include> tag. Specify the HTML file with the src attribute.
<layout title="Behind the Scenes!" src="main.html">
<include src="about-header.html"></include>
<include src="about-copy.html"></include>
</layout>4. TailwindCSS Integration
Add the TailwindCSS shortcode to the <head> of any layout and it will automatically be injected. Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{title}</title>
{tailwindcss}
</head>
<body>
{slot}
</body>
</html>It will be replaced with the Tailwind CDN link in dev, and a minified CSS file will be compiled during build.
5. Collections
Add collections of data to your application. Here's an example collection located at collections/menu.json
[
{
"title" : "Home",
"link" : "/"
},
{
"title" : "About",
"link" : "/about"
}
]Now, you can easily loop through this collection:
<ForEach collection="menu">
<li>{menu.title}</h1>
</ForEach>Those are just a few of the hot features available, but there's so much more to uncover and learn.
Learn More
You can learn about all the features available by visiting the official documentation. You may also be interested in checking out some of the templates here.