Eleventy Themes Logo Eleventy Themes
Eleventy Soft UI Design screenshot

Eleventy Soft UI Design

Author Avatar Theme by App generator
Updated: 16 Jun 2023
30 Stars

Eleventy (11ty) - Soft UI Design | AppSeed

Github Live Preview

Categories

Scss Prismic

Overview

The Soft UI Design Eleventy (11ty) is an adaptation of the Soft UI Design System built on Bootstrap 5. It offers a user-friendly and beautiful design system, along with a blog system powered by Prismic CMS for content management. The design system features over 70 frontend elements like buttons, inputs, navbars, cards, and alerts, which can be easily customized with SASS files and classes.

Features

  • UI: Soft UI Design System: Crafted by Creative-Tim, this design system offers a user-friendly and beautiful interface.
  • Prismic CMS for blog posts: The blog system uses Prismic CMS for efficient content management.
  • CSS Pipeline (Sass, CleanCSS): The theme utilizes a CSS pipeline that includes Sass for efficient styling and CleanCSS for optimizing the output.
  • JS Bundling (Webpack): The theme packages JavaScript files using Webpack for better performance and organization.
  • SVG Icon Sprite Generation: Automatically generates an SVG icon sprite for easy usage and customization.
  • Critical CSS, HTML Minification: The theme includes features to generate critical CSS and minify HTML for improved performance.

Installation

To install the Eleventy Soft UI theme, follow these steps:

Step 1: Clone this repository.

git clone [repository-url]

Step 2: Install modules via NPM or Yarn.

npm install
# or
yarn install

Step 3: Configure Prismic API Node. Rename .env.sample file to .env and specify the PRISMIC_REPOSITORY_NAME. If you are unfamiliar with Prismic, you can use the DEMO API provided by AppSeed.

Step 4: Start the project in development mode. Once the project is compiled and the content is pulled from Prismic, you can visit the project in the browser at http://localhost:8080.

Summary

The Soft UI Design Eleventy is a free starter provided by AppSeed, built on top of the Soft UI Design System. It offers a user-friendly interface and integrates Prismic CMS for efficient content management. With features like CSS pipeline, JS bundling, SVG icon sprite generation, critical CSS, and HTML minification, this theme provides a powerful and customizable solution for building modern and visually appealing websites.