❤
npm
Sign UpSign In

x-ejs

0.2.15 • Public • Published

x-ejs

A wrapper module of the ejs view engine for x-css.

Installation

Install using npm:

$ npm install x-ejs

Usage

Same ways to use the ejs view engine:

app.js:

var express = require('express');
var x-ejs = require('x-ejs');
 
var app = express();
var x = x-ejs({
    //any ejs options you want
});
 
app.engine('ejs', x.engine);
app.set('view engine', 'ejs');
 
app.get('/', function (req, res) {
    res.render('home');
});
 
app.listen(3000);

views/layouts/main.ejs:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>
 
    <h1>Example App: Home</h1>
 
</body>
</html>

What will happen?

You can see the <style></style> tag at the end of HTML when you right-click on your browser to see the page source code.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Example App</title>
</head>
<body>
 
 <h1>Example App: Home</h1>
 
<style></style>
</body>
</html>

Note: The style tag is inserted by x-ejs according to x-css rules. That is the x-ejs' mission.

x-css rules

size

syntax : property-abbr + size + [option] + [pseudo-abbr]

(w|h|mg|bd|pd|fn)[0-9]*(i|x|v|t|b|h|l|r)?(hv|fc|vt|ac|ck|af|bf)?

property-abbr

  • w : width
  • h : height
  • mg : margin
  • bd : border
  • pd : padding
  • fn : font

size

  • 0-9 : pixel value

option

  • i : minimum
  • x : maximum
  • v : vertical (means top and bottom position)
  • t : top
  • b : bottom
  • h : horizontal (also left and right position)
  • l : left
  • r : right

pseudo-abbr

  • hv : hovor
  • fc : focus
  • vt : visited
  • ac : active
  • ck : checked
  • af : after
  • bf : before

usage

w100 ==> .w100 { width:100px; }
h100 ==> .h100 { height:100px; }
w100i ==> .w100i { min-width:100px; }
w100x ==> .w100x { max-width:100px; }
mg10 ==> .mg10 { margin:10px; }
mg10t ==> .mg10t { margin-top:10px; }
mg10v ==> .mg10t { margin-top:10px; margin-bottom:10px; }
bd10r ==> .bd10r { border-right-style:solid; border-right-width:10px; }
bd10bhv ==> .bd10bhv:hover { border-bottom-style:solid; border-bottom-width:10px; }
pd10 ==> .pd10 { padding:10px; }

color

syntax : property-abbr + [option] + color-prefix + color-hex-code + [pseudo-abbr]

- (bd|fn|fg|bg)(v|t|b|h|l|r)?c[0-9a-f]{3}(hv|fc|vt|ac|ck|af|bf)?

property-abbr

  • bd : border
  • fn : font
  • fg : foreground
  • bg : background

option

  • i : minimum
  • x : maximum
  • v : vertical (means top and bottom position)
  • t : top
  • b : bottom
  • h : horizontal (also left and right position)
  • l : left
  • r : right

color

  • c[0-9a-f]{3} : color prefix and hex code

pseudo-abbr

  • hv : hovor
  • fc : focus
  • vt : visited
  • ac : active
  • ck : checked
  • af : after
  • bf : before

usage

fncfff ==> .fncfff { color:#fff; }
fgc000 ==> .fgc000 { color:#000; }
bgc777 ==> .bgc777 { background-color:#777; }
bdcfff ==> .bdcfff { border-color:#fff; }
bdtcfff ==> .bdtcfff { border-top-color:#fff; }

size and color

syntax : property-abbr + size + [option] + color + [pseudo-abbr]

- bd[0-9]+(v|t|b|h|l|r)?c[0-9a-f]{3}(hv|fc|vt|ac|ck|af|bf)?

usage

bd1tcfffhv ==> .bd1tcfffhv:hovor { border-top:1px solid #fff; }

License

MIT

Readme

Keywords

Package Sidebar

Install

npm i x-ejs

Weekly Downloads

2

Version

0.2.15

License

ISC

Last publish

Collaborators

  • nohsenc
Try on RunKit
Report malware