Style Design Platform

SDP - is a language to simplify CSS syntax for working with styles. SDP not only simplifies the syntax, it also makes your code easier: you can create templates (_templates(...)) or variables (_vars(...)) and make your code technically easier.

Download or embed the JS File
Download the VSCode Extension

With SDP, you can easily learn how to write code quickly by using handy code highlighting and snippets to help you navigate and simplify your coding. Read documantation...

Usage

- Vars
_vars(main-color: white;) $classname(color: {main-color})
- Templates
_templates(=example(color: white; m: 0; p: 0;) $classname(=example)
- Classes
$just_like_this(color: white; p: 0;) - Learn more about reduced style options
Also, you can add selectors that work like querySelector() in JS:
$classname::selector["p"](...) - This selector will select the class that has the elements p.
$classname::selector["~p"](...) - This selector will only select p elements that contain the classname class.
You can just as easily create hover effects by adding the ::hover class:
$classname(color: white;) $classname::hover(color: green;)
- Imports Import CSS file: @css("...")
Import SDP file: @import("...") or @connect("...")
Or with link tag: <link rel="sdp" href="yourfile.sdp">
- Scripting
_script(ADD: meta-adaptive) - Adds a meta tag to adapt the page to other devices

Lets show!

Webtest: https://dev.yurba.me/cl/sdp/webtest/

Thats a default CSS syntax:

Thats a default SDP syntax:

TODO:
- Add local variables