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 3.1.2

The new concept of css frameworks.

https://simple-css.com/

If you have some suggestions or bugs, please write me to AlexSorkin1980@gmail.com .

What is Simple.css?

Simple.css is a js class which helps you to build css code simply, faster, more understandble and dynamic. Simple.css has templates (like @mixin in saas), variable managment, dom style managment tools, and more.

What you need for using Simple.css?

Knowledge in css
Basic knowledge in js

Old versions: Beta | V1 | V2

What's new in 3.1.2?

json method removed
Added: inline templates as attributes
Added: preloader for inline
Added: copy style from element by id
Added: navicon to templates

Instalation

Npm instalation (Node js installed)

Install the package

npm i als-simple-css

Include simple.js in your html file

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

Download file

Download the file from here: Simple css 3.0
Include simple.js in your html file:

<script src="yourFolder/simple.js"></script>

Cdn

Include in your html file:

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

Start with Simple.css

After including simple.js in your html code, create new instance of Simple with your simple styles. Will talk next, how to build the styles (Simple syntax).

Syntax:

<script>
let styles = {}
new Simple(styles)
</script>

Simple syntax

First parameter in Simple is an object, which includes simple styles and templates.

Simple styles ara json or js object. The key in object is a selector and the value is a styles separated by space. It may look like this:

let styles = {
    *:"boxSizing-borderBox fontSize-1rem",
    body:"margin-0 width-100vh",
    ".some":"backgroundColor-red color-white shadow-10px_10px_10px_black"
}

As you can see on example above, simple styles has some syntax rules:

camelCase instead “–” and “-” instead “:”

Instead box-sizing:border-box; use boxSizing-borderBox

“--” instead “-”

Instead padding:-5px; use padding---5px

“_” instead space

Instead box-shadow:10px 10px 10px gray use boxShadow-10px_10px_10px_gray

Space instead “;”

Each style separated by space instead ;

Instead margin:1rem; padding:1rem; use margin-1rem padding-1rem

Templates

Template is a function stored inside Simple.templates. Simple.css has builtin functions that you can use as templates inside your code.

For example, instead backgroundColor-red use bgc(red). And instead borderRight-5px_black_solid use br(5px,black,solid) or even br(5px) cause black and solid are default parameters.

You can see the list of built in templates here

Also you can create your own template by including new template in styles or by adding new template to Simple.templates.

Creating new template inside styles

new Simple({
    rect: (w,h,color) => `width-${w} height-${h} backgroundColor-${color}`,
    '.rect':'rect(100px,200px,red)',
})

Creating new template with Simple.templates

Simple.templates['rect'] = (w,h,color) => `width-${w} height-${h} backgroundColor-${color}`

You can use css functions inside template functions: a(test,2s,1,alternateReverse,cubicBezier(7,9,4,7))

To set parameter to default, just write ,. For example b(,,dashed) will return ``border-1px_black_dashed

Variables

There are 3 ways to use variables in simple syntax:

$varName=value equivalent to varName:value
$varName(value) equivalent to var(--varName,value)
$varName equivalent to var(--varName)

You can use it inside calc().

":root":"$w=50px", // --width:50px
".some": "width-calc($w*2)", // width:calc(var(--w)*2)
".some1": "w(calc($w*3))" // width:calc(var(--w)*3)

Also, you can manage css variables with javascript with Simple.$(varName,varValue,varValue2) method. Here how it works:

Simple.$('w') // return 50px
Simple.$('w','100px') // Changing --w to 100px
Simple.$('w','100px','50px') // if w=50px, change to 100px. If w=100px, change to 50px. Else - do nothing.

You can use it for example like this:

<script>
new Simple({
    ":root": "$d=none",
    ".block": "d($d)",
})
</script>

<button onclick="Simple.$('d','none','block')">Hide/show</button>
<div class="block">Hello</div>

@selectors and important

In Simple.css selectors are keys in object. And you can use them like in regular css. But pseudo classes and pseudo elements, has some additional syntax which will turn your code to simplier and shorter.

There is shorter form for some pseudos. For example ::b instead ::before, or :h instead :hover.
You can use pseudo classes and pseudo elements inside styles. For example bgc(purple):h.

Here how it looks like:

// css code: .some::after:hover {content:”hello”}
let styles = {
    ".some::after:hover":"cont(hello)", 
    ".some":"cont(hello):🅰️h"
}

Here is the list of short pseudos:

{
    "::a":"::after",
    "::b":"::before",
    "::flr":"::first-letter",
    "::fln":"::first-line",
    "::s":"::selection",
    ":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",
}

!important To use !important, add on the end of simple element "!".

Fo example:

'.some':'backgroundColor-blue! w(unset)!'

Then using templates, important will be added to last property.

@font-face and @charset

