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

Als-Simple.css 4.0

Simple.css is an engine for building css stylesheets inside js code. With Simple.css you can use js code inside css code, use css variables, short syntax functions with parameters and more.

Simple.css helps to keep large stylesheets much shorter, more organized and simplier. You can use Simple.css on inline css too.

The best part - you don't need to compile simple.css code to css. It works without compiling, cause it written on JavaScript. But if you want, you can convert and minify simple.css to regular css stylesheet by downloading file, or by compiling css file with node.js.

The 4.0 version builded from scratch and very different compaires to previous versions.

Old versions:

Install

To start using Simple.css, you need to include Simple.js in you html document.

You can install the package or to use cdn:

Install and include Simple.js from node_modules folder

npm i als-simple-css

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

Cdn: include in your html file the folowing

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

As shown above, the simple.js file has to be included in head section. Now you ready to use Simple.css.

Basics

After including simple.js file in your html file, you have Simple class available. Simple class has only one parameter - styles.

Styles is an object which includes all simple styles written with special syntax which will be explained next.

Here how it looks like:

<head>
<script src="/node_modules/als-simple-css/simple.js"> </script>
<script>
   let styles = {}
   new Simple(styles)
</script>
</head>

Pay attention, the new Simple object has to be created on head section, before rest dom content wil be loaded.

Styles syntax

The basic syntax includes selectors:{values}. The values may contain pseudo classes and pseudo elements.

The basic syntax:

new Simple({
   '.selector:pseudo::pseudo': {
      'property:pseudo::pseudo':'values !important'
   }
})

In case of property-whith-dash, you can use camelCase propertyWithDash instead dash.

Here is the example, how it may looks like:

new Simple({
   '.btn': {
      padding:'1rem .5rem',
      backgroundColor:'blue !important',
      'background-color:hover':'lightblue',
      border:'1px solid black'
   }
})

Let's simplify the code above. We will use:

Templates which makes the syntax much shorter. The explanation about templates, will come later.
Also, let's use ! instead !important
And let's use :h instead :hover Here the shorter version of code above by using templates,! and short pseudo:

new Simple({
   '.btn': {p:'1rem,.5rem',bgc:'blue!','bgc:h':'lightblue',b:'1px,black,solid'}
})

But that's not all. Let's add some variables(will be exmplained later) and simply manipulate them. Also, some templates has default values like border(width='1px',color='black',style='solid'). So you can just leave it without values like b:''. More then that, simple.js defines templates with values as empty, so you can just add b if b's value didnt changed.

Here how it looks like:

new Simple({
   ':root':{$p:'1rem'},
   '.btn': {p:'$p,calc($p/2)',bgc:'$c(blue)!','bgc:h':'lightblue',b}
})
Simple.$('p','0.8rem')
Simple.$('c','red')

Let simplify more and use some JavaScript inside styles, so we can reuse padding in button with another colors.

let p = '$p,calc($p/2)'
new Simple({
   ':root':{$p:'1rem'},
   '.btn': {p,bgc:'$c(blue)!','bgc:h':'lightblue'}
   '.btn1': {p,bgc:'red','bgc:h':'lightred'}
})

The css code for code above will look like this:

:root {
    --p:1rem;
}
.btn {
    padding:var(--p) calc(var(--p)/2);
    background-color:var(--c,blue) !important;
}
.btn:hover {
    background-color:lightblue;
}
.btn1 {
    padding:var(--p) calc(var(--p)/2);
    background-color:red;
}
.btn1:hover {
    background-color:lightred;
}

Templates

Template is a function or value stored inside Simple.templates. Simple.css has built in functions and shorts that you can use as templates inside your code.

For example, instead {background-color:red} use {bgc:'red'}. And instead {border-right:'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 inside templates.md.

Variables and screenwidth variable

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)

Here is the example:

":root":{$w:'50px'}, // --width:50px
".some": {width:'$w'}, // width:var(--w)
".some1": {height:'$h(50px)'} // height:var(--h,50px)

Also, you can manage css variables 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.

Here is the example of usage:

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

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

Simple.css has option for screenwidth and screenHeight variable..

Simple.screenWidth()
Simple.screenHeight()
new Simple({
    '.box3':{box:'calc($screenwidth/3)',bgc:'lightblue'},
})

In example above .box3 element will always be with width and height of screenWidth/3.

Media, Keyframes, Supports

In case of media, keyframes and support, you have to define each media/keyframe/support styles as objects inside object. Here are examples:

new Simple({
   '@media only screen and (max-width: 600px)': {
      '.some': {color:'green', bgc:'red', 'bgc:h':'pruple'},
      '.some1': {color:'red', bgc:'blue', 'bgc:h':'lightblue'},
   },
   '@keyframes example': {
      '0%': {bgc:'red'},
      '50%': {bgc:'yellow'},
      '100%': {bgc:'red'},
   },
   '@supports (display: grid)': {
      div :{
         display: 'grid'
      }
   },
})

@font-face

In case of multiple font-faces, you need to give name to each font-face, like this (name 1 and 2):

let simple1 = new Simple({
   '@font-face 1' : {
      'font-family': 'Noto Sans Mono',
      'font-style': 'normal',
      'font-weight': '300',
      'font-stretch': '100%',
      'font-display': 'swap',
      src: "url(https://fonts.gstatic.com/s/notosansmono/v11/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_A1J09DdVXQQ.woff2) format('woff2');",
      'unicode-range': 'U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F'
    },
    /* cyrillic */
    '@font-face 2' : {
      'font-family': 'Noto Sans Mono',
      'font-style': 'normal',
      'font-weight': '300',
      'font-stretch': '100%',
      'font-display': 'swap',
      src: "url(https://fonts.gstatic.com/s/notosansmono/v11/BngrUXNETWXI6LwhGYvaxZikqZqK6fBq6kPvUce2oAZcdthSBUsYck4-_A1J09ndVXQQ.woff2) format('woff2');",
      'unicode-range': 'U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116'
    },
})

Don't worry, those names are deleted on publish process and converting to css. They needed only because Js, does not allow same keys inside object and rewrite the value if key is the same.

@charset

Simple.css does'nt need charset cause we using js. But you still can include it for converted css code. In this case you need to write @carset in the folowing way:

new Simple({
   '@charset "utf-8"':{},
})

Manage Objects and Stylesheets

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

Also, every Simple object, storing styles as object of styles and convert it to css styles into styleSheet. You can access it like this:

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

The styleSheet can be minifyed by setting Simple.minify=true or disable it with Simple.minify=false (by defult). You need to set minify before creating object like this:

Simple.minify = true
new Simple(styles)

In this case, all Simple objects styleSheet will be minified.

Front publish options

There are few options for publish styleSheet on fron end. Publish object:

obj.disable = true/false
obj.filter(minify)
obj.log()
obj.download(filename = 'styles.css',link=true)
obj.submit(name='simple',formId = 'form')

Publish objects

Simple.filterAll(minify,objects = Simple.objects)
Simple.logAll(objects = Simple.objects)
Simple.downloadAll(filename = 'styles.css',link=true,objects = Simple.objects)
Simple.submitAll(name='simple',formId = 'form',objects = Simple.objects)

Disable (setter)

You can enable and disable each simple object's stylesheet. It works like this:

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

Also, because every Simple object stored inside array Simple.objects you can access it even without setting a name to object. Here how it works:

new Simple(styles)
Simple.objects[0].disable = true
Simple.objects[0].disable = false

Filter and filterAll

You can filter styles for styleSheet with obj.filter(minify) or Simple.filterAll(minify,objects = Simple.objects).

Simple has option to check which styles where used in document and which has not and to return filtered stylesheet. Here how it works:

new Simple(styles)
.filter()
.log() // log the filtered stylesheet

Also, you can minify the styleSheet just by setting first parameter to true. Like this:

new Simple(simples).filter(true)

Simple.filterAll() filter styles to all Simple.objects. You can set which objects to filter by setting array of Simple objects to second parameter. Like this:

new Simple(styles1)
new Simple(styles2)
new Simple(styles3)

let simples = [Simple.objects[0],Simple.objects[1]]
Simple.filterAll(false,simples)

Log

You can console.log the styleSheet. This function is not just console.log(this.styleSheet. The function console.log filtered styles after content loaded if filteredStylesheet is not empty. Also, it always console.log the stylesheet only after content were loaded.

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

Donwload

To download the styleSheet you need to give name as first parameter and show/don't show the link on second parameter. If second parameter set to false, download will start automaticly after page has loaded. Also, you have downloadAll() method for downloading converted to css all Simple objects.

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

Sketch.downloadAll(filename = 'styles.css',link=true,objects = Simple.objects) // download all Simple.objects

You can filter and minify the stylesheet before download it with filter method. Here example:

new Simple(styles)
.filter()
.download('main.css',false) // download will start automaticly

Submit

Submit method creating hidden input with name(simple by default) you give and value as a stylesheet. This input gets form attribute with form id you give (form by default) and submits with this form as part of it. Here how it can be look like:

<script>
   new Simple(styles)
   .filter()
   .submit('simple','form')
</script>
<form action="test.php" method="post" id="form"><button type="submit">submit</button></form>

submitAll(name='simple',formId = 'form',objects = Simple.objects) creating concatenated styleSheet and put it as value in hidden input.

submitAll can be runed only on head section

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. The files can be in js or json format. In case of js files, the js file has to be with module.exports = {...styles}.

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. All elemetns with _ attribute can be used for simple.css styles and templates as attributes, like bgc="red" or background-color="red". Don't use camelCase in this case.

Here is the example.

inline simple css

<div _ box="50px" bgc="red" c="white">Hello </div>

the result:

<div _="" id="3bdf2i" style="
width: 50px; height: 50px; 
background-color: red; 
color: white;
">Hello </div>

Also, you can give the value to _ attribute as id of element from which you want to copy Simple styles. 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 !important; 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  !important; 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 !important; margin: 1rem; text-align: center;">Hello</div>
</div>

Change class and style

Simple.css 4.0 has two instrumetns which allows you to check if class/style are included and replace one style/class with another.

The syntax

Simple.class(selector,class1,class2)
Simple.style(selector,style1,style2)

The selector can be css selector or dom element.

Here examples how it works:

Simple.class('#test','some-class') // return true if class in classList
Simple.class('.test','some-class') // return array with true if class in classList by collection order
Simple.class('.test','some-class','') // remove the some-class if in classList or add if it's not
Simple.class('.test','class1','class2') // replace class1 with class2 or class2 with class1

Simple.style('#test','color:red') // return true if style in style.cssText
Simple.style('.test','color:red') // return array with true if style in style.cssText by collection order
Simple.style('.test','color:red','') // remove color:red if in style.cssText or add if it's not
Simple.style('.test','color:red','color:blue') // replace color:red with color:blue or color:blue with color:red