|
1 | 1 | # Eleventy Soft UI Design |
2 | 2 |
|
3 | | - |
| 3 | +[Eleventy Soft UI](https://appseed.us/product/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. |
4 | 4 |
|
5 | | -Eleventy Soft UI Design 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. |
| 5 | +> Features: |
6 | 6 |
|
7 | | -> 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. |
8 | | -> |
9 | | -> You will save a lot of time going from prototyping to full-functional code because all elements are implemented. This Freebie Bootstrap 5 UI Kit is coming with prebuilt design blocks, so the development process is seamless, switching from our pages to the real website is very easy to be done. |
| 7 | +- UI: [Soft UI Design System](https://bit.ly/3v6JYIe) crafted by **Creative-Tim** |
| 8 | +- **Prismic CMS** for blog posts |
| 9 | +- CSS Pipeline (Sass, CleanCSS) |
| 10 | +- JS Bundling (Webpack) |
| 11 | +- SVG Icon Sprite Generation |
| 12 | +- Critical CSS, HTML Minification |
10 | 13 |
|
11 | 14 | <br /> |
12 | 15 |
|
13 | | -## [Live demo]() |
| 16 | +> Links |
| 17 | +
|
| 18 | +- [Eleventy Soft UI](https://appseed.us/product/eleventy-soft-ui) - product page |
| 19 | +- [Eleventy Soft UI](https://eleventy-soft-ui.appseed-srv1.com/) - LIVE Demo |
14 | 20 |
|
15 | 21 | <br /> |
16 | 22 |
|
17 | | -## Features: |
| 23 | +## Compile from Sources |
| 24 | + |
| 25 | +> **Step #1** - Clone this repository |
18 | 26 |
|
19 | | -- Eleventy Soft UI Design System |
20 | | -- Prismic CMS for blog posts |
21 | | -- CSS Pipeline (Sass, CleanCSS) |
22 | | -- JS Bundling (Webpack) |
23 | | -- SVG Icon Sprite Generation |
24 | | -- Critical CSS, HTML Minification |
25 | | -- Includes a assets folder for static files (images, fonts etc.) |
| 27 | +```bash |
| 28 | +$ git clone https://github.com/app-generator/eleventy-soft-ui-design.git |
| 29 | +$ cd eleventy-soft-ui-design |
| 30 | +``` |
26 | 31 |
|
27 | 32 | <br /> |
28 | 33 |
|
29 | | -## Documentaion |
| 34 | +> **Step #2** - Install modules via NPM or Yarn |
30 | 35 |
|
31 | | -The documentation for Eleventy Soft UI Design is hosted [here](). |
| 36 | +```bash |
| 37 | +$ npm i |
| 38 | +// OR |
| 39 | +$ yarn |
| 40 | +``` |
32 | 41 |
|
33 | 42 | <br /> |
34 | 43 |
|
35 | | -## License |
| 44 | +> **Step #3** - Configure [Prismic](http://prismic.io/) API Node |
36 | 45 |
|
37 | | -This project is licensed under the MIT License. |
| 46 | +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` |
| 47 | + |
| 48 | +```env |
| 49 | +PRISMIC_REPOSITORY_NAME=YOUR_PRISMIC_API_URL |
| 50 | +``` |
| 51 | + |
| 52 | +<br /> |
| 53 | + |
| 54 | +> **Step #4** - Start project in development mode |
| 55 | +
|
| 56 | +```bash |
| 57 | +$ yarn start |
| 58 | +``` |
| 59 | + |
| 60 | +Once the project is compiled and the content is pulled from `Prismic`, the project can be visited in the browser: `http://localhost:8080`. |
38 | 61 |
|
39 | 62 | <br /> |
40 | 63 |
|
@@ -76,3 +99,6 @@ eleventy-soft-ui-design |
76 | 99 | ``` |
77 | 100 |
|
78 | 101 | <br /> |
| 102 | + |
| 103 | +--- |
| 104 | +[Eleventy Soft UI](https://appseed.us/product/eleventy-soft-ui) - provided by AppSeed [App Generator](https://appseed.us) |
0 commit comments