Qjuul

Compact syntax inline styling of JSX. Just a very qjuul way to style!

Install it

Install it

npm install --save qjuul

To edit it

Download the project from github

Move peerDependencies into devDependencies then do a yarn install/npm install Change it back after the install is complete

We need to do this so we have the libary for testing, and building the files. But we can't have it as a normal dependencies since then it would cause a dependencies conflict.

After you have mare your changes, you can run npm run build to generate the new files. Do so npm version patch to indicate new version, and then npm publish to publish.

Usage

Qjuul elements are normal jsx elements but with extra shorthand attributes for quick inline styling. The extra attributes are either boolean or need a string value. The boolean shorthands need only be added to the jsx element. The string ones need a valid string input. This input is directly inserted into the css attribute, so check out css documentation for whats available.

Usage example

import * as React from 'react'
import q from 'qjuul'

const myComponent = (props) => (
  <q.div ma="20px">
    <q.p4 pa="20px" pointer>Hello world</q.p4>
  </q.div>
)

Flexbox

Flexbox shorthands

Flexbox can be a bit verbose. Qjuul simplefies the flexbox idea and uses directions istead of flexbox attributes like flex-start, flex-end and so on. with the shorthand you define in the container where you want to place the children. All flexbox shorthands starts with "f".

fr = flex row. The children will be stacket horisontally

fc = flex column. The children will be stacked vertically

Next letter defines how children are to be placed vertically (top, center, bottom) and fourth lettter how it should be placed horisontally(left, center, right).

So "frtl" will stack the children horisontally and align it top left in the container. "fccc" will stack the children vertically and align it center vertically and center horisontally

Position attributes:

Row:

• frtl: flex row top left
• frtr: flex row top right
• frtc: flex row top center
• frbl: flex row bottom left
• frbr: flex row bottom right
• frbc: flex row bottm center
• frcl: flex row center left
• frcr: flex row center right
• frcc: flex row center center
• frts: flex row top stretch
• frbs: flex row bottom stretch
• frcs: flex row center stretch
• frsl: flex row stretch left
• frsr: flex row stretch right
• frsc: flex row stretch center

Column

• fctl: flex column top left
• fctr: flex column top right
• fctc: flex column top center
• fcbl: flex column bottom left
• fcbr: flex column bottom right
• fcbc: flex column bottm center
• fccl: flex column center left
• fccr: flex column center right
• fccc: flex column center center
• fcbs: flex column bottom stretch
• fcts: flex column top stretch
• fccs: flex column center stretch
• fcsr: flex column stretch right
• fcsl: flex column stretch left
• fcsc: flex column stretch center

Example shorthand position

  <q.div fctl>
    <q.p4>Item 1</q.p4>
    <q.p4>Item 2</q.p4>
    <q.p4>Item 3</e.p4>
    <q.p4>Item 4</q.p4>
  </q.div>

The items will be stacked vertically in a column and top left in the container

Other flexbox attributes

• fw: bool -> flex wrap. Wraps the children to next line if there is not enough space for all childen
• fwr: bool -> flex wrap reverse. Same as fw but reverse
• f1: bool -> sets "flex: 1;"
• f2: bool -> sets "flex: 2;"
• f3: bool -> sets "flex: 3;"
• fs0: bool -> sets flex shrink to 0. Often used to avoid container collapse
• fflex: string -> sets flex: %string%; (<q.div fflex="5">Hello</q.div>)
• fsb: bool -> sets justify-content: space-between;
• fsa: bool -> sets justify-content: space-around;
• fse: bool -> sets justify-content: space-evenly;
• gap: string -> gap: %string%; (v0.2.1)

Dynamic CSS

Dynamic CSS shorthands

Qjuul elements has a selection of attributes that are shorthands of standard CSS attributes. Most of them, and a rule of thumb is that the shorthand is the two first letters. Like "pa" is short for "padding". In two word attributes like "background-color" the rule of thumb is the two letters in both words camelcased. Like "baCo" is background color.

Available dynamic shorthands:

• co: string = color
• foWe: string = font-weight
• bold: bool = font-weight: 700;
• foSi: string = font-size
• liHe: string = line-height
• w100: bool = width: 100%;
• pa: string = padding
• ma: string = margin
• baCo: string = background-color
• label: string = a label thats added to the class name of the element
• ovAu: bool = overflow: auto;
• pointer: bool = cursor: pointer;
• ellipsis: bool = white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
• uppercase: bool = turns text to upper case letters
• lowercase: bool = turns text to lower case
• po: string = position
• top: string = top
• bo: string = bottom
• le: string = left
• ri: string = right
• ov: string = overflow
• hide: bool = display: none;
• nowrap: bool = text does not wrap in container
• z1: bool = z-index to 1
• z: string = z-index
• wi: string = width
• he: string = height
• maxh: string = max-height
• minh: string = min-height
• maxw: string = max-width
• minw: string = min-width
• vw100: bool = width: 100vh;
• vh100: bool = height: 100vh;

Added in 0.1.5:

• h100: bool = height: 100%;
• notvisible: bool = visiblility: hidden;
• txal: 'center' | 'left' | 'right' | 'justify' | string = text-alignment: position;
• shadow: {baCo: string, size: string} = shadow-box: halfSize size 80%Sizepx sizepx color:

Added in 0.1.7

• hoLine: boolean = underline on hover
• noSel: boolean = no select on text
• scale: number = scale for content
• zoom: number = zoom for content
• foFam: string = set font family

Added in 0.2.1

• capa: boolean = capatilize text first letter
• hoOp: string | number = opacity on hover
• asRa: bool | number | string = set aspect ratio to 1 or spesific
• bor: string = set border
• ouLi: string = set outline
• woBr: string = set word-break
• trTi: string = set transition
• trFo: string = set transform

Added in 0.2.3

• borWi: string = set border-width

Added in 1.0.0

• ws: string = white-space
• txDec: string = text decoration
• iso: bool | string = Isolation
• inset: string = top right bottom left in one
• hideAt: number = Hides at a screen size
• showAt: number = Shows at a screen size
• lt: Qjuul Object = LessThan, size triggered qjuul properites
• mt: Qjuul Object = MoreThan, size triggered qjuul properites
• lsSt: string = List style
• poEv: string = pointer-events
• cCss: string = custom css code, sets into css object as provided
• bg: string = Backgorund css
• laIt: Qjuul Object = to set custom css based on it being last item of type
• evIt: Qjuul Object = to set custom css based on it being even item of type
• fiIt: Qjuul Object = to set custom css based on it being first item of type
• odIt: Qjuul Object = to set custom css based on it being odd item of type

Added in 1.0.6

• brNe: number = filter: brightness
• blur: number = filter: blur
• unLi: number = text-decoration-line: underline

Available elements

• q.h1
• q.h2
• q.h3
• q.h4
• q.h5
• q.h6
• q.p
• q.p1 (p with h1 size)
• q.p2 (p with h2 size)
• q.p3 (p with h3 size)
• q.p4 (p with h4 size)
• q.p5 (p with h5 size)
• q.p6 (p with h6 size)
• q.main
• q.spacer (div element with flex: 1;), used to push to flex children to each side of component
• q.div
• q.header
• q.section
• q.a
• q.ins
• q.ul
• q.li
• (v1.0) Every HTML Tag (Striked is replaced by this)

Best practices

Qjuul is made to make inline styling compact so its eeasy to see whats goin on style-wise right in the JSX declaration without checking the CSS file or classes in the same file. However, if you find you need to use many shorthand attributes to reach your styling goals to an element it might be better to keep the styling in a class like normal. The "className" attribute works as it does on normal JSX elements and will overwrite styling made by the shorthand attributes.

Best practive to separate styling from other component functionality can be to add styling after the element name, and onClicks and so on stacked vertically under.

Like so

  <q.div fctl ma="20px" pointer
    onClick={() => console.log("Qjuul is the qjuulest")}
  >
    <q.p4>Hello</q.p4>
  </q.div>