mirror of
https://github.com/lukin/keywind.git
synced 2025-01-09 09:26:24 +00:00
docs(readme): add feature list
This commit is contained in:
parent
dd25c0c052
commit
155bc47df1
1 changed files with 26 additions and 14 deletions
40
README.md
40
README.md
|
@ -4,6 +4,22 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
|
||||||
|
|
||||||
![Preview](./preview.png)
|
![Preview](./preview.png)
|
||||||
|
|
||||||
|
### Styled Pages
|
||||||
|
|
||||||
|
- Login
|
||||||
|
- Login IDP Link Confirm
|
||||||
|
- Login Reset Password
|
||||||
|
- Login Update Password
|
||||||
|
- Login Update Profile
|
||||||
|
- Register
|
||||||
|
|
||||||
|
### Social Media Icons
|
||||||
|
|
||||||
|
- Facebook
|
||||||
|
- GitHub
|
||||||
|
- Google
|
||||||
|
- Microsoft
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
Keywind has been designed with component-based architecture from the start, and **you can customize as little or as much Keywind as you need**:
|
Keywind has been designed with component-based architecture from the start, and **you can customize as little or as much Keywind as you need**:
|
||||||
|
@ -16,19 +32,11 @@ Keywind has been designed with component-based architecture from the start, and
|
||||||
parent=keywind
|
parent=keywind
|
||||||
```
|
```
|
||||||
|
|
||||||
4. Brand and Customize components with [FreeMaker](https://freemarker.apache.org/docs/dgui_quickstart_template.html)
|
4. Brand and customize components with [FreeMaker](https://freemarker.apache.org/docs/dgui_quickstart_template.html)
|
||||||
|
|
||||||
## Features
|
## Customization
|
||||||
|
|
||||||
### Styled Pages
|
### Theme
|
||||||
|
|
||||||
* Login
|
|
||||||
* Password Reset
|
|
||||||
* Register
|
|
||||||
|
|
||||||
## Examples
|
|
||||||
|
|
||||||
### Color Theme
|
|
||||||
|
|
||||||
When you do need to customize a palette, you can configure your colors under the `colors` key in the `theme` section of `tailwind.config.js` file:
|
When you do need to customize a palette, you can configure your colors under the `colors` key in the `theme` section of `tailwind.config.js` file:
|
||||||
|
|
||||||
|
@ -42,12 +50,12 @@ module.exports = {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration).
|
Read more about Tailwind CSS configuration in the [documentation](https://tailwindcss.com/docs/configuration).
|
||||||
|
|
||||||
### Primary Button Size
|
### Components
|
||||||
|
|
||||||
You can inherit Keywind components in your own theme. For example, to resize the primary button you should create a styled `theme/mytheme/components/button/primary.ftl` file:
|
You can inherit Keywind components in your own theme. For example, to resize the primary button you should create a styled `theme/mytheme/components/button/primary.ftl` file:
|
||||||
|
|
||||||
|
@ -64,10 +72,14 @@ You can inherit Keywind components in your own theme. For example, to resize the
|
||||||
</#macro>
|
</#macro>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Build
|
## Build
|
||||||
|
|
||||||
When you're ready to deploy your own theme, run the build command to generate a static production build.
|
When you're ready to deploy your own theme, run the build command to generate a static production build.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
npm install
|
||||||
|
npm run build
|
||||||
|
# or
|
||||||
|
yarn install
|
||||||
yarn build
|
yarn build
|
||||||
```
|
```
|
||||||
|
|
Loading…
Reference in a new issue