Minimalistic css library of utilitarian classes,
focused on positioning, sizing and extra goodies around it. Easy to set up and start prototyping blazingly fast ⚡
just css— simple bits of good oldcssmodular— use specificmoduleor the wholebundleminimalistic— up to 10 sm/md sizecssfileseasy to setup— because it's plaincss, it is easy to add to any project without hustlefocused— main goal is to provide helpers aroundpositioningandsizingand not being a swiss knife for everythinglib, not a framework— created to be used as addition to your currentstylingapproach, not a replacement
As npm package:
# npm
npm install @peculiarjs/cssfull
# pnpm
pnpm add @peculiarjs/cssfullAfter that you can import index.css or any specific file from the lib into
your app.js and your bundler should do the rest:
// app.js
import { render } from 'preact'
import '@peculiarjs/cssfull/lib/index.css'
const App = () => (
<div className="m-40 debug">
The Spot!
</div>
)
render(<App />, document.getElementById('app'))Another way is to avoid npm package and simply
inject it as stylesheet directly into html:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="https://unpkg.com/@peculiarjs/[email protected]/lib/border.css">
<link rel="stylesheet" href="https://unpkg.com/@peculiarjs/[email protected]/lib/cursor.css">
<!-- or whole bundle.css can be linked — concatenated and minified version of the whole library -->
<!-- <link rel="stylesheet" href="https://unpkg.com/@peculiarjs/[email protected]/lib/bundle.css"> -->
<body>
<div class="debug pointer">
Content
</div>
</body>
</html>Majority of classes in this lib approach 2 main measurement units:
%px
For simplicity % is made the default and used everywhere except margin,
so class w-100 should be read like width: 100% and top-50 like top: 50%.
On the opposite, absolute values like px are used only for margin or padding, so
in that case mr-20 means margin-right: 20px and m-10 means margin: 10px.
It is expected that some utilities will be used much more often:
width, height, margin, padding, so for a better and easier readability
in HTML/JSX, these utils names are shortened and used as mnemonics:
/* "w" stands for width */
.w-100 {
width: 100%;
}
/* "h" stands for height */
.h-100 {
height: 100%;
}
/* "mt" stands for margin-top */
.mt-20 {
margin-top: 20px;
}
/* "pr" stands for padding-right */
.pr-20 {
padding-right: 20px;
}Brief overview of the classes.
Everything around flexbox properties with simple naming.
.flex {
display: flex
}
.column {
flex-direction: column;
}
.row {
flex-direction: row;
}
...Main positioning helpers are created around: relative, absolute, fixed, static and sticky options.
Also there are helpers for every side top, right, bottom, left with 3 values [0, 50%, 100%] each.
.relative {
position: relative;
}
.absolute {
position: absolute;
}
...
.top-0 {
top: 0;
}
.top-50 {
top: 50%;
}
.top-100 {
top: 100%;
}Set of classes for approaching elements width in %.
/* from 100 to 0 with a step of 5 */
.w-100 {
width: 100%;
}
.w-95 {
width: 95%;
}
...
.w-auto {
width: auto;
}Same but for height.
/* from 100 to 0 with a step of 5 */
.h-100 {
height: 100%;
}
.h-95 {
height: 95%;
}
...
.h-auto {
height: auto;
}A block/inline-block pair.
.block {
display: block;
}
.inline-block {
display: inline-block;
}
.hidden {
display: none;
}Pretty Similiar approach to width and height classes is used for margins.
There are mnemonic for every margin side:
m—marginmt—margin-topmr—margin-rightmb—margin-bottomml—margin-left
So for every side classes go with a step of 1px from 0 to 20px and then
with a step of 5px from 20px to 50px.
/* top */
.mt-0 {
margin-top: 0;
}
.mt-1 {
margin-top: 1px;
}
.mt-2 {
margin-top: 2px;
}
...
.mt-20 {
margin-top: 20px;
}
.mt-25 {
margin-top: 25px;
}
...
.mt-50 {
margin-top: 50px;
}For padding is used the the same approach as for margin.
Mnemonics:
p—paddingpt—padding-toppr—padding-rightpb—padding-bottompl—padding-left
So for every side classes go with a step of 1px from 0 to 20px and then
with a step of 5px from 20px to 50px.
/* right */
.pr-0 {
padding-right: 0;
}
.pr-1 {
padding-right: 1px;
}
.pr-2 {
padding-right: 2px;
}
...
.pr-20 {
padding-right: 20px;
}
.pr-25 {
padding-right: 25px;
}
...
.pr-50 {
padding-right: 50px;
}.debug class for highlighting the needed part and some helpers around no-border:
.debug {
border: 2px dashed red;
}
.no-border {
border: none;
}
.no-border-top {
border-top: none;
}
.no-border-right {
border-right: none;
}
.no-border-bottom {
border-bottom: none;
}
.no-border-left {
border-left: none;
}