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

            


            ssm#...#

            
                
            
        

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

            



            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.

            







            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.

            



            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:

            





            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.

            




            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:

            





            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:

            



            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!