Celestial Lite

Celestial Lite takes all of the great features of the Celestial Framework, and turns it into a JAMStack app. Spend less time writing code and more time shipping UIs.

Celestial Lite comes prebuilt with pages, functions, and templates, as well as prebuilt header, footer, CSS, JS, and meta tag components. It supports partial CSS and JS files, and also JSON-based pre-rendering with support for third party database tools such as Mongo or Backendless. It can help you jumpstart your projects and get to the fun part: the coding. No more figuring out what meta tags your site needs, learning a new Javascript syntax, or what NPM modules you need to use without breaking the page. Celestial Lite handles all of this for you. It's a return to how the web should be. Static HTML, CSS, and JS files.

So Why Another Framework?

React, Angular, Vue, Next, Gatsby, Nuxt, and many others are all great tools that can accomplish some pretty extraordinary things. Data binding, state changing, page navigation without reload, and other complex tasks would be pretty difficult to recreate with static HTML. It also forces developers to write a specific way, which can help some teams that don't have structured dev leadership.

They also involve a lot of complex OOP designs. But what if you aren't classically trained in OOP? Picking up that methodology can be difficult, especially if you come from the design side of things. Another concern with these Javascript frameworks is that they put the strain of the web app on the client side and forces you to reinvent the wheel on many properties that already exist today in the HTML spec. They can cause accessibility concerns, and the semantics can be shaky. If you want to read more, check out this Smashing talk.

Celestial Lite is based off the 11ty Static Site Framework built by Zach Leatherman and is powered by NodeJS. The files have been structured to provide the best Developer Experience possible. Organizing your files is a breeze and you can write static HTML, Markdown, or any number of Javascript Templating languages like Nunjucks or Liquid. The default templating is Nunjucks since it resembles the Twig templating language found in the core Celestial Framework. Switching between Celestial Framework and Celestial Lite is a breeze.

Celestial Lite

/Project/
├── data
│   ├── API.json
│   └── otherAPI.json
│
├── includes
│   ├── layouts
│	│ 	├── base.njk
│	│	└── post.njk
│	│
│   ├── partial-css
│   ├── partial-js
│	└── site-components
│
├── images
│
├── pages
│   ├── homepage.njk
│   ├── about-us.njk
│   └── contact.njk
│
├── posts
│   ├── blog-post-1.njk
│   ├── blog-post-2.njk
│   └── blog-post-3.njk
<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<title>{{ title }} | {{ metadata.title }}</title>
	<meta name="description" content="{{ description or metadata.description }}">

	{% include "source/_includes/site-components/head-meta-tags.njk" %}

	{% include "source/_includes/site-components/head-css-tags.njk" %}
</head>
<body>

{% include "source/_includes/site-components/header.njk" %}

<main>
	{{ content | safe }}
</main>

{% include "source/_includes/site-components/footer.njk" %}

{% include "source/_includes/site-components/footer-js-tags.njk" %}

</body>
</html>

Celestial Lite comes with all the SEO tags you need including Open Graph and Twitter social tags. All of your HTML is compiled at the build time and so no extra strain is put on the client's device. It also comes out of the box with partial CSS and partial JS inlining which reduces the calls needed to load a webpage. Each of these is easily configurable and you can even combine and export your own custom files using NodeJS without an additional system like Grunt or Gulp.

Security

Since the output is a static site, theres nothing to hack. It's secure by default and it can be hosted on any platform, typically for free such as Netlify (my personal favorite!) or Cloudflare.

Nunjucks is also IDE friendly. IDEs such as Webstorm let you read and control your include paths, variable names, and functions without having to guess where you stored them.

Whats Built In

Celestial Lite comes with a plethora of built in, ready to use files and folders:

  • Auto-mapped data folder to hold JSON for content pre-rendering.
  • Images folder.
  • Layouts folder. By default the template comes with 3 layouts. One for the base, one for blog posts, and one for an optional "secondary" layout that can be used for experimentation.
  • Partial CSS folder with a blank styles.css file.
  • Partial JS folder with a blank scripts.js file.
  • NodeJS build time file (gives you unlimited control over what happens at build time).
  • Site Components folder to handle global components such as header, navigation bar, footer, and meta tags.
  • Pages folder to hold your content.
  • Page component folder to hold page specific items.
  • Posts folder to handle your blog posts. These are automatically mapped to the built-in blog engine.

API Examples

Your data folder can be accessed at build time or on client side using fetch requests. On build time, it can be useful to store repeated information such as an author profile for your blog. Below is an example of this.

authors.json

{
	"Zach": {
		"name": "Zach Voss",
		"image": "avatar-zach.jpg",
		"description": "I like to fly kites"
	},

	"John": {
		"name": "John Deere",
		"image": "avatar-john.jpg",
		"description": "Lawn mowers"
	},

	"Rock": {
		"name" : "Dwayne Johnson",
		"image": "avatar-rock.jpg",
		"description": "This is Smackdown!"
	}
}

blog-post-1.njk

---
title: "My New Blog Post"
author: "Zach"
---

<div class="blog-post-heading">
	<h1>{{ title }}</h1>
	<p>{{ authors[author].name }}</p>
	<p>{{ authors[author].description }}</p>
</div><!-- end blog post -->

Compiled HTML

<div class="blog-post-heading">
	<h1>My New Blog Post</h1>
	<p>Zach Voss</p>
	<p>I like to fly kites</p>
</div><!-- end blog post -->

Any JSON file you add to the data folder becomes immediately available as a global variable in your Nunjucks template files. Since everything is compiled at build time in the above example, your pages don't need to fetch any author info. It's already there in the source code!

In Closing

This was an amazing project to work on, and the work done by the 11ty community is incredible. This framework is currently being used by several corporations and is a blast to work on. For example, one company's project sped up their build time by 94%, and enabled their deployment schedule to go from once every 2 months to anytime they feel like it. Rapid, sustainable improvements are the way of the future, all while returning to the semantic roots of HTML. ✌.

If you want more, check it out for yourself!

The Celestial Lite Framework Repo

Finito! (The End)

Thanks for reading!