You can use @font-face and @charset like this:

let styles = {
    "@charset": "UTF-8",
    '@fontFace': `fontFamily-test 
        src-url('https://fonts.googleapis.com/css?family=Sofia')`,
}

@media, @keyframes, @supports

@media, @keyframse and @supports, are objects which includes keys:styles. On functions, you still need to use camelCase instead "-", but use ":" to define values.

Here how it works:

let styles = {
    body:"m(0)",
    "@media only screen and (maxWidth:600px)" : {
        body:"m(1rem)",
    },
    "@keyframes test" : {
        "0%": "bgc(red)",
        "100%": "bgc(green)"
    },
    "@supports not (margin:1rem)": {
        body: "p(1rem)"
    }
}

In @media you also can use templates. For example:

let styles = {
    "@media only screen and (maxw(600px))" : {
        body:"m(1rem)",
    },
}

There are few templates exact for @media. Here they are:

// Extra small devices (phones, 600px and down) 
phone() 'only screen and (maxWidth-600px)', 
// Small devices (portrait tablets and large phones, 600px and up) 
phablet() 'only screen and (minWidth-600px)', 
// Medium devices (landscape tablets, 768px and up) 
tablet() 'only screen and (minWidth-768px)', 
// Large devices (laptops/desktops, 992px and up) 
laptop() 'only screen and (minWidth-992px)', 
// Extra large devices (large laptops and desktops, 1200px and up) 
desktop() 'only screen and (minWidth-1200px)',

For example:

let styles = {
    "@media phone()" : {body:"c(red)",},
    "@media desktop()" : {body:"c(green)",},
}

Publish options

You have few publish options:

Simple.objects - storing every Simple instance which has styles
StyleSheet (by default) - publish your styleSheet in document.styleSheets and it's available also on simpleObj.styleSheet. You can do few operation with stored styleSheet.
1. Log - console.log your simpleObj.styleSheet
2. Download - placing button to download your styleSheet as a file (or clicks the button on load)
3. Head - publish your styleSheet on head between <style></style>
4. Minify styleSheet
Donwload/console.log style from json fn as a second parameter - Json([],'download/log')
Set Disable - disable or enable published styleSheet (on document.styleSheets)

Let's look closer to each.

Simple.objects

All Simple object instances (with styles !== undefined) stored inside array Simple.objects. You can access any Simple object, simply by calling it's index. For example:

new Simple(styles)
new Simple(styles2)
Simple.objects[1] // return second created Simple object

StyleSheet

Every Simple object, has stored styles as object of styles and styleSheet. You can access it like this:

let obj = new Simple(styles)
obj.styleSheet // return ready styleSheet
obj.styles // return object with styles

By default, styleSheet published into document.styleSheets and apply the styles by added rules. You can disable it, by adding second parameter as false. It maybe relevant, if you want to add your styles to head instead to styleSheet. Here is the example:

head

new Simple(styles,false).head()

download file Also, you can download the styleSheet by giving name as first parameter and show or not to show the link on second parameter. If second parameter set to false, download will start automaticly after page has loaded.

new Simple(styles).
download(filename = 'styles.css',link=true) // returns Simple object

console.log(styleSheet)

You can console.log the styleSheet.

new Simple(styles).log() // returns Simple object

// Equivalent to :
console.log(new Simple(styles).styleSheet)

Minify

You can remove all spaces from styleSheet by setting Simple.minify=true or disable it with Simple.minify=false (by defult).

disable (setter)

Every simple object creates new stylesheet which you can disable or enable to apply or disable styles.

let simple = new Simple(styles)
simple.disable = true // disable the styleSheet
simple.disable = false // enable the styleSheet

Convert to css (Node.js)

You can convert your simple file/s to css file/s and watch the changes.

Syntax:

convert(simpleFilesArray:array,cssFilePath:string,watch:boolean)

Parameter: simpleFilesArray This parameter is array with files and folders. If folder containes subfolders, convert method will look throw all tree.

Parameter: cssFilePath This parameter can be file or folder.

If parameter is file - all styles will be concatenated to single file.
If parameter is folder, all simple files will be coverted in same directory tree to css files with simple file names.

let Simple = require('als-simple-css')
let {resolve} = require('path')

// Simple.minify = true
let simpleFilesArray = [
    resolve(__dirname,'styles','some.js'),
    resolve(__dirname,'styles','some1.json'),
    resolve(__dirname,'styles','some2.json'),
]

let cssFilePath = resolve(__dirname,'css') // or let cssFilePath = 'mix.css'
let watch = true

Simple.convert(simpleFilesArray,cssFilePath,watch)

If watch is true, after running command in console, each simple file will be watched. In case of changes, convertion process will be repeaten.

Set Simple.minify = true before the convertion - the converted file will be minified.

