https://github.com/kriszyp/jss

JSON Stylesheets
https://github.com/kriszyp/jss

Last synced: 20 days ago
JSON representation

JSON Stylesheets

• Host: GitHub
• URL: https://github.com/kriszyp/jss
• Owner: kriszyp
• Created: 2011-02-05T14:48:06.000Z (almost 14 years ago)
• Default Branch: master
• Last Pushed: 2011-02-07T19:15:52.000Z (almost 14 years ago)
• Last Synced: 2024-10-04T18:21:20.155Z (about 1 month ago)
• Language: JavaScript
• Homepage: http://dojotoolkit.org/
• Size: 93.8 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
This project is not complete, this is just a sketch right now

JSON Style Sheets

JSON Style Sheets (JSS) is a templating tool for rendering JSON/JavaScript data. JSS

is designed to provide a presentation layer as an extension to CSS, without incurring

the extra overhead and complexity of intermediate HTML generation. CSS is designed

to seperate the visual concerns from semantic data concerns of HTML. However,

with JSON templating, HTML often becomes completely abused, used as a semi-presentation

layer for the JSON data, muddying the separation of concerns and creating excessively 

complex relations and indirection between the data and the intended rendering. JSS 

extends CSS to provide the necessary facilities to render JSON with minimally sufficient 

embedded HTML layout information to properly present data, while still using standard

language syntax and semantics. All valid CSS is valid JSS, and most HTML is valid JSS 

as well.


data.json:

	{

	  "title": "Search for sedans",

	  "cars": [

	      {"make": "Honda", "model": "Accord"},

	      {"make": "Ford", "model": "Taurus"},

	    ]

	}

template.jss:

	

	/title {

		font-size: 24px;

	}

	/cars {

		border: 1px;

	}

	/cars/#/make {

		color: blue;

	};

To apply this template to the data:

	var templateString = loadTemplate();

	var compile = require("jss").compile;

	var template = compile(templateString);

	template.apply(targetDom);	

	

This would render the JSON with the given styles.

JSS allows for nested definitions as well:

	/cars {

		border: 1px;

		/make {

			color: blue;

		};

	}

Or even mixed with standards CSS selectors:

	.some-class {

		/title {

			font-size: 24px;

		}

		/cars {

			border: 1px;

		}

	}

However, when rendering JSON in application, we often need much more control over

the layout, we can utilize HTML directives to add information for layout and interpretation

of semantics directly within our style sheet (no need for a separate file). We can insert

HTML directly into JSS. We can also postpend HTML fragments with selector/rules to

define the styles for that element:

	
My App

	
 /title {

		font-size: 24px;

	}

	

	
 {

		border: 1px;

		
 /cars {

			/make {

				color: blue;

			}

		}

	}


We can also specify variables within the HTML:

	
 {

		border: 1px;

		
 /cars {

			/make {

				color: blue;

			}

		}

	}