Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/teamhola/holakit
A set of pluggable & easy-to-extend CSS components.
https://github.com/teamhola/holakit
component css design hola holakit ui ui-components
Last synced: about 1 month ago
JSON representation
A set of pluggable & easy-to-extend CSS components.
- Host: GitHub
- URL: https://github.com/teamhola/holakit
- Owner: teamhola
- License: mit
- Created: 2017-08-28T04:36:39.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-09-11T04:59:29.000Z (about 4 years ago)
- Last Synced: 2024-09-26T21:23:02.308Z (about 2 months ago)
- Topics: component, css, design, hola, holakit, ui, ui-components
- Language: JavaScript
- Homepage: https://teamhola.github.io/holakit
- Size: 1.2 MB
- Stars: 39
- Watchers: 5
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# HolaKit
> **NOTICE:** This branch `master` contains code of Holakit 0.x, which is considered stable but will not add new features. New features and components are under development on branch [`next`](https://github.com/teamhola/holakit/tree/next) (PR #10) as Holakit 2.x.
[](https://github.com/prettier/prettier)
Yet another design-driven UI component set.
## Priciples
1. Be nice in design.
2. Properly scoped.
3. Easy to plug into existing projects.
4. Be advanced.
## Usage
```html
```
> WARNING: You should pin the version you use in your project, since we're still in 0.x stage and we can have some breaking changes at any time. We'll follow semver later as soon as we finish our 1.0.0.
Or use CSS files in the npm package directly:
```js
// yarn add holakit
// or
// npm i holakit
import 'holakit/dist/holakit.css'
// or you may import individual components, as is described below in Advanced Usage.
```
> NOTE: This project is using pure CSS with many edge-cutting CSS features, and you can see our backcompat status in `.browserlistrc`. Roll your own build with a modified browserlist, if you needs better browser compatibility.
### Advanced Usage
#### Customizing
We are using CSS variables, so you can do some customizations by changing variables. See `assets/css/var.css` for reference.
Since we use a class to scope our variables, you have many choices to override our defaults.
1. Make you own build and replace defaults in `var.css`.
2. Roll your own `.hola-var` class and apply it on ``.
3. Roll a class with only the variables you changed, and add it on ``, after our `hola-var`.
And many other ways. Our flexible, properly-scoped architecture can make most cases cakes.
#### Use a subset
You may want to use only a part of our component set. That's pretty easy since we divide different components into different files. You can `@import` any part of this set, and don't forget to include `vendor.css`, `reset.css` and `var.css` since they are required by most components. Anyway, it's not garanteed nor is tested, so you may found that you need to import more than your need. Another solution is, you can simply remove unnecessary parts of this project in `assets/holakit.css` (and other entrypoint files named `index.css`) and regenerate a build using `yarn build`. Drop us an issue or a PR if you find better split solution.
## Contributing & Financial Supporting
For GitHub Pages, we use `dist/holakit.css` in our demo `index.html`. You need to change it to `assets/holakit.css` for the Parcel dev server. Keep in mind that you should exclude this change in your PR.
This project is mostly designed for ¡Hola! usage, so the design may not be fit in your project. Pull requests are always welcome though, for your or some others' case.
In case you're interested in financially supporting this project or even ¡Hola! itself, you can directly support us on [Afdian.net](https://afdian.net/@ihola). You can contact `hello at ihola dot one` or `hola at ihola dot one` if you can't donate in CNY or through online payments.
## Legal
Licensed under MIT. See LICENSE.