11ty Soft UI - Built with Eleventy and Prismic CMS

Editor -

Hello! This article presents an open-source seed project crafted on top of Soft UI Design System in Eleventy and Prismic CMS. This boilerplate can be used to build faster presentation websites and personal blogs using Prismic CMS as a headless content provider. The design is provided and released for free by Creative-Tim, a well-known web agency and theme provider.  

Eleventy Soft UI Design - Cover Page.

Eleventy Soft UI is an Eleventy adaptation of Soft UI Design System (a user-friendly and beautiful design system based on Bootstrap 5), including a Blog system that uses Prismic CMS for content management. This static seed product has a modern stack that improves a lot the developer experience.

11ty Soft UI Features
  • Prismic CMS for blog posts
  • CSS Pipeline (Sass, CleanCSS)
  • JS Bundling (Webpack)
  • SVG Icon Sprite Generation
  • Critical CSS, HTML Minification

Soft UI Design System is probably the most innovative design crafted by Creative-Tim using a Boostrap codebase. Designed for those who like bold elements and beautiful websites. Soft UI Design System is made of hundreds of elements, designed blocks, and fully coded pages ready to help you create stunning websites. Soft UI Design System is built with over 70 frontend individual elements, like buttons, inputs, navbars, cards, and alerts, giving you the freedom of choosing and combining. The UI Kit is fully documented and the look and feel can be customized with ease via SASS files.

Compile from Sources

The product is available for download directly from Github and the permissive license allows the usage of unlimited hobby and commercial products.

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 starts, we should see a few really nice pages provided by this amazing UI Kit.

11ty Soft UI - Footer Section
11ty Soft UI Design System - Footer Section
11ty Soft UI  - Team Section
11ty Soft UI Design System - Team Section.
Thanks for reading! For more resources and support please access: