0.1.0 • Published 7 years ago
zigrid v0.1.0
Zigrid
Write JavaScript, make CSS.
Zigrid is a lightweight CSS rendering engine that allows you to use a native JavaScript syntax to render CSS stylesheets. Work in progress.
Installation
Using npm:
npm install --save zigridUse
Example Express application:
const express = require('express')
const app = express()
const path = require('path')
const zigrid = require('zigrid')
const publicDir = path.join(__dirname, 'public')
app.use(zigrid({ src: publicDir }))
app.use(express.static(publicDir))
app.get('/', (req, res) => {
res.send('<!DOCTYPE html><html><head><link href="css/style.zcss" rel="stylesheet"></head><body><div class="box"><h1>Hello world!</h1></div></body></html>')
})
app.listen(3000)In public/css/style.zcss:
const padding = 64
module.exports = [
$('html', () => {
$.padding = `${padding}px`
}),
$('.box', () => {
$.padding = `${padding / 2}px`
$.textAlign = 'center'
$.backgroundColor = 'pink'
$('h1', () => {
$.color = 'darkred'
$.fontSize = '48px'
})
})
]