JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 10
  • Score
    100M100P100Q68404F
  • License ISC

Simple file to write and manage css code.

Package Exports

  • als-simple-css

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (als-simple-css) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Simple.css Simple.css

link to documentation site

link to old version documentation site

If you have any suggestions, please notice me on AlexSorkin1980@gmail.com

About

When i learned css, i got, that i dont like this long slim code and those long properties names. Also i found, that it's not comfortable to use variables in css and ability to include one style in another is very missing.

That's why i created simpler way to write css and manage variables.

Simple.css is a fast, short, simple and easy way to write css code using JavaScript. And the best part, that the code above can be simply generated to css code.

Advantages:

  1. Significantly shorter code
  2. Use variables and simply change their values with JavaScript
  3. Bind one style inside another
  4. Convert to regular css as option (via node)

install

Install the package in console

npm i als-simple-css

Include the simple.js in your project in head section.

<head>
    <script src="node_modules/als-simple-css/simple.js"> </script>
</head>

cdn

You can use cdn link: https://cdn.jsdelivr.net/npm/als-simple-css@1.0.0/simple.js

<head>
    <script src="https://cdn.jsdelivr.net/npm/als-simple-css@1.0.0/simple.js"> </script>
</head>

Basics

As in regular css, you can insert css code:

  1. As a file (js file instead css)
  2. Inside html code (inside instead inside )
  3. Inside dom element (as css="" instead style="")

Styles inside html or file

In both cases you will use the _(styles:object) function. Styles is an object which incudes selectors and properties. Here is an example for class .test with padding .5em and text size 16px:

<head>
    <script src="node_modules/als-simple-css/simple.js"> </script>
    <script>_({".test":"p-.5em ts-16px",})</script>
</head>

Important

The script has to be in head section, before dom content loaded and after including simple.css.

You can do the same inside js file and just include this file as <script src="styles.js">

The _ function will create <style> tag and will add vonverted css styles to it. Here the syntax of the function:

Basic syntax for styles: 

_({
    "selector": "pseudoClass:property-parameter_parameter"
})

Basics in syntax

  • "-" = ":"
  • "_" = " " (space)
  • "--" = "-" or camelCase
  • "!" = !important

Examples:

/* Css syntax */
* {font-family: Arial, Sans-serif;}
// Simple.css syntax - few options which do the same
_({
    "*":"fontFamily-arial,sansSerif", // camelCase instead "-"
    "*":"fontFamily-arial,sans--serif", // "--" insted "-" 
    "*":"ff-arial,sansSerif", // camelCase instead "-" and short property name
})

As shown on example above, there are few options to write code. You can use short property names (the list will be shown below) or full property names. Also, you need to use "_" instead space, "-" instead ":" and "--" or camelCase instead "-".

For example borderRightColor-red, brc-red and border--right--color-red do the same. First example is camelCase, second - short property and third using "--" insted "-".

For example, instead 

.btn {
    padding:.5rem 1rem;
    outline:0;
    border:0;
    cursor: pointer;
    background-color:blue;
    color:white;
    font-size:1rem;
}
.btn:hover {
    background-color:lightblue;
    color:black;
}
.btn:focus {
    font-weight: bold;
}

You can write:

_({
    ".btn":`p-.5rem_1rem o-0 b-0 pointer bgc-blue 
    tc-white ts-1rem h:bgc-lightblue h:tc-black f:bold`
})

It shorter and more readble. For example "p" is padding, "o" is outline, "bgc" is background-color. But don't worry. You don't need to learn the short names. You can use regular css inside Simple.css function, with a little bit different syntax. It may looks like this:

_({
    ".btn":`padding-.5rem_1rem outline-0 b-0 cursor-pointer 
    backgroundColor-blue textColor-white fontSize-1rem 
    h:backgroundColor-lightblue h:fontColor-black f:fontWeight-bold`
})

Box sizing

By default, all styles returned with *, *::before, *::after {box-sizing: border-box;} If you want to disable it, you need to define false to third parameter like this:

_(styles,false)

List of short properties

{
Background: {
    bg: "background",
    bgc: "background-color",
    bglg: "ackground-image:linear-gradient(",
    bgrlg: "ackground-image: repeating-linear-gradient(",
    bgrg: "ackground-image: radial-gradient(",
    bgrrg: "ackground-image: repeating-radial-gradient(red",
    bgs: "background-size",
    bgo: "background-origin",
    bgclip: "background-clip",
    bgi: "background-image",
    bgr: "background-repeat",
    bga: "background-attachment",
    bgp: "background-position",
},
Borders: {
    b: "border",
    br: "border-right",
    bl: "border-left",
    bt: "border-top",
    bb: "border-bottom",
    bs:"border-style",
    brs: "border-right-style",
    bls: "border-left-style",
    bts: "border-top-style",
    bbs: "border-bottom-style",
    bw: "border-width",
    brw: "border-right-width",
    blw: "border-left-width",
    btw: "border-top-width",
    bbw: "border-bottom-width",
    bc: "border-color",
    brc: "border-right-color",
    blc: "border-left-color",
    btc: "border-top-color",
    bbc: "border-bottom-color",
    radius: "border-radius",
    tlradius:"border-top-left-radius",
    trradius:"border-top-right-radius",
    brradius:"border-bottom-right-radius",
    blradius:"border-bottom-left-radius",
},
Margins: {
    m: "margin",
    mb: "margin-bottom",
    ml: "margin-left",
    mr: "margin-right",
    mt: "margin-top",
},
Padding: {
    p: "padding",
    pb: "padding-bottom",
    pl: "padding-left",
    pr: "padding-right",
    pt: "padding-top",
},
"Height and width": {
    h:"height",
    w:"width",
    maxh:"max-height",
    minh:"min-height",
    maxw:"max-width",
    minw:"min-width",
},
Outline: {
    o:"outline",
    oc:"outline-color",
    oo:"outline-offset",
    os:"outline-style",
    ow:"outline-width",
},
Text: {
    tc: "color",
    td: "text-decoration",
    to: "text-overflow",
    ta: "text-align",
    tcenter: "text-align:center",
    tleft: "text-align:left",
    tright: "text-align:right",
    tjustify: "text-align:justify",
    tclip: "text-overflow:clip",
    tellipsis: "text-overflow:ellipsis",
    underline: "text-decoration:underline",
    overline: "text-decoration:overline",
    linet: "text-decoration:line-through",
    tt: "text-transform",
    dir:"direction",
    rtl:'direction:rtl',
    ltr:'direction:ltr',
    ub: "unicode-bidi",
    ti: "text-indent",
    ls: "letter-spacing",
    lh: "line-height",
    ws: "word-spacing",
    wb: "word-break",
    space: "white-space",
    nowrap: "white-space:nowrap",
    pre: "white-space:pre",
    prewrap: "white-space:pre-wrap",
    preline: "white-space:pre-line",
    breaks: "white-space:break-spaces",
    ww: "word-wrap",
    ts: "font-size",
},
Font: {
    f: "font",
    ff: "font-family",
    fs: "font-style",
    tw: "font-weight",
    fv: "font-variant",
    italic: "font-style: italic",
    bold: "font-weight: bold",
    arial: "font-family: Arial",
    verdana: "font-family: Verdana",
    helvetica: "font-family: Helvetica",
    tahoma: "font-family: Tahoma",
    trebuchet: "font-family: Trebuchet MS",
    times: "font-family: Times New Roman",
    georgia: "font-family: Georgia",
    garamond: "font-family: Garamond",
    courier: "font-family: Courier New",
    brush: "font-family: Brush Script MT",
},
Lists: {
    list: "list-style",
    listi:"list-style-image",
    listp:"list-style-position",
    listt:"list-style-type",
},
Display: {
    d: "display",
    block: "display: block",
    inline: "display: inline",
    iblock: "display: inline-block",
    flex: "display: flex",
    grid: "display: grid",
    iflex: "display: inline-flex",
    igrid: "display: inline-grid",
    hide: "display: none",
    show: "display: initial",
    v: "visibility",
    visible: "visibility: visible",
    hidden: "visibility: hidden",
},
Position: {
    pos: "position",
    static: "position:static",
    relative: "position:relative",
    fixed: "position:fixed",
    absolute: "position:absolute",
    sticky: "position:sticky",
    clip: "clip",
    rect: "clip:rect(",
    z: "z-index",
},
Overflow: {
    of: "overflow",
    ofx: "overflow-x",
    ofy: "overflow-y",
    scroll: "overflow:auto",
    noscroll: "overflow:hidden",
    scrollx: "overflow-x:scroll",
    noscrollx: "overflow-x:hidden",
    scrolly: "overflow-y:scroll",
    noscrolly: "overflow-y:hidden",
    smooth: "scroll-behavior: smooth",
},
Float: {
    float:"float",
    fleft:"float:left",
    fright:"float:right",
},
Flex: {
    jc: "justify-content",
    flexw: "flex-wrap",
    flexd: "flex-direction",
    flexs: "flex-shrink",
    flexb: "flex-basis",
    flexg: "flex-grow",
    hleft: "justify-content:flex-start",
    hright: "justify-content:flex-end",
    hcenter: "justify-content:center",
    spaceb: "justify-content:space-between",
    spacea: "justify-content:space-around",
    vcenter: "align-items: center",
    vtop: "align-content: flex-start",
    vbottom: "align-content: flex-end",
    center: "justify-content:center;align-items: center",
    wrap: "flex-wrap:wrap",
    fcol: "flex-direction: column",
    frow: "flex-direction: row",
    aitems:"align-items",
    acontent:"align-content",
},
Grid: {
    gcol: "grid-column",
    grow: "grid-row",
    gcolstart: "grid-column-start",
    gcolend: "grid-column-end",
    gtcol: "grid-template-columns",
    gtrow: "grid-template-rows",
    gacol: "grid-auto-columns",
    garow: "grid-auto-rows",
    gtemplate: "grid-template",
    gaf: "grid-auto-flow",
    template: "grid-template-areas",
    area: "grid-area",
    gap: "gap",
    rowgap: "row-gap",
    colgap: "column-gap",
    gaf: "grid-auto-flow",
    gfcol: "grid-auto-glow:column",
    gfrow: "grid-auto-glow:row",
},
Columns: {
    col: "column-count",
    colw: "column-width",
    colr: "column-rule",
    colg: "column-gap",
    colspan: "column-span",
    colf: "column-fill",
    colrc: "column-rule-color",
    colrs: "column-rule-style",
    colrw: "column-rule-width",
},
Transition: {
    trans: "transition",
    transdelay: "transition-delay",
    transduration: "transition-duration",
    transprop: "transition-property",
    transfn: "transition-timing-function",
},
Animation: {
    a: "animation",
    adelay: "animation-delay",
    adir: "animation-direction",
    adur: "animation-duration",
    aname: "animation-name",
    amode: "animation-fill-mode",
    aiter: "animation-iteration-count",
    aplay: "animation-play-state",
    afn: "animation-timing-function",
},
Resize: {
    r: "resize",
    both: "resize: both",
    resizeh: "resize: horizontal",
    resizev: "resize: vertical",
},
Shadow: {
    tshadow: "text-shadow",
    shadow: "box-shadow",
},
Transform: {
    translate: "transform:translate(",
    rotate: "transform:rotate(",
    rotatex: "transform:rotateX(",
    rotatey: "transform:rotateY(",
    rotatez: "transform:rotateZ(",
    scalex: "transform:scaleX(",
    scaley: "transform:scaleY(",
    scale: "transform:scale(",
    skewx: "transform:skewX(",
    skewy: "transform:skewY(",
    skew: "transform:skew(",
    matrix: "transform:matrix(",
},
Cursors: {
    c:'cursor',
    pointer: 'cursor: pointer;',
    move: 'cursor: move;',
    hresize: 'cursor: ew-resize;',
    cont: "content",
},
Effects: {
    saturate: "filter: saturate(",
    brightness: "filter: brightness(",
    contrast: "filter: contrast(",
    grayscale: "filter: grayscale(",
    huer: "filter: hue-rotate(",
    invert: "filter: invert(",
    sepia: "filter: sepia(",
    blur: "filter: blur(",
    aself:'align-self',
},
}

