InTRePId 13

Title: CSS extension and Client-side templates

Author: Pedro Ferreira

Date: 15/05/2013

Target version: 1.2

Status: draft

Objectives

• Introduce a language that is more powerful than CSS, thus allowing us to better organize new stylesheet information and reduce the amount of replicated code;
• Introduce a client-side templating language, as a way of letting people create dynamic client-side interfaces with no need for "pre-generated" hidden HTML code and/or ugly giant jQuery "pseudo-template" chains;

Status quo

Stylesheet-wise, we are using plain CSS, most of which is concentrated in Default.css. With the introduction of a new CSS file structure (core.css, buttons.css, et al...), it would be nice to make sure this code remains organized and in the most modular structure possible. CSS poses a series of problems:

• It lacks inheritance features, thus making it harder (or practically impossible) to re-use code
• It lacks variables and other constructs, hence making it impossible to set global style parameters without having to employ a lot of automatic or even manual replacement work

Client-side templates are currently provided by underscore.js, but these are very primitive. underscore's templatinb language is extremely limited.

Description

Stylesheets

Language	Nesting	Mixins	Variables	Syntax	Pure Python implementation?	Requirements
SASS/SCSS	Yes	Yes	Yes	CSS superset or indented CSS-like	​ PySCSS (no SASS support)	Ruby or Python >= 2.5 (PySCSS)
LESS	Yes	Yes	Yes	CSS superset	Incomplete	Node.js
Stylus	Yes	Yes	Yes	Indented CSS-like	No	Python >= 2.5

JS Templating

System	Syntax	Feature set	Extensibility
Handlebars	Moustache-like	OK	High
twig.js	"Jinja-like"	Very complete	High

Links

• ​ SASS vs Stylus
• ​ LESS vs Sass vs?

Comments

Add comment

Your email or username: