@peculiarjs/cssfull

v0.1.2

Published

2 years ago

Minimalistic css library focused on positioning and sizing classes

Downloads

0High
0Medium
0Low

genechu

css positioning size sizing css library utilities utils helpers

@peculiarjs/cssfull

version last-commit

Minimalistic css library of utilitarian classes, focused on positioning, sizing and extra goodies around it. Easy to set up and start prototyping blazingly fast ⚡

1. What `cssfull` is:

just css — simple bits of good old css
modular — use specific module or the whole bundle
minimalistic — up to 10 sm/md size css files
easy to setup — because it's plain css, it is easy to add to any project without hustle
focused — main goal is to provide helpers around positioning and sizing and not being a swiss knife for everything
lib, not a framework — created to be used as addition to your current styling approach, not a replacement

2. Installation

As npm package:

# npm
npm install @peculiarjs/cssfull

# pnpm
pnpm add @peculiarjs/cssfull

After 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>

3. Classes naming approach

Measurement units

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.

Shortenings

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;
}

4. Utils overview

Brief overview of the classes.

flex.css

Everything around flexbox properties with simple naming.

.flex {
  display: flex
}
.column {
  flex-direction: column;
}
.row {
  flex-direction: row;
}
...

position.css

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%;
}

width.css

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;
}

height.css

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;
}

display.css

A block/inline-block pair.

.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.hidden {
  display: none;
}

margin.css

Pretty Similiar approach to width and height classes is used for margins. There are mnemonic for every margin side:

m — margin
mt — margin-top
mr — margin-right
mb — margin-bottom
ml — 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;
}

padding.css

For padding is used the the same approach as for margin. Mnemonics:

p — padding
pt — padding-top
pr — padding-right
pb — padding-bottom
pl — 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;
}

border.css

.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;
}

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@peculiarjs/cssfull

Table of Contents

1. What cssfull is:

2. Installation

3. Classes naming approach

Measurement units

Shortenings

4. Utils overview

flex.css

position.css

width.css

height.css

display.css

margin.css

padding.css

border.css

1. What `cssfull` is: