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 branchnext
(PR #10) as Holakit 2.x.
Yet another design-driven UI component set.
<!-- Directly from unpkg (npm) -->
<link rel="stylesheet" href="https://unpkg.com/holakit/dist/holakit.css">
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:
// 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.
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.
var.css
..hola-var
class and apply it on <html>
.<html>
, after our hola-var
.And many other ways. Our flexible, properly-scoped architecture can make most cases cakes.
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.
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. 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.
Licensed under MIT. See LICENSE.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。