Introducing a Mini Static Thingy Wingy

The world is full of frameworks and content management systems, we're very spoiled when we want to create an application, but sometimes, you just need something static, simple and fast, so I created a Mini Static Thingy Wingy.

What is it about?

In a world full of frameworks, packages and guidelines, it’s sometimes a bit of an overkill to use all of these frameworks. Sometimes you just want to create a simple page or a sandbox to play in.

The Mini Static Thingy Wingy was created with just one thing in mind: An easy setup for a simple HTML and CSS driven page. This could be a landing page, a small demo, or an HTML presentation.

By using Twig as a templating engine and PostCSS + SCSS to handle the styling, it’s a very simple setup. The Thingy is not meant to be the next new thing, it’s meant to be mini, and static, to create something on the fly (wing it).

View Mini Static Thingy Wingy on GitHub

Why create this?

It’s definitely not something new, and a lot of things are borrowed. The reason I created this is because it happens occasionally that I just need to create a little landing page. Sometimes I just want to set up something fast to create a page, or maybe two, or make a demo. And at times like that, I just want to get started fast. I used something similar like this before but I cleaned it up, added PostCSS in the mix and thought it would be nice to share.

From my job at iO, I’m used to working in Twig alongside with React. For such a small page, I always found React to be a bit overkill, so I chose Twig as a templating engine. This creates the possibility to create some partials, keep my files clean and transfer some variables between them.

How to run a Mini Static Thingy Wingy

Make sure you have the latest node version installed. Simply get the main directory and run:

npm install

Now you are ready to build! To start watching you files for changes, run the following:

npm run dev

This will start the server at localhost:5000 and you’ll already have a live reload on your index.twig file and your .scss file. In the next part, i’ll go a bit more in-depth, but don’t worry, it’s easy

When you’re happy with your result and want to build this, just add the following command which will create a build folder at the root of you projects, with your HTML, CSS, JS files (and other assets):

npm run build:production

Note: The CSS is automatically injected before the closing of the <head> tag, while JS is automatically added before the closing of the <body> tag.

How to build pages

Ofcourse, just building one file isn’t enough, here are some of the things you can do to build your static website.

Creating template files

In the src folder of your project, you can find a templates.json file. When you first open the project, it will look like this:

[
    {
        "filename": "./index.html",
        "template": "./templates/index.twig"
    } 
]

Whenever you want to create a new html file in your build, you’ll have to add another line. The first line is the output filename, and the second one is the input file.

[
    {
        "filename": "./index.html",
        "template": "./templates/index.twig"
    },
    {
        "filename": "./my-new-file.html",
        "template": "./templates/original-new-file.twig"
    }
]

Other commands

npm run build

Will build the files without minifying or combining CSS. This is a development output.

npm run watch

Will build the files without minifying or combining CSS and watch for changes, will rebuild on change. This is slower than running the dev server.

npm run install:demo

This will install some demo files with examples and start the server.

!!! Be careful, as this WILL overwrite items in your src folder !!!

Why Twig, PostCSS and Vanilla JS?

Twig

Twig is a templating language by Symfony. It’s well known for it’s implementations in Craft CMS and Drupal. Twig felt like the right choice for me because first of all, I’m used to it and second of all, it still feels like writing HTML

Twig also makes it easy to set variables for this Mini Static Thingy Wingy since it allows you to pass variables like so:

{% include "./partials/_navigation.twig", with { active: "home" } %}

PostCSS

I love to play around with PostCSS and all it has to offer. You can add your own custom packages in the postcss.config.js file at the root of the project.

In the production build, I added the purgeCSS and PostCSS Clean plugins, because they make sense to me, but if you’d rather see those go, you can always go into the config file and delete them.

Pure simple Javascript

Because we want to keep it small and clean, besides… Vanilla JS is a lot of fun. I added Babel and some plugins to make life a bit more easy such as dynamic import and transform runtime. You can always add more if you like.

Working with assets and translations

If you want to create something bigger, it’s still possible, however, this little Thingy wasn’t meant to do that. You can play around with subfolders or even add translations files in the form of a json-file.

Assets and subfolders for templates

When using relative paths to your tabs, it can get harder when you want to use subfolders. By default a variable is set in the _base.html which sets the base path of assets to "./assets/".

{% set assets = assets|default("./assets/") %}

When using subfolders it might get handy to update this variable to a new relative path such as:

{% set assets = "../assets/" %}

Using translation files

You can upgrade the webpack config to look for translation files in your folder.

1. In you webpack, add the following line of code

let templatePages = _.map(pages, function(page) {
//new line of code below
let translation = require(path.resolve(__dirname, "src")+'/translations/lang.'+page.lang+'.json');			
// etc

2. When creating a template add a language parameter for example:

[
    {
      	"filename": "./index.html",
      	"template": "./templates/index.twig",
		"lang": "en"
    },
    {
      	"filename": "./index-fr.html",
      	"template": "./templates/index.twig",
		"lang": "fr"
    }
]

Now we will create two pages from the same template, which will look at a different translation file (eg:lang.fr.json and lang.en.json)

3. Let’s create those two translation files in src/translations and add a translation with the same key.

In translations/lang.en.json

{
 "hello": "Hello world"
}

in translations/lang.fr.json

{
    "hello": "Bonjour le monde"
}

4. In our _base.twig template, we can now set a global variable

{% set t =  htmlWebpackPlugin.options.trans %}

5. And in our extended templates we can just refer to those variables as such:

    {{ t.hello }}

You should now get an output with different files in different languages, using the same base template.

Thoughts…

So, I created this mostly for personal use, but I hope maybe someone else can find a benefit in it. It’s an easy setup and I think it could be great for beginners that are just starting to learn HTML and CSS and find a bit of insight in the Twig templating language. I had fun creating it and will probably use it in the future if I need to create a “quick page”. If it is broken, feel free to file an issue on GitHub and I’ll see what I can do. Even if you have an idea on how to upgrade it, feel free to create a pull request. But remember, it has to stay Tiny ;)

Manage Cookies