Skip to content

Commit f5f46ce

Browse files
authored
Merge pull request #1 from numix-ui/main
Add theme toggling and enhance UI components
2 parents 071b762 + caa4764 commit f5f46ce

File tree

7 files changed

+915
-426
lines changed

7 files changed

+915
-426
lines changed

.gitignore

+169
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
# Node.js
2+
node_modules/
3+
npm-debug.log*
4+
package-lock.json
5+
6+
# VS Code settings
7+
.vscode/
8+
9+
# Mac system files
10+
.DS_Store
11+
12+
# Logs and temp files
13+
*.log
14+
*.tmp
15+
*.swp
16+
17+
# Compiled/minified assets
18+
css/numix-ui.min.css
19+
js/numix-ui.min.js
20+
21+
# Build tools )
22+
dist/
23+
build/
24+
25+
# Dependency cache
26+
.cache/
27+
28+
# Github Generated files
29+
# Logs
30+
logs
31+
*.log
32+
npm-debug.log*
33+
yarn-debug.log*
34+
yarn-error.log*
35+
lerna-debug.log*
36+
.pnpm-debug.log*
37+
38+
# Logs and temp files
39+
*.log
40+
*.tmp
41+
*.swp
42+
43+
# Diagnostic reports (https://nodejs.org/api/report.html)
44+
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
45+
46+
# Runtime data
47+
pids
48+
*.pid
49+
*.seed
50+
*.pid.lock
51+
52+
# Directory for instrumented libs generated by jscoverage/JSCover
53+
lib-cov
54+
55+
# Coverage directory used by tools like istanbul
56+
coverage
57+
*.lcov
58+
59+
# nyc test coverage
60+
.nyc_output
61+
62+
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
63+
.grunt
64+
65+
# Bower dependency directory (https://bower.io/)
66+
bower_components
67+
68+
# node-waf configuration
69+
.lock-wscript
70+
71+
# Compiled binary addons (https://nodejs.org/api/addons.html)
72+
build/Release
73+
74+
# Dependency directories
75+
node_modules/
76+
jspm_packages/
77+
78+
# Snowpack dependency directory (https://snowpack.dev/)
79+
web_modules/
80+
81+
# TypeScript cache
82+
*.tsbuildinfo
83+
84+
# Optional npm cache directory
85+
.npm
86+
87+
# Optional eslint cache
88+
.eslintcache
89+
90+
# Optional stylelint cache
91+
.stylelintcache
92+
93+
# Microbundle cache
94+
.rpt2_cache/
95+
.rts2_cache_cjs/
96+
.rts2_cache_es/
97+
.rts2_cache_umd/
98+
99+
# Optional REPL history
100+
.node_repl_history
101+
102+
# Output of 'npm pack'
103+
*.tgz
104+
105+
# Yarn Integrity file
106+
.yarn-integrity
107+
108+
# dotenv environment variable files
109+
.env
110+
.env.development.local
111+
.env.test.local
112+
.env.production.local
113+
.env.local
114+
115+
# parcel-bundler cache (https://parceljs.org/)
116+
.cache
117+
.parcel-cache
118+
119+
# Next.js build output
120+
.next
121+
out
122+
123+
# Nuxt.js build / generate output
124+
.nuxt
125+
dist
126+
127+
# Gatsby files
128+
.cache/
129+
# Comment in the public line in if your project uses Gatsby and not Next.js
130+
# https://nextjs.org/blog/next-9-1#public-directory-support
131+
# public
132+
133+
# vuepress build output
134+
.vuepress/dist
135+
136+
# vuepress v2.x temp and cache directory
137+
.temp
138+
.cache
139+
140+
# vitepress build output
141+
**/.vitepress/dist
142+
143+
# vitepress cache directory
144+
**/.vitepress/cache
145+
146+
# Docusaurus cache and generated files
147+
.docusaurus
148+
149+
# Serverless directories
150+
.serverless/
151+
152+
# FuseBox cache
153+
.fusebox/
154+
155+
# DynamoDB Local files
156+
.dynamodb/
157+
158+
# TernJS port file
159+
.tern-port
160+
161+
# Stores VSCode versions used for testing VSCode extensions
162+
.vscode-test
163+
164+
# yarn v2
165+
.yarn/cache
166+
.yarn/unplugged
167+
.yarn/build-state.yml
168+
.yarn/install-state.gz
169+
.pnp.*