Pseudo classes and elements

You can use pseudo classes and pseudo elements with selector, but also inside the properties. See the examples below:

pseudo inside selectors

Example: 

// Simple.css
_({"b::h:[test]":"cont-'hello'"})
/* Css */
[test]:hover::before {
    content: 'hello';
}

You can use few selectors and add to them pseudo classes

_({"b::h:[test],div":"cont-'hello'"})
[test]:hover::before {
      content: 'hello';
}
div:hover {
      content: 'hello';
}

pseudo inside properties

Button example:

_({
    ".btn":
    `p-.5rem_1rem o-0 b-0 pointer 
    bgc-blue tc-white ts-1rem 
    h:bgc-lightblue h:tc-black
    f:bold`
})

Here css code for simple.css code above:

*, *::before, *::after {box-sizing: border-box;}
.btn {
    padding:.5rem 1rem;
    outline:0;
    border:0;
    cursor: pointer;
    background-color:blue;
    color:white;
    font-size:1rem;
}
.btn:hover {
    background-color:lightblue;
    color:black;
}
.btn:focus {
    font-weight: bold;
}

In example above, .btn has hover (h:) and focus (f:) pseudo classes which included inside properties and not inisde selector.

Here the list of pseudo classes and elements:

PseudoClasses = {
    h:'hover',
    f:'focus',
    c:'checked',
    fc:'first-child',
    lc:'last-child',
    d:'disabled',
    a:'active',
    in:'in-range',
    fot:'first-of-type',
    lot:'last-of-type',
    i:'invalid',
    l:'link',
    oot:'only-of-type',
    oc:'only-child',
    o:'optional',
    oor:'out-of-range',
    ro:'read-only',
    rw:'read-write',
    r:'required',
    t:'target',
    v:'valid',

    empty:'empty',
    enabled:'enabled',
    root:'root',
    visited:'visited',

    n:'not', // -selector
    nc:'nth-child', // -n
    nlc:'nth-last-child', // -n
    nlot:'nth-last-of-type', // -n
    not:'nth-of-type', // -n
    lang:'lang', // -language
}

