Eleventy Soft UI - Powered by Prismic CMS

#webdev #eleventy #prismic #softui

Hello coders,

This article presents an open-source starter built in Eleventy and Prismic CMS on top of a modern Bootstrap 5 design: Soft UI Design. The product can be used to code much faster presentation websites or personal blogs. For newcomers, Eleventy is a lightweight static-site generator and Prismic CMS provides a headless blog service.

Thanks for reading! - Content provided by App Generator.

Eleventy Soft UI - product page
Eleventy Soft UI - LIVE Demo
Eleventy Soft UI _blog - Page pulled from Prismic

To use the product a decent Nodejs version should be installed in the workstation and (optionally) a Prismic account (free tier available).

The problem that starter solves

Static sites are great to code simple pages and presentation sites .. but for blogs developers should use a Markdown to Html translation to edit their content. Prismic help us with this part and empower the developer to edit and format the content visually.

How it works

Step #1 - Add your content in Prismic CMS
Step #2 - Configure the starter to consume the Prismic Content
Step #3 - Install dependencies and start the project
Step #4 - Built for production

Once all steps are completed, Soft UI 11ty should be up and running in the browser will all Prismic articles pulled locally.

11ty Soft UI - Team Section

11ty Soft UI - Contact Footer

Let's build the product

For full instructions please access the product page (docs section).

Step #1 - Clone this repository

$ git clone https://github.com/app-generator/eleventy-soft-ui-design.git
$ cd eleventy-soft-ui-design

Step #2 - Install modules via NPM or Yarn

$ npm i
// OR
$ yarn

Step #3 - Configure Prismic API Node

Rename .env.sample to .env and specify the PRISMIC_REPOSITORY_NAME. In case you are not familiar with Prismic, feel free to use the DEMO API provided by AppSeed: https://eleventy-soft-ui-design.prismic.io/api/v2

PRISMIC_REPOSITORY_NAME=YOUR_PRISMIC_API_URL

Step #4 - Start project in development mode

$ yarn start

Once the project is compiled and the content is pulled from Prismic, the project can be visited in the browser: http://localhost:8080.

From this point the starter can be used to code simple websites and personal blogs using a modern stack and a pixel-perfect UI crafted by Creative-Tim.