Package Exports

als-simple-css
als-simple-css/simple.js

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 6.0

Tested. All should work.

Builded from scratch
New syntax
Event class not included
Tested on big css framework
Simplier and easier for understanding

About

Als-Simple-css is an Js class which make you work with css simpler and easier. You can use javaScript directly inside you css code.

Basics

Syntax:

<head>
   <script src="/node_modules/als-simple-css/simple.js"></script>
   <script>
   let styles = [
      {
         '.selector:pseudo':{propName:'prop-value',propName2:'prop-value},
         ':add-pseudo-to-selector':{propName:'$variable-name'},
      },
      {'@media (max-width:800px)':[
         '.some':{prop:'value'},
         ...
      ]},
      {'@keyframes test':[
         '0%':{prop:'value'},
         '100%':{prop:'value'},
      ]}
   ]
   new Simple(styles).publish()
   </script>
</head>

Example:

new Simple([
   '/* Some comment for this stylesheet. */',
   '@charset "utf-8"',
   {':root':{
      // $color = --color
      $color:'red'
   }},
   {'.test':{
      // regular property name - background-color
      'background-color':'$color' 
   }},
   {
      // camelCase property name - backgroundColor
      '.test1':{backgroundColor:'$color'}, 
      // template's property name - bgc for selector .test1:hover
      ':hover':{bgc:'blue'}, 
      // selector .test::focus (:f = :focus)
      ':f':{bgc:'blue'}, 
   }
])

camelCase for propName

You can use camelCase for property names. For example instead border-right-color, you can use borderRightColor. In this case you can use property names without quotes. Here example:

let styles = [
   {'.test':{
      border:'1px solid green',
      borderRightColor:'blue'
   }}
]

!important

By using ! in property value, you add !important. For example:

let styles = [
   {'.test':{color:'red'}},
   {'.test':{color:'green !'}},
]

Templates

There is simpler and shorter way to work with css properties and values by using template. There are 3 types of templates:

Template as short version for property name.
- For example {bgc:'red'} instead {background-color:'red'}
Template as object which includes {property:value}.
- For example {noscroll:''} instead {overflow:'hidden'}
Template as function which includes {fnName:'param,param,...'}.
- For example {linear:'180deg,red,blue'} instead {'background-image':`linear-gradient(180deg,red,blue)`}

The list of templates in the end of this file.

Variables

Each variable in Simple.css has to start with $. 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)

Example:

let styles = [
   {":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>

Media, Keyframes, Supports

In case of media, keyframes and support, you have to define each media/keyframe/support styles as array 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'}}
   ]},
])

Stylesheet

You can get the stylesheet with Simple.styleSheet. Also you can make it minified with Simple.minify=true before geting the stylesheet.

This stylesheet may be written as a css file with node.js. Here is an example:

let styles = [
   {'.test':{bgc:'red'}}
]

let Simple = require('als-simple-css')
Simple.minify = true
require('fs').writeFileSync('test.css',new Simple(styles).styleSheet,'utf-8')

shade and isDark

With Simple.shade you can get css color code for lighter or darker color.

Syntax: shade(hex, percent,opacity)

new Simple([
   {'.blue':{bgc:'#5F9EA0'}},
   {'.blue1':{bgc:Simple.shade('#5F9EA0',40)}}, // 40% lighter
   {'.blue2':{bgc:Simple.shade('#5F9EA0',-40)}}, // 40% darker
   {'.blue3':{bgc:Simple.shade('#5F9EA0',30,0.2)}}, // 30% lighter and 20% opacity 
])

With Simple.isDark you can check if hex rgb color is dark.

Here is example:

let textColor = 'black'
if(Simple.isDark('#080808')) textColor = 'white'

Inline

For using inline simple css, just run script Simple.inline(). Now you can add to each element _style attribute which may to contain templates and camelCase property names.

Example

<script>Simple.inline()</>
<div _style="bgc:red;c:white;border:1px solid green;">Hello</div>

Till dom content is not loaded, all elements with _style attribute will be invisible and will shown with spiner. On next step, all _style will be converted to style. It will take few miliseconds, so mostly you will not see the spiner at all.

List of Templates

Simple.templates = {
   bbox:{'box-sizing':'border-box'},
   a: 'animation',
//#region !Colors 
   bgc: 'background-color',
   c: 'color',
   linear: (params) => {return {'background-image':`linear-gradient(${params})`}}, 
   radial: (params) => {return {'background-image':`radial-gradient(${params})`}}, 
   rlinear: (params) => {return {'background-image':`repeating-linear-gradient(${params})`}}, 
   rradial: (params) => {return {'background-image':`repeating-radial-gradient(${params})`}}, 
//#endregion
//#region !Borders 
   b: 'border',
   br: 'border-right',
   bl: 'border-left',
   bt: 'border-top',
   bb: 'border-bottom',
   bc: 'border-color',
   brc: 'border-right-color',
   blc: 'border-left-color',
   btc: 'border-top-color',
   bbc: 'border-bottom-color',
   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',
   radius : 'border-radius',
//#endregion
//#region !Outline 
   o: 'outline',
   oc: 'outline-color',
   os: 'outline-style',
   ow: 'outline-width',
//#endregion
//#region !Sizes
   maxw: 'max-width',
   minw: 'min-width',
   h: 'height',
   w: 'width',
   maxh: 'max-height',
   minh: 'min-height',
   box: (size='100px') => {return {width:size,height:size}},
   rect: (params) => {
      params = params.split(' ')
      return {width:params[0],height:params[1]}
   },
//#endregion
//#region !Scroll and Resize!
   scroll: {overflow:'auto'},
   scrollx: (prop='auto') => {return {'overflow-x':prop}},
   scrolly: (prop='auto') => {return {'overflow-y':prop}},
   noscroll: {overflow:'hidden'},
   noscrollx: {'overflow-x':'hidden'},
   noscrolly: {'overflow-y':'hidden'},
   smooth: {'scroll-behavior':'smooth'},
   resizeh: {resize:'horizontal'},
   resizev: {resize:'vertical'},
//#endregion
//#region !Padding, !Margin
   p: 'padding',
   m: 'margin',
   pr: 'padding-right',
   pl: 'padding-left',
   pt: 'padding-top',
   pb: 'padding-bottom',

   mr: 'margin-right',
   ml: 'margin-left',
   mt: 'margin-top',
   mb: 'margin-bottom',
//#endregion
//#region !Display
   hide: {display:'none'},
   block: {display:'block'},
   inline: {display:'inline'},
   iblock: {display:'inline-block'},
   igrid: {display:'inline-grid'},
   d: 'display',
//#endregion
//#region !Flex
   colSize: 100,
   flex: (wrap='') => {
      let result = {display:'flex'}
      if(wrap == 'wrap') result['flex-wrap'] = 'wrap'
      else if(wrap == 'reverse') result['flex-wrap'] = 'wrap-reverse'
      return result
   },
   iflex: {display:'inline-flex'},
   col: (params) => {
      params = params.split(' ')
      let col = params[0]
      let grow = params[1]
      let size = col*this.templates.colSize+'px'
      let result = {width:size, maxWidth:'100%'}
      if(grow !== undefined) result['flexGrow'] = grow
      return result
   },
   frow: (r='') => {if(r !=='') r = '-reverse'; return {'flex-direction':`row${r}`}},
   fcol: (r='') => {if(r !=='') r = '-reverse'; return {'flex-direction':`column${r}`}},
   center: {'align-items':'center','justify-content':'center'},
   _directions: {
      left: 'flex-start',
      right: 'flex-end',
      center: 'center',
      top: 'flex-start',
      bottom: 'flex-end',
      center: 'center',
      b: 'space-between',
      a: 'space-around',
      e: 'space-evenly',
   },
   flexh: (direction) => {
      let dir = this.templates._directions[direction]
      if(dir == undefined) dir = direction
      return {'justify-content':dir}
   },
   flexv: (params) => {
      params = params.split(' ')
      let direction = params[0]
      let align = (params[1] == undefined) ? false : params[1]
      let dir = this.templates._directions[direction]
      if(dir == undefined) dir = direction
      if(align) return  {'align-content':dir,'align-items':this.templates._directions[align]}
      else return {'align-content':dir}
   },
//#endregion
//#region !Grid
   grid : {display:'grid'},
   gridbox: (mount) => {return {display:'grid','grid-template-columns':`repeat(${mount},minmax(${100/mount}%,auto))`}},
   gcols: 'grid-template-columns',
   grows: 'grid-template-rows',
   gacols: 'grid-auto-columns',
   garows: 'grid-auto-rows',
   areas: 'grid-template-areas',
   area: 'grid-area',
//#endregion
//#region !text !font
   rtl: {'direction':'rtl'},
   ltr: {'direction':'ltr'},
   uppercase: {'text-transform':'uppercase'},
   lowercase: {'text-transform':'lowercase'},
   capitalize: {'text-transform':'capitalize'},
   tcenter: {'text-align':'center'},
   tleft: {'text-align':'left'},
   tright: {'text-align':'right'},
   underline: {'text-decoration':'underline'},
   overline: {'text-decoration':'overline'},
   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':'break-word'},
   arial: {'font-family':'"Arial",sans-serif'},
   verdana: {'font-family':'"Verdana",sans-serif'},
   helvetica: {'font-family':'"Helvetica",sans-serif'},
   tahoma: {'font-family':'"Tahoma",sans-serif'},
   trebuchet: {'font-family':'"Trebuchet MS",sans-serif'},
   georgia: {'font-family':'"Georgia",sans-serif'},
   garamond: {'font-family':'"Garamond",sans-serif'},
   times: {'font-family':'"Times New Roman",sans-serif'},
   courier: {'font-family':'"Courier new",sans-serif'},
   brush: {'font-family':'Brush script mt'},
   bold: {'font-weight':'bold'},
   italic: {'font-style':'italic'},

   td : 'text-decoration',
   to: 'text-overflow',
   ta: 'text-align',
   ttransform: 'text-transform',
   dir: 'direction',
   ls: 'letter-spacing',
   lh: 'line-height',
   wb: 'word-break',
   ws: 'white-space',
   fv: 'font-variant',
   ts: 'font-size',
   ff: 'font-family',
   fw: 'font-weight',
   fs: 'font-style',
   f: 'font',
//#endregion
//#region Position
   static: {"position":"static"},
   relative:{position:'relative'},
   fixed:{position:'fixed'},
   absolute:{position:'absolute'},
   sticky:{position:'sticky'},
   z: 'z-index',
//#endregion
//#region Transform
   matrix: (params) => {return {transform:`matrix(${params})`}},
   matrix3d: (params) => {return {transform:`matrix3d(${params})`}},
   translate: (params) => {return {transform:`translate(${params})`}},
   translate3d: (params) => {return {transform:`translate3d(${params})`}},
   translatex: (x) => {return {transform:`translatex(${x})`}},
   translatey: (y) => {return {transform:`translatey(${y})`}},
   translatez: (z) => {return {transform:`translatez(${z})`}},
   scale: (params) => {return {transform:`scale(${params})`}},
   scale3d: (params) => {return {transform:`scale3d(${params})`}},
   scalex: (x) => {return {transform:`scaleX(${x})`}},
   scaley: (y) => {return {transform:`scaleY(${y})`}},
   scalez: (z) => {return {transform:`scaleZ(${z})`}},
   rotate: (angle) => {return {transform:`rotate(${angle})`}},
   rotate3d: (params) => {return {transform:`rotate3d(${params})`}},
   rotatex: (angle) => {return {transform:`rotatex(${angle})`}},
   rotatey: (angle) => {return {transform:`rotatey(${angle})`}},
   rotatez: (angle) => {return {transform:`rotatez(${angle})`}},
   skew: (params) => {return {transform:`skew(${params})`}},
   skewx: (angle) => {return {transform:`skewx(${angle})`}},
   skewy: (angle) => {return {transform:`skewz(${angle})`}},
   perspective: (n) => {return {transform:`perspective(${n})`}},
//#endregion
//#region Cursor content
   pointer: {cursor:'pointer'},
   move: {cursor:'move'},
   hresize: {cursor:'ewResize'},
//#endregion
//#region Effects
   saturate: (param) => {return  {filter:`saturate(${param})`}},
   brightness: (param) => {return  {filter:`brightness(${param})`}},
   contrast: (param) => {return  {filter:`contrast(${param})`}},
   grayscale: (param) => {return  {filter:`grayscale(${param})`}},
   hue: (param) => {return  {filter:`hue-rotate(${param})`}},
   invert: (param) => {return  {filter:`invert(${param})`}},
   sepia: (param) => {return  {filter:`sepia(${param})`}},
   blur: (param) => {return  {filter:`blur(${param})`}},
//#endregion
}