PseudoElements = {
    a:'after',
    b:'before',
    fl:'first-letter',
    fli:'first-line',
    s:'selection'
}

Variables

You can easy set css variables and simply get and change their values with js.

To define variable, just add to properties $varName=value where $varName is a name of variable and value is initial value. Here is example:

_({
    '.some': "tc-$color=blue",
    '.some1': "bgc-$color"
})

css result:

*, *::before, *::after {box-sizing: border-box;}
:root {
    --color:blue;
}
.some {
    color:var(--color);
}
.some1 {
    background-color:var(--color);
}

As shown on example above, initial variable's value anyway defined in :root. But you can define all your variables in root too. Here is the example:

Example:

_({
    ":root": "$bg=blue",
    "div": "bgc-$bg"
})

Change value for css variables with vars

Now, all your variables are available as getters and setters in vars object variable.

vars has getter and setter for each css variable binded with _() function.

You can get value with vars.varName or set new value with vars.$varName = 'new value' where varName is a css variable name. Here is the example:

_({body:"$bg=blue bgc-$bg"})
console.log(vars.bg) // blue

vars.$bg = 'green' // change body color
console.log(vars.bg) // green

_$ function for change or replace css variable's value

The _$ return, change or replace value with new one.

Syntax:

_$(varName) // return varName's curent value
_$(varName,newValue) // change varName's value to newValue
_$(varName,value,value2) // If varName = value, replace with value2. If varName = value2, replace with value

Example:

<nav></nav>
<button onclick="_('v','block','none')">&#9776;</button>

