DEV Community

Cover image for Eleventy Soft UI - Powered by Prismic CMS
Sm0ke
Sm0ke

Posted on • Originally published at appseed.us

Eleventy Soft UI - Powered by Prismic CMS

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 - Open-source static site powered by 11ty, Prismic and AppSeed.


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 - User profile Page, provided by Eleventy, Prismic and AppSeed.


11ty Soft UI - Contact Footer

11ty Soft UI - Fancy footer, provided by Eleventy, Prismic and AppSeed.


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 
Enter fullscreen mode Exit fullscreen mode

Step #2 - Install modules via NPM or Yarn

$ npm i
// OR
$ yarn
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Step #4 - Start project in development mode

$ yarn start
Enter fullscreen mode Exit fullscreen mode

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.


Thanks for reading! For more resources please access:

Top comments (7)

Collapse
 
uithemes profile image
ui-themes

Contentful is also a good choice for the headless part. (free tier available).
P.S. Thanks for sharing.

Collapse
 
sm0ke profile image
Sm0ke

๐Ÿš€๐Ÿš€

Collapse
 
crearesite profile image
WebsiteMarket

Amazing design and the stack is perfect.

Collapse
 
sm0ke profile image
Sm0ke

๐Ÿš€๐Ÿš€

Collapse
 
trostcodes profile image
Alex Trost

This looks fantastic, thanks so much for putting this together! I'm excited to spin it up and give it a go.

Collapse
 
rx40 profile image
Petrus-Nauyoma

Sm0ke is on ๐Ÿ”ฅ

Collapse
 
sm0ke profile image
Sm0ke

๐Ÿš€๐Ÿš€