easyCss!

easyCss()

Add all functions and variables to the global scope.

easyCss()

CssSize(size, unit)

A constructor used in most functions in easyCss.

var size = new CssSize(30)
//size.measure => '30px'

addCssToSingleElement(el, css)

Add css to element. css is an object with your css rules, and el must be a DOM element.

var p = document.getElementById('p')
addCsstoSingleElement(p, {color:'red', 'background-color':'green'})

addCssByQuery(query, css)

Add css to all elements that match query.

addCssByQuery('body', {'background-color':'yellow'})
//Changes body's background color to yellow

grid() and flex()

grid(container, children, options)

• container: The grid container.
• children: This argument must be an Array of objects, with each object containg el, which is the element that is getting placed, row, which is the row the element is being placed in(zero-indexed), and column, which is the column the element is being placed in(zero-indexed). The object can have optional properties, which are rowspan, which is the amount of rows the element takes up, and columnspan, which is the amount of columns the element takes up.
• options: This argument is optional and is an object with they keys rowSizes and columnSizes. rowSizes is the sizes each row has. Use gridTempSize(size, unit, amount) as the value for this key. columnSizes is the sizes each column has. Use gridTempSize() for this key as well. You can also give cellSize, and if you do you should take out rowSizes and columnSizes. cellSize must be a CssSize object.

//Example above
easyCss()
var div = document.getElementById('gridsample')
grid(div, [
  {
    el:div.children[0],
    row:0,
    column:0,
    rowspan:2
  },
  {
    el:div.children[1],
    row:0,
    column:1
  },
  {
    el:div.children[2],
    row:1,
    column:1
  }
], {
  cellSize:new CssSize(100)
})

flex(container, children, options)

• container: The flex container.
• children: An Array of objects, each containing these optional properties:
  • order: The order the flex items need to be in(not zero-indexed).
  • grow: How large the flex item is compared to the others.
  • shrink: How small the flex item is compared to the others.
  • length: The initial length of the flex item. Must be a CssSize object.
• options: An optional object containing these properties:
  • direction: Either row, column, row-reverse or column-reverse.
  • wrap: Either wrap or nowrap
  • justify: Either middle, start, end, around or between.
  • itemAlign: Either middle, top, bottom, stretch, baseline, around or between.
  • contentAlign: Either middle, top, bottom, stretch, baseline, around or between.

var div = document.getElementById('flexsample')
flex(div, [
  {
    el:div.children[0],
    order:2,
    grow:5
  },
  {
    el:div.children[1],
    order:3,
    grow:1,
    length:new CssSize(50)
  },
  {
    el:div.children[2],
    order:1,
    grow:3
  }
], {
  direction:'column'
})

Others

place(el, x, y)

el is a valid html element, and x and y are valid CssSize objects.

var p = document.getElementById('p')
place(0, new CssSize(30), new CssSize(30))
// p would be placed at x: 30px, and y: 30px

Download

Download, or add this line of code in your html file

<script src="https://js-extras.shivankchhaya.repl.co/easyCss/easyCss.js"></script>