Static Site — Eleventy Now UI Kit

Hello Coder,

In case you are using a static site generator in your workflow, this well-known UI Kit crafted by Creative Tim agency, and prototyped in Eleventy SSG might help you to code faster your next project.

Static Site - Eleventy SSG with Now UI Design.


Static Site - for newcomers

A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to the user's web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application.

Consequently, a static web page displays the same information for all users, from all contexts, subject to modern capabilities of a web server to negotiate content-type or language of the document where such versions are available and the server is configured to do so.  Static sites, are safer sand faster, two major "pros" if we compare them with the dynamic sites built in Php, Python or any other server-side language.


What is Eleventy (11ty)

For newcomers, 11ty (or Eleventy) is a simple static site generator written in JavaScript that transforms a directory of templates of varying types (Liquid, Mustache, PUG, Markdown) into HTML ready to be deployed in production. We choose to generate projects on top of Eleventy, mostly for his flexibility:

  • Eleventy can be easily integrated into existing projects, based on his flexible configuration.
  • Most static site generators use a single type for the source files: Markdown is probably the most popular, Liquid, Handlebars .. etc. Well, Eleventy supports many formats and the developer can choose the type is most comfortable with.

Static Site Features

The static boilerplate comes with the latest tools used int the NPM ecosystem: Webpack, Babel, PostCSS, CSSnano, Autoprefixer, and Light-Server used for hot reload.

The goal of this boilerplate is to help developers to code faster their products. With this simple idea in mind, we are crafting all our products. In case something is missing from this kit, feel free to contact us on Discord.

Eleventy Now UI Kit - Video Presentation

Resources


Where to go from here

Show Comments

Get the latest posts delivered right to your inbox.