create-zen 1.0.4 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +183 -56
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,75 +1,202 @@
|
|
|
1
|
-
|
|
1
|
+
<div align="center">
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://git.io/typing-svg)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
</div>
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
7
|
+
A premium Vite starter kit for rapid web development, designed to streamline your development process. It comes pre-configured with essential tools like TypeScript, Vite, SCSS, and modern UI components.
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<img src="https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white" alt="Vite"/>
|
|
11
|
+
<img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=typescript&logoColor=white" alt="TypeScript"/>
|
|
12
|
+
<img src="https://img.shields.io/badge/Sass-CC6699?style=for-the-badge&logo=sass&logoColor=white" alt="Sass"/>
|
|
13
|
+
<img src="https://img.shields.io/badge/PostCSS-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white" alt="PostCSS"/>
|
|
14
|
+
<img src="https://img.shields.io/badge/Handlebars.js-f0772b?style=for-the-badge&logo=handlebars.js&logoColor=white" alt="Handlebars"/>
|
|
15
|
+
<img src="https://img.shields.io/badge/Lenis-000000?style=for-the-badge&logo=lenis&logoColor=white" alt="Lenis"/>
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
|
|
13
19
|
|
|
14
|
-
## Features
|
|
20
|
+
## ✨ Features
|
|
15
21
|
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
20
|
-
-
|
|
22
|
+
- **🚀 Vite**: Next-generation frontend tooling for a blazing fast development experience
|
|
23
|
+
- **🛡️ TypeScript**: Strong typing for more robust and maintainable code
|
|
24
|
+
- **🎨 SCSS**: CSS with superpowers, enabling variables, nesting, and mixins
|
|
25
|
+
- **🔧 ESLint & Prettier**: Code quality and formatting tools
|
|
26
|
+
- **⚡ PostCSS**: Advanced CSS processing with plugins
|
|
27
|
+
- **📝 Handlebars**: Templating engine for clean HTML organization
|
|
28
|
+
- **🌀 Lenis**: Buttery smooth scrolling experience
|
|
29
|
+
- **🎭 Ready-to-use Components**: Tabs, Modals, Accordions, Theme Switcher
|
|
30
|
+
- **📱 Responsive Design**: Mobile-first approach with modern breakpoints
|
|
31
|
+
- **🌙 Dark/Light Theme**: Built-in theme switching with persistence
|
|
32
|
+
- **📦 Modern Build**: Optimized for production with tree-shaking
|
|
21
33
|
|
|
22
|
-
|
|
34
|
+
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
|
|
23
35
|
|
|
24
|
-
|
|
25
|
-
- **Modern CSS** - Tailwind CSS for rapid UI development
|
|
26
|
-
- **TypeScript** - Type safety and better developer experience
|
|
27
|
-
- **ESLint & Prettier** - Code quality and formatting
|
|
28
|
-
- **Git Hooks** - Pre-commit linting and formatting
|
|
36
|
+
## 🚀 Getting Started
|
|
29
37
|
|
|
30
|
-
|
|
38
|
+
### Prerequisites
|
|
31
39
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
npm create-zen my-awesome-app
|
|
35
|
-
```
|
|
40
|
+
- [Node.js](https://nodejs.org/) (version 18.x or higher)
|
|
41
|
+
- [npm](https://www.npmjs.com/)
|
|
36
42
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
43
|
+
### Installation
|
|
44
|
+
|
|
45
|
+
You can create a new project using `npm create`:
|
|
46
|
+
```bash
|
|
47
|
+
npm create zen@latest project-name
|
|
48
|
+
```
|
|
41
49
|
|
|
42
|
-
|
|
43
|
-
```bash
|
|
44
|
-
npm install
|
|
45
|
-
```
|
|
50
|
+
Alternatively, you can clone the repository manually:
|
|
46
51
|
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
52
|
+
1. Clone the repository:
|
|
53
|
+
```bash
|
|
54
|
+
git clone https://github.com/dmitry-conquer/zen-starter.git
|
|
55
|
+
```
|
|
56
|
+
2. Navigate to the project directory:
|
|
57
|
+
```bash
|
|
58
|
+
cd zen-starter
|
|
59
|
+
```
|
|
60
|
+
3. Install the dependencies:
|
|
61
|
+
```bash
|
|
62
|
+
npm install
|
|
63
|
+
```
|
|
51
64
|
|
|
52
|
-
|
|
65
|
+
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
|
|
53
66
|
|
|
54
|
-
## Available Scripts
|
|
67
|
+
## 🛠️ Available Scripts
|
|
55
68
|
|
|
56
|
-
- `npm run dev` -
|
|
57
|
-
- `npm run
|
|
58
|
-
- `npm run
|
|
59
|
-
- `npm run
|
|
60
|
-
- `npm run
|
|
69
|
+
- `npm run dev` - Starts the development server
|
|
70
|
+
- `npm run host` - Starts the development server, accessible on your local network
|
|
71
|
+
- `npm run build` - Builds the project for production
|
|
72
|
+
- `npm run preview` - Serves the production build locally for preview
|
|
73
|
+
- `npm run lint` - Lints the TypeScript files in the project
|
|
74
|
+
- `npm run lint:fix` - Lints and automatically fixes problems in TypeScript files
|
|
61
75
|
|
|
62
|
-
|
|
76
|
+
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
|
|
77
|
+
|
|
78
|
+
## 📁 Project Structure
|
|
63
79
|
|
|
64
80
|
```
|
|
65
|
-
|
|
66
|
-
├──
|
|
81
|
+
zen-starter/
|
|
82
|
+
├── components/ # Reusable HTML partials
|
|
83
|
+
│ ├── accordion.html # Accordion component template
|
|
84
|
+
│ ├── footer.html # Footer component template
|
|
85
|
+
│ ├── header.html # Header component template
|
|
86
|
+
│ ├── modal.html # Modal component template
|
|
87
|
+
│ └── tabs.html # Tabs component template
|
|
88
|
+
├── pages/ # Project pages
|
|
89
|
+
│ ├── 404.html # 404 error page
|
|
90
|
+
│ └── index.html # Main application page
|
|
91
|
+
├── public/ # Static assets
|
|
92
|
+
│ ├── fonts/ # Font files
|
|
93
|
+
│ └── images/ # Image assets
|
|
67
94
|
├── src/
|
|
68
|
-
│ ├──
|
|
69
|
-
│ ├──
|
|
70
|
-
│
|
|
71
|
-
├──
|
|
72
|
-
├──
|
|
73
|
-
├──
|
|
74
|
-
├──
|
|
75
|
-
|
|
95
|
+
│ ├── scripts/ # TypeScript source code
|
|
96
|
+
│ │ ├── components/ # UI component classes
|
|
97
|
+
│ │ │ ├── Accordion.ts # Accordion component logic
|
|
98
|
+
│ │ │ ├── BackTopButton.ts # Back to top button
|
|
99
|
+
│ │ │ ├── Header.ts # Header component logic
|
|
100
|
+
│ │ │ ├── Tabs.ts # Tabs component logic
|
|
101
|
+
│ │ │ ├── Theme.ts # Theme switcher
|
|
102
|
+
│ │ │ └── index.ts # Component exports
|
|
103
|
+
│ │ ├── services/ # Service layer
|
|
104
|
+
│ │ │ ├── api.ts # API utilities
|
|
105
|
+
│ │ │ ├── scroll.ts # Smooth scroll service
|
|
106
|
+
│ │ │ ├── storage.ts # Local storage wrapper
|
|
107
|
+
│ │ │ └── index.ts # Service exports
|
|
108
|
+
│ │ ├── types/ # TypeScript type definitions
|
|
109
|
+
│ │ │ └── global.d.ts # Global type definitions
|
|
110
|
+
│ │ ├── utils/ # Utility functions
|
|
111
|
+
│ │ │ └── modal.ts # Modal utilities
|
|
112
|
+
│ │ └── main.ts # Main entry point
|
|
113
|
+
│ └── styles/ # SCSS stylesheets
|
|
114
|
+
│ ├── core/ # Core styles
|
|
115
|
+
│ │ ├── components/ # Component styles
|
|
116
|
+
│ │ │ ├── back-top-button.scss
|
|
117
|
+
│ │ │ ├── footer.scss
|
|
118
|
+
│ │ │ ├── header.scss
|
|
119
|
+
│ │ │ ├── modal.scss
|
|
120
|
+
│ │ │ └── index.scss
|
|
121
|
+
│ │ ├── helpers/ # SCSS helpers
|
|
122
|
+
│ │ │ ├── functions.scss
|
|
123
|
+
│ │ │ ├── media.scss
|
|
124
|
+
│ │ │ ├── mixins.scss
|
|
125
|
+
│ │ │ └── index.scss
|
|
126
|
+
│ │ ├── fonts.scss # Font definitions
|
|
127
|
+
│ │ ├── globals.scss # Global styles
|
|
128
|
+
│ │ ├── reset.scss # CSS reset
|
|
129
|
+
│ │ ├── typography.scss # Typography styles
|
|
130
|
+
│ │ ├── utils.scss # Utility classes
|
|
131
|
+
│ │ ├── variables.scss # SCSS variables
|
|
132
|
+
│ │ └── index.scss # Core styles index
|
|
133
|
+
│ └── main.scss # Main stylesheet
|
|
134
|
+
├── .eslintrc.js # ESLint configuration
|
|
135
|
+
├── .prettierrc # Prettier configuration
|
|
136
|
+
├── index.html # Landing page
|
|
137
|
+
├── package.json # Project dependencies
|
|
138
|
+
├── postcss.config.js # PostCSS configuration
|
|
139
|
+
├── tsconfig.json # TypeScript configuration
|
|
140
|
+
└── vite.config.js # Vite configuration
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
|
|
144
|
+
|
|
145
|
+
## 🎯 Key Components
|
|
146
|
+
|
|
147
|
+
### UI Components
|
|
148
|
+
- **Accordion**: Collapsible content sections with smooth animations
|
|
149
|
+
- **Tabs**: Tabbed interface with keyboard navigation
|
|
150
|
+
- **Modal**: Lightweight modal system with backdrop
|
|
151
|
+
- **Header**: Responsive navigation with mobile menu
|
|
152
|
+
- **BackTopButton**: Smooth scroll-to-top functionality
|
|
153
|
+
- **ThemeToggle**: Dark/light theme switcher
|
|
154
|
+
|
|
155
|
+
### Services
|
|
156
|
+
- **Scroll**: Lenis-powered smooth scrolling
|
|
157
|
+
- **Storage**: Type-safe local storage wrapper
|
|
158
|
+
- **API**: HTTP request utilities
|
|
159
|
+
|
|
160
|
+
### Utilities
|
|
161
|
+
- **Modal Management**: Easy modal initialization and control
|
|
162
|
+
- **Type Definitions**: Comprehensive TypeScript types
|
|
163
|
+
|
|
164
|
+
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
|
|
165
|
+
|
|
166
|
+
## 🎨 Styling
|
|
167
|
+
|
|
168
|
+
The project uses a well-organized SCSS structure:
|
|
169
|
+
|
|
170
|
+
- **Variables**: Centralized design tokens
|
|
171
|
+
- **Mixins**: Reusable style patterns
|
|
172
|
+
- **Functions**: SCSS utility functions
|
|
173
|
+
- **Media Queries**: Responsive breakpoint helpers
|
|
174
|
+
- **Component Styles**: Modular component styling
|
|
175
|
+
- **Utility Classes**: Helper classes for common patterns
|
|
176
|
+
|
|
177
|
+
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
|
|
178
|
+
|
|
179
|
+
## 🔧 Configuration
|
|
180
|
+
|
|
181
|
+
### Vite Configuration
|
|
182
|
+
- Multi-page application support
|
|
183
|
+
- SCSS preprocessing with modern compiler API
|
|
184
|
+
- PostCSS integration with autoprefixer
|
|
185
|
+
- Handlebars templating support
|
|
186
|
+
- Optimized build output
|
|
187
|
+
|
|
188
|
+
### TypeScript Configuration
|
|
189
|
+
- Strict type checking
|
|
190
|
+
- Modern ES modules
|
|
191
|
+
- Path mapping for clean imports
|
|
192
|
+
|
|
193
|
+
### Code Quality
|
|
194
|
+
- ESLint with TypeScript support
|
|
195
|
+
- Prettier for consistent formatting
|
|
196
|
+
- Pre-commit hooks ready
|
|
197
|
+
|
|
198
|
+
<img src="https://user-images.githubusercontent.com/73097560/115834477-dbab4500-a447-11eb-908a-139a6edaec5c.gif" alt="line" />
|
|
199
|
+
|
|
200
|
+
## 📝 License
|
|
201
|
+
|
|
202
|
+
This project is licensed under the MIT License.
|