In case you are using a static site generator in your workflow, especially Eleventy (11ty), this article might be useful because presents a few UI Kits already integrated into this trendy tool.
In a rush? Feel free to access the Github static sites index that contains 15+ projects (free & commercial) built on top of Eleventy. Thank you!
What is a Static Site
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)
- 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.
This static site boilerplate code uses a design crafted by Html5Up agency. The UI is integrated on top of a minimal Webpack builder, equipped with a basic set of tools:
This project is a free one, and anyone can build the project just by typing a few lines of code:
$ git clone https://github.com/app-generator/eleventy-html5up-photon.git $ cd eleventy-html5up-photon $ yarn # install modules $ yarn dev # start in development mode $ # app is running on http://localhost:4000
This Eleventy project is built on top of Material Kit Pro UI, crafted by Creative-Tim agency. Using this boilerplate, any developer with a Node.js environment and a basic programming knowledge can build a new project in minutes.
This one-page site uses a design crafted by Html5Up agency and is released as an open-source project. In case you want to build this beautiful design as a static site, just type in your preferred terminal:
$ git clone https://github.com/app-generator/eleventy-html5up-paradigm.git $ cd eleventy-html5up-paradigm $ yarn # install modules $ yarn dev # start in development mode $ # app is running on http://localhost:4000
Static Site prototyped in Eleventy on top of the well-known Now UI kit crafted by Creative-Tim agency.
Commercial product - links: Eleventy Now UI Demo, product page
For more static sites, feel free to access AppSeed platform or the public Github respository. Thank You!