Extension

Introduction

After reading this tutorial on using SDP classes and styles, you will learn how to use simple syntax to write easy and fast web work. What it is? SDP - is a JS framework for generating css styles based on a simplified syntax that allows you to write the desired style very quickly and simply, and then apply it. Also, when rendering HTML code, it will seem that everything is written in pure css

<script type="text/javascript" src="https://cdn.yurba.one/static/sdp/1.2.2/main.js"></script>
Download extension What might an SDP look like?

Type of classes

Here we will describe all types of classes that can be used when writing code.

Identifier (or ID)
A class that stores information in the form of styles

Reduction (or Simple)
Style object abbreviation type

Immutable (or Eternal & Permanent) Identifier
A class type that stores mutable information (for example, like _vars, which stores variables), but cannot itself change under any circumstances

Templates
This class type is a style that you insert through the "=" sign. The style contains several CSS rules that are inserted when it is applied.

Example

Here will be examples of the use of classes and their application. All classes and etc. must be written in a special tag - <sdp>

Usage

$identifier(
    rule: property;
    rule: --tiny-property;
    =template
)

Example

$body(
    m: 0; //margin
    cw: --fill; //width: -webkit-fill-available
    =body-styles // This is a template that has styles in it
)

Usage in HTML

<body sdp-class="body">
    <h1>Content...</h1>
</body>

Vanilla CSS

body {
    margin: 0;
    width: -webkit-fill-available;
    color: black;
    background: white;
}

Classes

And now we will go through the theory by class, and we can learn how you can use variables or create animations

Creating

Let's create your first class with a variable!

_vars() usage

_vars(
    main-color: white;
    background-color: black;
)

WARNING!
Try not to use abbreviated css rule names for variable names, such as bg or cw.

NOTE
You can also use the formula 

{var1.var2.var3}
to quickly write multiple variables.

_vars() usage in classes

$class(
    color: {main-color};
    bg: {background-color}
)

Animations

Let's create your first animation!

@anim usage

@anim animation-name(
    0%{rule: property}
    100%{rule: property}
)

What should be in the class?

$animation(
    anim-name: ...;
    anim-duration: ...;
)

Adaptive layout

Let's take care of users with phones!

@media usage

@media screen and (max-width: 800px) [
    $someclass(
        cw: 500px;
        display: flex;
    )
]

Class functions

For your convenience, we also created functions directly in classes

include() - Inludes the contents of another class into your class (swapping patterns). Doesn't work for classes with selectors, only pure ones

$myclass(
    include(other_class);
)

generateRandom($int1, $int2) - Generates a random number. If no agument is specified, it is replaced by a predefined value - $int1: 0, $int2: 9999

$myclass(
    position: absolute;
    top: generateRandom();
)

generateHex() - Generates a random HEX color

$myclass(
    color: generateHex();
)

generateRgb() - Generates a random RGB color. Has 1 object argument: "a". It is written as "generateRgb(a: $value)". $value can be either a value from 0 to 1, or a percentage from 1 to 100. Sets the opacity of the generated color

$myclass(
    color: generateRgb();
)

toHex($rgbColor) - Converts RGB color to HEX

$myclass(
    color: toHex(255, 255, 255);
)

toRgb($hexColor) - Converts HEX color to RGB

