Security News
vlt Debuts New JavaScript Package Manager and Serverless Registry at NodeConf EU
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
@clearkit/hype
Advanced tools
This repo takes the Tailwind config and the CSS variables stylesheet from the
published clearkit-core
npm package and uses them to generate a complete
CSS library, named clearkit-hype
.
This CSS library includes atomic CSS utility classes, informed by the variables
from clearkit-core.css
. It also uses these utility classes to construct helper
classes with the @apply
Tailwind function.
The intention would be to publish clearkit-hype
as a package on NPM, and make
the compiled stylesheet available on a CDN.
The build process in this repo also generates a front-end that documents the classes in the library and demos the blueprints created by helper classes.
$ yarn
.$ yarn start
to build clearkit-hype.css
, watch for changes, and serve
the front-end at http://localhost:5678
.Running $ yarn start
kicks off the following process:
npm-run-all -s clean -p postcss:watch parcel:serve
PostCSS takes the Tailwind config from /clearkit.config.js
and builds the src/css
directory, importing the CSS helpers from src/css/helpers
, inlining them in
src/css/clearkit-hype.css
and then running the Tailwind directives to compile
to a single stylesheet named src/clearkit-hype.css
.
Parcel then serves the front-end at http://localhost:5678
and reloads when it
detects changes in the CSS and HTML.
By default clearkit-hype
imports the Tailwind config from clearkit-core
and uses it for it's own Tailwind config file at /clearkit.config.js
.
To replace or override properties from clearkit-core
you can edit this file and
refer to the Tailwind docs. For example,
to add a magenta color that could be used with .text-my-custom-color
and
.bg-my-custom-color
you could write the following -
theme: {
colors: {
"my-custom-color": "#ff00ff",
...clearKitCore.theme.colors
}
}
To compose new helper classes that can be used in blueprints, you could create
src/css/helpers/_ck-panel.css
and src/blueprints/_ck-panel.html
.
In _ck-panel.css
you would write -
.ck-panel {
@apply bg-white shadow rounded-lg;
}
And you would document it's usage in _ck-panel.html
with -
<div class="ck-panel">
Here is my panel
</div>
To add the blueprint to the front-end you would add the new partial to
src/blueprints.html
as an include, which would get automatically get compiled
by posthtml
as part of the parcel
build process -
<include src="blueprints/_ck-panel.html"></include>
FAQs
ClearKit Hype
The npm package @clearkit/hype receives a total of 13 weekly downloads. As such, @clearkit/hype popularity was classified as not popular.
We found that @clearkit/hype demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 8 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.