README.md

+49-12
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,6 @@ Numix UI is a CSS library that brings the distinctive look and feel of the popul
2323

2424
You can include Numix UI in your project in a few ways:
2525

26-
### Via CDN
27-
28-
The easiest way to get started is by using a Content Delivery Network (CDN). Simply add the following `<link>` tag to the `<head>` of your HTML document:
29-
30-
```html
31-
<link rel="stylesheet" href="[https://cdn.example.com/numix-ui/latest/numix-ui.min.css](https://cdn.example.com/numix-ui/latest/numix-ui.min.css)">
32-
```
33-
34-
> Note: Replace https://cdn.example.com/numix-ui/latest/numix-ui.min.css with the actual CDN URL for the latest version of Numix UI.
35-
3626
### Download and Host Locally
3727

3828
Download the latest release of Numix UI from [LoboGuardian/numix-ui](https://github.com/LoboGuardian/numix-ui).
@@ -44,6 +34,17 @@ Link to the CSS file in the <head> of your HTML document:
4434
<link rel="stylesheet" href="css/numix-ui.min.css">
4535
```
4636

37+
### Via CDN (comming soon)
38+
39+
The easiest way to get started is by using a Content Delivery Network (CDN). Simply add the following `<link>` tag to the `<head>` of your HTML document:
40+
41+
```html
42+
<link rel="stylesheet" href="[https://cdn.example.com/numix-ui/latest/numix-ui.min.css](https://cdn.example.com/numix-ui/latest/numix-ui.min.css)">
43+
```
44+
45+
> Note: Replace https://cdn.example.com/numix-ui/latest/numix-ui.min.css with the actual CDN URL for the latest version of Numix UI.
46+
47+
4748
### Via npm (comming soon)
4849

4950
```Bash
@@ -58,6 +59,40 @@ Then, you can import it into your CSS or JavaScript files depending on your buil
5859
@import 'numix-ui';
5960
```
6061

62+
## Build & Minify
63+
64+
Numix UI supports an automated build process to generate minified assets for production.
65+
66+
### Step 1: Set up the project
67+
68+
```bash
69+
npm init -y
70+
npm install --save-dev csso-cli uglify-js
71+
```
72+
73+
### Step 2: Add build scripts to package.json (already added)
74+
75+
```json
76+
"scripts": {
77+
"minify:css": "csso css/numix-ui.css -o css/numix-ui.min.css",
78+
"minify:js": "uglifyjs js/numix-ui.js -o js/numix-ui.min.js --compress --mangle",
79+
"minify": "npm run minify:css && npm run minify:js",
80+
"build": "npm run minify"
81+
}
82+
```
83+
84+
### Step 3: Run the build
85+
86+
```bash
87+
npm run build
88+
```
89+
90+
This will:
91+
92+
- Compress css/numix-ui.css → css/numix-ui.min.css
93+
94+
- Compress js/numix-ui.js → js/numix-ui.min.js
95+
6196
## Usage
6297

6398
To apply Numix UI styles, simply add the provided CSS classes to your HTML elements. Here are a few examples:
@@ -113,7 +148,7 @@ Contributions are welcome! If you'd like to contribute to Numix UI, please follo
113148

114149
## License
115150

116-
Numix UI is open-source software licensed under the GPL-3.0.
151+
Numix UI is open-source software licensed under the [GPL-3.0](LICENSE).
117152

118153
## Acknowledgements
119154

@@ -122,6 +157,8 @@ We would like to acknowledge the creators and contributors of the original Numix
122157
## Stay Connected
123158

124159
Follow us on GitHub for updates and new releases:
125-
- [Numix UI ](https://github.com/LoboGuardian/numix-ui)
160+
161+
- [Numix UI ](https://github.com/numix-ui/numix-ui)
162+
- [Based Work LoboGuardian/Numix UI ](https://github.com/LoboGuardian/numix-ui)
126163

127164
Thank you for using Numix UI! We hope you enjoy bringing the Numix experience to the web.

0 commit comments

Comments
 (0)