$myclass(
    color: toRgb(#fff);
)

if($value ==│>│<│!=│===│ $value, $valueTrue, $valueFalse) - Conditional if() operator

$myclass(
    position: absolute;
    top: if(300 * 5 == 1500, {true}, {false});
)

replace($word, $replacement, $onReplace) - In the 1st argument replaces the value in the 2nd argument with the 3rd argument

$myclass(
    color: replace(#fffr, r) // #fff
)

round($int%│px│rem...) - Rounds the value and returns

$myclass(
    width: round(28px); // 30px
)

max()/min() - Accepts an array of numbers about returns the minimum/maximum value of all

$myclass(
    width: max(1, 19, 30); // 30
    height: max(1, 19, 30); // 1
)

lighten($hex, $brightness) - Takes a HEX color and turns it into a brighter version

$myclass(
    color: lighten(#hex, 50);
)

lighten($hex, $brightness) - Takes a HEX color and turns it into a darker version

$myclass(
    color: darken(#hex, 50);
)

Class includes

Again, to take care of your code, we have added inludes from other classes to other

@class.value - Use the "@class" operator and the optional "value" argument to inlude a value from the class

$myclass(
    bg: @someclass.background;
    color: @anotherclass.color;
)

Class selectors

Selectors are a way to pass styles to an element that doesn't have a class of any kind. Selectors can put styles on elements that have any attributes with any values. Moreover, classes that are created with the help of selectors don't exist as separate classes: they cannot be inluded or done with except for putting them for some selector, in short - classes in a selector are decorative and have a conditional role

Simple usage. For example, we don't want to put a class on the body element, but we want to style it somehow

$myclass::selector["body"](
    bg: white;
    f-f: "Arial";
)

The same application and works for attributes. We can easily put some attribute on an element in HTML and then select it with the selector and put the necessary styles on it. We can select a specific attribute to highlight, but we can also use "attr" to highlight any other attribute in an element. For example, using "id:myId" is a bit more optimistic and saves time searching for "id" with the value "myId", but there is also a general attribute search - "attr:myId". With "attr" you can search for all attributes that an element has

$myclass::selector["id:myId"](
    color: white;
)

or

$myclass::selector["attr:id=myId"](
    color: white;
)

Imports

As in vanilla CSS, you can easily include another css file, but we have made an include of the js, css and sdp files

Simple usage. If there is an extension (.js, .css or .sdp) at the end of the file to be modified, it will automatically detect the file type, but if not, you will have to specify the file type as the second argument of the operator

@import("https://example.com/css/someCssPath", "css")
@import("https://example.com/js/main.js")

Simplified selectors

We also made simplified selectors to help simplify the ::hover or ::active selectors

Usage in class. You must write the simplified selectors directly into the contents of the class, and then the selectors for that class will be created

$myClass(
    color: --red;
    &::hover(
        color: --blue;
    )
    &::active(
        color: --yellow;
    )
)

Templates

The SDP has templates, which are special objects that store information as classes, but their trick is that they can be called everywhere and infinitely. I probably don't need to explain what templates are in general

_templates syntax

_templates(
    =my_good_template[
        color: white;
        m: 0; 
        p: 0;
    ]
)

Now you can use it in classes!

$myclass(
    =my_good_template
)

Script

SDP has a scripting system that can help you create different scripts and even interact with external values, for example by creating different variables or functions outside the script. All the basic instructions are here

_script syntax

_script(
    CONDITION: FirstValue, SecondValue;
    CONDITION: FirstValue, "SecondValue";
    CONDITION: FirstValue, "First-in-value => SecondValue";
)

Live usage

_script(
    ADD: tag-body; // Tag 'body' created and added
    ADD-CONTENT: tag-body, "p => Hello!"; // Adds 'p' tag in 'body' tag with 'Hello!' text inside
    ADD-ATTR: tag-body, "id => body"; // Adds 'id' attribute to tag 'body' with a value 'body'
    REMOVE-CONTENT: id-body, "p => Hello!"; // Removes all elements 'p' with text 'Hello' in element with 'body' id
)

Scriptural variations

Scripting variables

{version} - Acutal version of your SDP

{version_underline} - Acutal version of your SDP, but instead of a dot it's a "_"

{version_dephys} - Acutal version of your SDP, but instead of a dot it's a "-"

{url} - Full url of current page

{domain} - Full domain name of page

{url_path} - Full url, but without "https" or "http" protocols

{port} - Port of domain

{protocol} - Domain protocol: http or https

{this} - Full url, but without "https" or "http" protocols

{url_path} - Return the command name with arguments

{title} - Page title

{os} - Returns the user operation system

{useragent} - Return the user agents (Like Mozilla or Chrome)


Special chars

&b - "("

&be - ")"

&fb - "{"

&fbe - "}"

&sb - "["

&sbe - "]"

&cl - ":"

&cr - "©"

&tm - "™"

&rtm - "®"

&st - "★"

&mltp - "×"

&uah - "₴"

&rub - "₽"

&byn - "Ў"

&dlr - "$"

&tl - "│"

&cm - ","


Scripting values

- Value
- Attributes
- Function
- Optional attributes

ADD $element-$name Add element on your page 

ADD: tag-body; ADD: meta-adaptive;

ADD-CONTENT $element-$name "$element => $value" Add content to your element 

ADD-CONTENT: tag-body, "p => Hello!";

REMOVE-CONTENT $element-$name Remove content from your element 

REMOVE-CONTENT: tag-body;

ADD-ATTR $element-$name "$attribute => $value" Adding attribute for your element 

ADD-ATTR: tag-body, "id => main-body";

REMOVE-ATTRIBUTE $element-$name Adding attribute for your element 

REMOVE-ATTRIBUTE: tag-body;

LINK[] [$type] $value $useHttps Adding an element that will inculcate content, depending on the type of 

LINK[SDP]: dev.yurba.one/ui?sdpver={version_underline}&from={url_path}, USE-HTTPS=true;

Types

CSS JS SDP

SAY[] [$type] $value Will display a message in the console, depending on the type 

SAY[DEFAULT]: Hello world! Thats a SDP {version}

Types

DEFAULT or NONE ERR WARN

FILE[] [$type] $value Same as LINK, but only works with internal files 

FILE[SDP]: /html.sdp;

Types

CSS JS SDP

PAGE[] [$type] $value Working with the current page 

PAGE[TITLE]: SDP {version} preview;

Types

TITLE

GET[] [$dataVariable] $url $isHttps, $isFile Working with GET requests (json) 

GET[data]: example.com, USE-HTTPS=true/false
GET[data]: /config.json, FILE=true/false
SAY[WARN]: {data.app.version}

INCLUDE-HTML $element $filename Include the html file into a html tag 

INCLUDE-HTML: body, /topnav.html

VAR [$variableName] $value Creates a script-local variable 

VAR[example_var]: Hello world!
SAY[WARN]: {example_var}

CREATE [$type] $creatureName $creatureValue Creates an object that can be used either outside the script or within it 

CREATE[CSS_VAR]: red, #f75246

Types

CSS_VAR

ARRAY [$arrayName] $values Creates a group (array) of objects of INT or STRING type with further optional use as variables 

ARRAY[arrayName]: value1, value2;
SAY[DEFAULT]: array[arrayName, value1];


Functions

calc $int +, *, -, / $int Just a math 

VAR[two_hundred]: calc[50 + 150] or calc[100 * 2]

getvars $variableName Returns all preset variables or only a specific one 

VAR[sdp_version]: SDP version is: getvars[version]

getcontent $element Returns all preset variables or only a specific one 

VAR[body_content]: getcontent[body]

replace $word $replacement $onWhatReplace Replaces the characters in the string 

VAR[loool_but_1ooo1]: replace[loool, l, 1]

getattr $element Returns the specific attribute value of an element 

VAR[body_id]: getattr[body, id]

user $type $configure Returns the specific attribute value of an element 

VAR[timezone]: user[timezone] // Europe/Kiev
VAR[current_year]: user[time, {year}] // 2023
TYPES gmt timezone country country_id country_domain country_code country_currency agent os browser language time $configure = {year}, {month}, {day}, {hours}, {minutes}, {seconds}, {ms}

page $type Working with the current page 

VAR[this_title]: page[title]
TYPES title ssl

trim $word $len Cuts the line to the specified value 

VAR[trimmed_helloworld]: trim[Hello world, 5] // Hello

rand $intfrom $intto Enables a random value from/to. If $from is empty, it defaults to 0. If $to is empty, it defaults to 9999999 

VAR[random]: rand[100, 1000]

smallChar $word Turns the string into a lower case 

VAR[example]: smallChar[{title}] // page title but all is "small characters"

bigChar $word Turns the string into a upper case 

VAR[example_2]: bigChar[{title}] // PAGE TITLE BUT ALL IS "BIG CHARACTERS"

int $number Converts input value $number to INT 

SAY[DEFAULT]: int[1]

mix $values $len Mixes all the arguments except the last one, the last one is the length of the mix 

SAY[DEFAULT]: mix[{someArray}, 10]

page $type Finds out information about the page 

SAY[DEFAULT]: page[title] page[ssl]

query $urlQuery Outputs the GET request value in the link. The example below was run on the https://localhost:8000/?user=1 page 

SAY[DEFAULT]: query[user]

cookie $cookieName $cookieValue Cookie management functions 

MODULE[get_user_cookie]: cookie[$cookieName]
MODULE[set_user_cookie]: cookie.set[$cookieName, $cookieValue]
MODULE[remove_user_cookie]: cookie.remove[$cookieName]

torgb $rgbValue Converts HEX to RGB 

SAY[DEFAULT]: torgb[#fff]

tohex $hexValue Converts RGB to HEX 

SAY[DEFAULT]: tohex[255, 255, 255]

array $arrayName $arrayKey Function for easy work with internal arrays. $arrayKey can also be a number instead of a key name 

SAY[DEFAULT]: array[$arrayName, $arrayKey]

max $int, $int, $int... Returns the largest number listed in the arguments 

SAY[DEFAULT]: max[5, 10, 15, 20]; // 20

min $int, $int, $int... Returns the smallest number listed in the arguments 

SAY[DEFAULT]: min[5, 10, 15, 20]; // 5

convert $value $unit Conveys a value into a unit 

SAY[DEFAULT]: convert[9s, ms]; // 9000
UNITS Time: s => ms Measuring: px => rem

if $value ==│>│<│!=│===│ $value $true $false The usual if statement 

SAY[DEFAULT]: if[{userOS} == Win, User OS is Win, User OS in not Win]

isUrl $url Returns true if the link 

SAY[DEFAULT]: isUrl[example.com]

isNumber $int Returns true if the number 

SAY[DEFAULT]: isNumber[9999]

isString $string Returns true if the string 

SAY[DEFAULT]: isString[Hello world!]

regExp $string $regExp Checks the regex in the string (argument 1) and returns true if the regex value is in the string 

SAY[DEFAULT]: regExp[I love mars, /mars/g]

htmlExists $querySelector Returns true if the item exists on the page 

SAY[DEFAULT]: htmlExists[body]

base64 $string/$base64 Converts the string to base64 or deconverts it 

SAY[DEFAULT]: base64[Hello world!]; // SGVsbG8gd29ybGQh
SAY[DEFAULT]: base64[SGVsbG8gd29ybGQh]; // Hello world!

isMd5 $md5 Checks if the string is an encoded MD5 

SAY[DEFAULT]: isMd5[86fb269d190d2c85f6e0468ceca42a20]; // true

isBase64 $base64 Checks if the string is an encoded base64 

SAY[DEFAULT]: isBase64[SGVsbG8gd29ybGQh]; // true


You have learned how to create classes and variables. Now it's time to learn all the shorthand style objects. You can use normal styles too, but what's the point?

Shorthand style objects

You don't have to learn everything, you can just learn the most important ones for you.

Shorthands

m (-l, -b, -r, -t) - margin

p (-l, -b, -r, -t) - padding

b (l, u, r, t) - border

b-r - border-radius

bg (-pos, -pos-x, -pos-y, -image, -color) - background

img-rend - image-rendering

cw - width (content-width)

ch - height (content-height)

f-f - font-family

f-w - font-weight

tf - transform

ds - display

str (-width, -color) - stroke

pos - position

anim-name - animation name

anim-duration - animation duration

anim-delay - animation delay

anim-count - animation iteration count

anim-direction - animation direction

anim-func - animation timing function

anim-fill - animation fill mode

anim - animation

t-a - text-align

t-s - text-shadow

t-d - text-decoration

t-of - text-overflow

t-rend - text-rendering

inner - content

l-h - line-height

trans - transition

f-size - font-size

f-style - font-style

z-i - z-index

bd-f - backdrop-filter


Shorthand properties

--fill - -webkit-fill-available

--fit - fit-content

Shorthand styles

--default-bs - box-shadow: #00000050 0px 0px 10px 0px

--tiny-bs - box-shadow: #00000050 0px 0px 5px 0px

--big-bs - box-shadow: #00000060 0px 0px 15px 0px

--default-ts - text-shadow: #00000050 0px 0px 10px

--tiny-ts - text-shadow: #00000050 0px 0px 5px

--big-ts - text-shadow: #00000060 0px 0px 15px

--rounded-1 - border-radius: 5px

--rounded-2 - border-radius: 10px

--rounded-3 - border-radius: 20px

--rounded-4 - border-radius: 50px

--rounded-5 - border-radius: 100px

--rounded-100 - border-radius: 100%

--zero-padding - margin: 0!important;padding: 0!important

--content-scroll-y - overflow: hidden;overflow-y: scroll

--content-scroll-x - overflow: hidden;overflow-x: scroll

--gray - #adadad

--dark - #0a0a0a

--darker - #080808

--blue - #4444fd

--green - #35cf35

--yellow - #d5d53f

--orange - #e5a93a

--red - #ff4545

--purple - #942af5

--pink - #f33ea2

--aqua - #2fc8e1


Templates

=display-center - display: flex;justify-content: center;

=display-col - display: flex;flex-direction: column;

=display-row - display: flex;flex-direction: row;

=animation-blink - Too long styles. Just makes a blink animation

=animation-shake - Too long styles. Just makes a shake animation

=display-full-center - display: flex;justify-content: center;height: 100%;align-items: center;flex-direction: column;