inline css

You can use simple in inline css too. Then you creating new instance of Simple, it looks for _ attribute in dom tree. The it find it, all simples turned applied as styles to this dom element.

Here is the example.

inline simple css

<div _="box($size,$size) bgc($color)" style="display: inline-block">Hello </div>

the result:

<div style="display: inline-block; width: var(--size); height: var(--size); background-color: var(--color);">Hello </div>

You can disable inline css by setting Simple.$inline = false.

Simple templates as attributes

There is another additional way to build inline css. If element has _ attribute (even empty), you can add simple templates as templateName="param,param,..".

Alt Text

Here is the example:

<div _ bgc="purple" c="white" ts="1.5rem" bold ta="center" b="5px">Hello </div>

The result:

<div style="
    background-color: purple; 
    color: white; 
    font-size: 1.5rem; 
    font-weight: bold; 
    text-align: center;
">Hello </div>

Clone element's style by id

If _ attribute's value contain #, Simple.css:

Will get the element by #id
Will copy it's styles
Will add it's styles, to curent element's style

Here is the example for flex model:

<div _ flex="wrap" flexh="a">
    
    <div _ col="3,3" p="1rem" b="5px,lightgray,outset" 
    c="white" bgc="red" m="1rem" ta="center" id="col">Hello</div>
    
    <div _="#col" bgc="green">Hello</div>
    <div _="#col"  bgc="blue">Hello</div>
    <div _="#col" bgc="purple">Hello</div>
</div>

The result:

<div style="display: flex; flex-wrap: wrap;">
    <div id="col" style="width: 300px; max-width: 100%; padding: 1rem; border: 5px outset lightgray; color: white; background-color: red; margin: 1rem; text-align: center;">Hello</div>
    <div style="width: 300px; max-width: 100%; padding: 1rem; border: 5px outset lightgray; color: white; background-color: green; margin: 1rem; text-align: center;">Hello</div>
    <div style="width: 300px; max-width: 100%; padding: 1rem; border: 5px outset lightgray; color: white; background-color: blue; margin: 1rem; text-align: center;">Hello</div>
    <div style="width: 300px; max-width: 100%; padding: 1rem; border: 5px outset lightgray; color: white; background-color: purple; margin: 1rem; text-align: center;">Hello</div>
</div>

Instruments

Simple css has few instruments for simpler work with css and dom styles.

$$(selector) - get dom elements and manipulate their styles
Drags - make elements dragble
screenSize - dynamic css variable screensize
widerThen(width,fn,fn2) - set functions depend of screen size
isMedia() - check if browser is mobile

Manipulate dom styles - `$$(selector)`

Simple.$$(selector) method, get dom collection and add tools for manipulating each dom.

Selector is a css selector, like #id, .class, or tag. But also it can be dom element itself. Here are few examples for selector parameter.

Simple.$$('.some') // get all elements with class .some

let somes = document.querySelectorAll('.some')
Simple.$$(somes) // do the same thing as Simple.$$('.some')

Simple.$$() method return array of objects with tools to manipulate the collection. In case collection has only one element, Simple.$$() retrun just one object with tools.

Here are the tools:

_(simples) - adding inline styles converted from simples
class(className,className2) - adding or switching classes
prop(propName='',propName2='') - adding or switching attribute
style(style1,style2) - adding or switching style
z() - set higher z-index (the last value stored in Simple.zindex)
drag(triger) - make ellement dragble

Let's see how each of this tools works.

Method _(simples)

_ method get simple styles and turn them to inline css. Here is the example:

Simple.$$('#some')._('bgc(re) c(white)')

Method class(className,className2)

class method checks if class included in classlist. If second parameter no undefined, checks which from two classes is exsit and replace with another.

Simple.$$('.some')[0].class('hide') // return true if class in a classList or false if not
Simple.$$('.some')[0].class('hide','show') // if hide, remove hide and add show, else remove show and add hide

Method style(style1,style2)

style method toggle between style1 and style2.

Simple.$$('.some')[0].style('color:red','color:green')

Method prop(propName='',propName2='')

Simple.$$('.some')[0]._('disabled') // if disables, remove it. Else add disabled
Simple.$$('.some')[0]._('disabled','enabled') // if disabled, remove it and add enabled.if enabled, remove it and add disabled.

Method z() Simple.css has static property zindex which start at one. Evry time z() is calling, zindex++.

z() method setting the last zindex+1 to dom element. Here an example:

Simple.$$('.some')[0].z() // The element got inline style z-index:2
Simple.$$('.some1')[0].z() // The element got inline style z-index:3

Method drag(triger)

drag method turn your element to dragble. The triger parameter is an selector of child node element of the main dom element (dom inside $$(dom)). Triger allows you to drag the dom element, only then you drag it on triger element.