Structured Style Markup

Structured Style Markup (SSM) is an SQL-like language used by Bundlrs for page styling. You can create an SSM block using the "ssm" tag. SSM is a very verbose language designed to make paste styling and management as easy as possible.

Guide

Basics

            
1
ssm#...#

In SSM, you can declare a member (selector alias) using the MEMBER keyword.

            
1 2
ssm#USE ssm 1.0 MEMBER p NAMED paragraphs#

This block shown above creates a member named "paragraphs" that selects the HTML p element. All CSS selectors work in place of p.

You can edit the styles of a member using SET ... TO ... FOR. Note this also accepts plain CSS selectors, meaning members aren't required.

            
1 2 3 4 5 6
ssm#USE ssm 1.0 MEMBER p NAMED paragraphs @ with member SET background TO red FOR paragraphs @ without member SET background TO red FOR p#

The @ symbol is used to denote a comment. All information on this line will be ignored by the parser.

Animations

You can create animations by declaring a name at the beginning of an SSM block.

            
1 2
ssm#USE ssm 1.0 USE ssm::anim animname#

You can use SET ... TO ... AT to declare a style at a specific stage in the animation:

            
1 2 3 4
ssm#USE ssm 1.0 USE ssm::anim animname SET background TO red AT 0% SET background TO green AT 100%#

Media Query

CSS media queries can be performed using WHEN at the beginning of a block.

            
1 2 3
ssm#USE ssm 1.0 WHEN max-width: 900px @ device must have a screen width less than 900px for any styles in this block to be applied#

Import/Export

You can mark your SSM as public with a USE statement:

            
1 2 3 4
ssm#USE ssm 1.0 USE ssm::public @ this SSM can be imported by any paste and they will inherit styles defined here! @ https://bundlrs.cc/api/ssm/{pastename}#

You can also import another paste's SSM contents with a USE statement:

            
1 2
ssm#USE ssm 1.0 USE https://bundlrs.cc/api/ssm/pub/ssm#

Importing another paste's SSM styles will inherit them in your paste, allowing you to share custom CSS components with other users. This paste exports a basic scrolling box component in its SSM source!

This box will scroll on overflow! Press "Edit" on this paste and scroll to the bottom to see its source.
Pub: 1705975776173 Edit: 1705976003741 Owner: hkau Views: 475

Stellular - Markdown Social