Eleventy Soft UI Design

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. Soft UI Design System is built with over 70 frontend individual elements, like buttons, inputs, navbars, nav tabs, cards, or alerts, giving you the freedom of choosing and combining. All components can take variations in color, which you can easily modify using SASS files and classes.

Features:

• UI: Soft UI Design System crafted by Creative-Tim
• Prismic CMS for blog posts
• CSS Pipeline (Sass, CleanCSS)
• JS Bundling (Webpack)
• SVG Icon Sprite Generation
• Critical CSS, HTML Minification

Links

• Eleventy Soft UI - product page
• Eleventy Soft UI - LIVE Demo

Compile from Sources

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.

Codebase structure

eleventy-soft-ui-design
    ├── src/
    │ ├── assets/
    │ │ ├── css/
    │ │ ├── favicon/
    │ │ ├── fonts/
    │ │ ├── img/
    │ │ ├── js/
    │ │ ├── scripts/modules/app.js
    │ │ └── scss/app.scss
    │ ├── data/
    │ │ ├── app.json
    │ │ ├── meta.json
    │ │ └── prismicData.js
    │ ├── includes/
    │ ├── layouts/
    │ ├── pages/
    │ ├── sections/
    │ ├── 404.njk
    │ ├── feed.njk
    │ ├── index.njk
    │ ├── blog.njk
    │ ├── presentation.njk
    │ ├── robots.njk
    │ └── sitemap.njk
		├── utils/
    ├── .eleventy.js
    ├── .env.sample
    ├── .gitignore
    ├── .prettierrc
    ├──  netlify.toml
    └──  package.js

---

Eleventy Soft UI - provided by AppSeed App Generator