<script>_({nav:"d-$v=block"})</script>

The example above will show and hide nav menu onclick

@Media

To define media queries, use @m:condition: {selector:properties,..}

  • @m: = media
  • Examples:
_({
    "@m:minw-600px maxw-1024px": {
        div:"bg-red"
    },
    "@m:s & maxw-600px":{
        div:"hide"
    }
})
@media (max-width: 1024px) {
    div {
        background-color: red;
    }
}
@media screen and (max-width: 600px) {
    div {
        display: none;
    }
}

Media properties

Here the list of media properties:

MediaTypes = {
    "&":" and ",
    "n":" not ",
    "o":" only ",
    "a": "all",
    "s": "screen",
    "p": "print",
    "sp": "speech",
    "ah":"any-hover",
    "ap":"any-pointer",
    "ar":"aspect-ratio",
    "c":"color",
    "cg":"color-gamut",
    "ci":"color-index",
    "g":"grid",
    "h":"height",
    "ho":"hover",
    "ic":"inverted-colors",
    "ll":"light-level",
    "maxar":"max-aspect-ratio",
    "maxc":"max-color",
    "maxci":"max-color-index",
    "maxh":"max-height",
    "maxm":"max-monochrome",
    "maxr":"max-resolution",
    "maxw":"max-width",
    "minar":"min-aspect-ratio",
    "minc":"min-color",
    "minci":"min-color-index",
    "minh":"min-height",
    "minm":"min-monochrome",
    "minr":"min-resolution",
    "minw":"min-width",
    "m":"monochrome",
    "or":"orientation",
    "ob":"overflow-block",
    "oi":"overflow-inline",
    "po":"pointer",
    "r":"resolution",
    "scan":"scan",
    "sc":"scripting",
    "u":"update",
    "w":"width",
}

JS listiner for media

Simple.css has widerThen function which can run functions depend on screen width size.

Syntax:

widerThen(width,fn,fn2)
  • width - screen width for listiner
  • fn - run this function if screen width bigger or equal to width parameter
  • fn2 - run this function if screen width smaller then width parameter

If fn and fn2 not defined, function return

  • false if width<=screensize
  • true if width>screensize.

Example:

let nav = document.getElementById('nav')

screenWidth(800,
// If screen width >= 800 px, hide nav
    ()=>{nav.style.display = 'block'}
// If screen width < 800 px, show nav
    ()=>{nav.style.display = 'none'}, 
)

is media function

isMedia is a function which checks if user agent is mobile. If user agent is mobile, function return true. Esle, return false. 

isMedia()

@keyframes

Keyframes starts with @k.

Example:

_({
    "@k:test":"from:bg-red;tc-black to:bg-blue;tc-white",
})

Include styles inside another styles

You can include one style inside another. Here is an example:

_({
    "[btn]":"p-.5em_1em bra-5px b-0 o-0 pointer f:bold",
    "[btn-blue]":"[btn] h:bg-blue h:tc-white bg-lightblue"
})

Export to css file

You can easy export simple styles to regular css file with node.js.

Example:

// shadows.js
let _ = require('../simple/simple')
let {join} = require('path')

let filePath = join(__dirname,'test.css')
_({
    "[hshadow]": "h:shadow-gray_0_0_5px_1px",
    "[shadow]": "shadow-gray_0_0_5px_1px",
},true,filePath)

Command in console:

node shadows

Example output:

/* test.css */
*, *::before, *::after {box-sizing: border-box;}
[hshadow]:hover {
    box-shadow:gray 0 0 5px 1px;
}
[shadow] {
    box-shadow:gray 0 0 5px 1px;
}

Watch and convert

If you want to work only with css files, you can watch changes in your styles file and automaticly convert them to css file. The _ function return object with watch function which watching changes in your js file and convert them to css file.

let _ = require('./simple')

let styles = {"test":"ts-1rem bgc-blue m-1rem p-1rem"}
let cssFilePath = __dirname+'/test.css'
_(styles,true,cssFilePath).watch(__filename)

module.exports = styles