Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/israeldcastro/not-idea-ui
A Framework UI to start making beautiful things. Based and created with TailwindCSS.
https://github.com/israeldcastro/not-idea-ui
components css css-framework desing libary sass scss tailwind tailwindcss ui ui-components
Last synced: 3 months ago
JSON representation
A Framework UI to start making beautiful things. Based and created with TailwindCSS.
- Host: GitHub
- URL: https://github.com/israeldcastro/not-idea-ui
- Owner: IsraelDCastro
- Created: 2021-06-13T14:26:33.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-07-31T21:07:49.000Z (over 1 year ago)
- Last Synced: 2024-09-24T07:47:52.240Z (4 months ago)
- Topics: components, css, css-framework, desing, libary, sass, scss, tailwind, tailwindcss, ui, ui-components
- Language: CSS
- Homepage: https://not-idea-ui.netlify.app/
- Size: 554 KB
- Stars: 13
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
---
description: "Not Idea UI is an Open Source CSS framework based and created with TailwindCSS, with components created to use everywhere, easily and simply."
---
# Installation
You have different options to install it with **npm or yarn**.
## Getting Started
### As dependency
If you want to use it with TailwindCSS adding your own styles and color palettes.
You have to install it with `npm install not-idea-ui` or `yarn add not-idea-ui`. After, you can add it to your proyect in differents ways:
###### CSS
```css title="yourmain.css"
@import 'not-idea-ui/css/not-idea-ui.css';
/* or */
@import 'not-idea-ui/css/not-idea-ui.min.css';
```
###### TailwindCSS in order to use your own/customs styles (CSS)
```css title="yourmain.css"
@import 'not-idea-ui/tailwind/not-idea-ui.css';
```
###### TailwindCSS in order to use your own/customs styles (SCSS)
```css title="yourmain.scss"
@import 'not-idea-ui/main.scss';
```
Important note
When using the TailwindCSS preference, you need to add the following styles that I have predefined in your tailwind.config.js, to avoid errors that a certain class does not exist.
###### Points to consider:
- Have at least the version "^3.3.x"
- In case you want to use it with SCSS. You need to install sass dependency in case you use ViteJS. If you use Webpack you need to install sass and sass-loader dependencies.
- If you want to use default styles and colors, follow this steps: [postcss.config.js](#custom-tailwindconfigjs)
- If you want to use your own styles and colors, follow this steps: [tailwind.config.js](#default-tailwindconfigjs)
## Default tailwind.config.js
### With ViteJS
To use the default config from the project you have to create a `postcss.config.cjs`. If you have already this file, just change the file extension from `.js` to `.cjs` in order the avoid the next error.
TypeError: Cannot read properties of undefined (reading 'config').
This works for VanillaJS, ReactJS, and VueJS.
Add this line `const defaultConfig = require("not-idea-ui/tailwind.config.cjs");` to your `postcss.config.cjs`.
Should be seen:
```js title="postcss.config.cjs" theme="dark"
const defaultConfig = require("not-idea-ui/tailwind.config.cjs");
module.exports = {
plugins: {
tailwindcss: {
config: defaultConfig
},
// ...
},
}
```
And that is all, now it should be working without problem. :star:
### With Webpack
To use the default config from the project you have to create a `postcss.config.js` or `postcss.config.cjs`. It works with both option.
If you are getting this error: Error: Cannot find module 'tailwind.config.cjs' or similar, just copy or download the config Tailwind file, it should work without problem.
This works for VueJS using Vue/Cli.
Add this line `const defaultConfig = require("not-idea-ui/tailwind.config.cjs");` to your `postcss.config.cjs`.
```js title="postcss.config.cjs" theme="dark"
const defaultConfig = require("not-idea-ui/tailwind.config.cjs");
module.exports = {
plugins: {
tailwindcss: {
config: defaultConfig
},
// ...
},
}
```
If you are using `create-react-app` for the project in ReactJS, you have to put the `tailwind.config.js` file in the root of the project, and remove the defaultConfig from `postcss.config.js`
```js title="postcss.config.js" theme="dark"
module.exports = {
plugins: {
tailwindcss: {},
// ...
},
}
```
And that is all, now it should be working without problem. :star:
## Custom tailwind.config.js
To use your custom `tailwind.config.js` you have to remove the default config from your `postcss.config.js` and leave it blank, as you can see below:
```js title="postcss.config.js" theme="dark"
module.exports = {
plugins: {
tailwindcss: {},
// ...
},
}
```
After that, run `tailwindcss init` to create blank `tailwind.config.js`. Now you have to fill the tailwind config with your `primary, secondary, and tertiary` colors and some custom classes to avoid some errors.
See the code and example below, be sure to copy every class and color. (For any reference you can see the default config)
```js title="tailwind.config.cjs" theme="dark"
module.exports = {
// ...
theme: {
extend: {
colors: {
primary: {
50: "...",
100: "...",
200: "...",
300: "...",
400: "...",
500: "...",
600: "...",
700: "...",
800: "...",
900: "...",
950: "..."
},
secondary: {
50: "...",
100: "...",
200: "...",
300: "...",
400: "...",
500: "...",
600: "...",
700: "...",
800: "...",
900: "...",
950: "..."
},
tertiary: {
50: "...",
100: "...",
200: "...",
300: "...",
400: "...",
500: "...",
600: "...",
700: "...",
800: "...",
900: "...",
950: "..."
}
},
transitionDuration: {
0: "0ms",
400: "400ms",
600: "600ms"
},
zIndex: {
"-1": -1,
1: 1,
5: 5
},
inset: {
"-100": "-100%"
},
screens: {
tablet: "989px",
"max-md": { max: "988px" },
mb: { max: "500px" }
},
borderWidth: {
6: "6px"
},
boxShadow: {
alert: "0 6px 26px rgba(0, 0, 0, 0.1)",
base: "0 3px 20px rgba(0, 0, 0, 0.05)"
},
minHeight: {
24: "6rem",
"3-5": "14px"
},
listStyleType: {
circle: "circle"
}
}
},
// ...
}
```
And that is all, now it should be working without problem. :star: