Skip to content

Home

Jump to bottom
spreeuwers edited this page Aug 20, 2016 · 23 revisions

Welcome to my xcss wiki!

XCSS is a simple framework for building WebApps. By adding more power to css rules, routing and styling for an SPA become easier. Just add the xcss.js script to the head of your html page and add a stylesheet file.

<head>
    <script src="xcss.js"></script>
    <link rel="stylesheet" href="mystyle.css">
</head>

The XCSS parses css files in the origin domain and adds functionality for extending and applying styles and adding events and routes.

You can for example write:

.RedBox {
   background-color:red;
   border:1px solid black 
}

.RedHelloBox EXTENDS .RedBox {
  content:'Hello world';
}

This will add a style rule at runtime with selector .RedHelloBox. The properties of .RedBox and .RedHellobox will be merged to create the extended rule.

XCSS also allows you to set a content for any selector. Normally this property is only effective with the before or after pseudo selector, bur XCSS will detect and load the text or template into the innerHTML or value of the selected tags.

For routing you can for example write:

button ONCLICK btnClicked[id] {
}

#MyDiv WHEN btnClicked[id] {
  content:"`clicked on: ${state.id}`";
  /* within double quote a js templatestring */
}

For using css frameworks like bootstrap the APPLIES keyword is added. The use of applies can shorten the needed html for bootstrap pages. For example:

<div class="row">
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
 <div class="col-md-1">.col-md-1</div>
</div>

Can be written as:

 <div class="row">
  <div>.col-md-1</div>
  <div>.col-md-1</div>
  <div>.col-md-1</div>
 </div>

and a css rule:

  div.row>div APPLIES col-md-1 {}

This will add the class col-md-1 to all div children of all elements selected by div.row

  • Examples ** nesting1

Clone this wiki locally