Skydev — Syntax Reference

// 00 — introduction

How it works

Every Skydev page is a .sd file. Each line is an element. Styles go inside [square brackets] right after the element. Layout is done by wrapping elements in { curly braces }.

home.sd

// This is a heading
# Hello World [text-size-40 bold text-color-111111]

// This is a paragraph
t Welcome to my website. [text-color-666666 text-size-18]

// This is a layout block
{
    : Click me [bg-111111 text-color-ffffff inner-12 round-8]
    ~ Learn more -> /about [border-1 inner-12 round-8 no-underline]
} [flex row gap-12]

✦

The golden rule: element keyword first, content second, [styles] last. That's the whole language.

// 01 — files

File structure

Each .sd file becomes a page. The filename is the URL path. home.sd is always the root /.

File	URL
`home.sd`	/ (root)
`about.sd`	/about
`contact.sd`	/contact
`blog-post.sd`	/blog-post

// 02 — comments

Comments

Lines starting with // are ignored by the parser. Use them to document your layout or leave notes.

example

// This line is a comment — it won't appear on your page
# My Page Title

// 03 — metadata

Metadata

Add a ---- block at the very top of any .sd file to set page metadata. This controls the browser tab title, search engine description, social sharing previews, favicon, and more. It never appears on the page itself.

frontmatter

----
title: My Page
description: A short description for search engines.
author: Your Name
lang: en
favicon: assets/favicon.svg
og-title: My Page
og-description: Shown when shared on WhatsApp, Twitter, LinkedIn.
og-image: assets/cover.svg
twitter-card: summary_large_image
canonical: https://mysite.com/page
----

what each field does

title          → <title> tag — browser tab + search result heading
description    → <meta name="description"> — search snippet
author         → <meta name="author">
lang           → <html lang=""> — page language (en, hi, fr…)
favicon        → <link rel="icon"> — browser tab icon
og-title       → Open Graph title — link preview on social media
og-description → Open Graph description — link preview text
og-image       → Open Graph image — thumbnail in link previews
twitter-card   → summary | summary_large_image
canonical      → canonical URL for SEO

// 04 — elements

Headings

Use #, ##, or ### for h1, h2, h3. Follow with a space, then your text, then optional styles.

headings

#   Big heading    [text-size-48 bold]
##  Medium heading [text-size-32]
### Small heading  [text-size-20 text-color-888888]

Text

Use t for paragraphs. A space after t is required.

text

t Regular paragraph text.

t Styled text. [text-size-18 text-color-555555 leading-32]

t Bold and italic text. [bold italic]

Buttons

Use : to create a <button> — for actions like form submits or JS interactions. For navigation, use ~ instead.

buttons

// Basic button
: Click me [bg-111111 text-color-ffffff inner-12 round-8]

// Button with hover effect
: Submit [bg-111111 text-color-ffffff inner-y-12 inner-x-24 round-8 hover-bg-333333 transition]

// Outline button
: Cancel [border-1 border-color-dddddd inner-y-12 inner-x-24 round-8 hover-bg-f5f5f5 transition]

!

: renders as <button> — it does not navigate. Use ~ for any link that goes to a page or URL.

Links

Use ~ for all navigation — internal pages, external URLs, and email. It renders as a styled <a> tag with full style support including hover and transitions.

links

// Internal link — navigates to /about page
~ About us -> /about

// External link — opens in new tab
~ Visit Skydev -> https://skydev.pichi.in

// Email link
~ Send us a message -> mailto:contact@shepherd.games

// Styled nav link — looks like a button
~ Home -> /home [bg-f5f5f5 text-color-555555 inner-8 round-6 no-underline hover-bg-eeeeee transition]

Syntax	Output
`~ Label -> /page`	Internal link — navigates within site
`~ Label -> https://...`	External link, opens in new tab
`~ Label -> mailto:...`	Email link

→

Navigation rule: Always use ~ for links and page navigation. Use : only for non-navigating actions like form submits. Add no-underline to remove the default link underline.

Images

Use > followed by a file path or URL. Styles work the same way as all other elements.

images

> photo.jpg [w-full round-12 shadow-16]

> https://example.com/hero.jpg [w-400 h-300 round-8]

Audio & Video

Use >> for audio and >>> for video. Both render with native browser controls automatically.

audio & video

// Audio player
>> podcast.mp3 [w-full]

// Video player
>>> demo.mp4 [w-full round-12]

// External URL works too
>>> https://example.com/video.mp4 [w-full h-400 round-12]

Symbol	Element
`>`	Image — `<img>`
`>>`	Audio player — `<audio controls>`
`>>>`	Video player — `<video controls>`

Lists

Start lines with - for unordered lists, or 1. for ordered lists. Consecutive lines are automatically grouped into a single list.

lists

// Unordered list
- Landing pages
- Portfolio sites
- Product pages
- Documentation

// Ordered list
1. Open a project folder
2. Edit home.sd
3. See it live instantly
4. Export when ready

✦

Auto-grouping: consecutive - lines become one <ul>. Any non-list line in between will end the list and start a new one.

Forms

Use _ for inputs, __ for textareas, and / for labels. Input type is set via the input-type-* style utility.

form elements

// Label
/ Your name [bold text-size-14]

// Text input (default type)
_ Enter your name [border-1 round-8 inner-12 w-full]

// Email input
_ name@email.com [input-type-email border-1 round-8 inner-12 w-full]

// Password input
_ Password [input-type-password border-1 round-8 inner-12 w-full]

// Checkbox and radio
_ [input-type-checkbox]
_ [input-type-radio]

// Textarea
__ Write your message here... [border-1 round-8 inner-12 w-full h-160]

Symbol	Element
`/`	Label — `<label>`
`_`	Input — `<input type="text">` (default)
`_ [input-type-email]`	`<input type="email">`
`_ [input-type-password]`	`<input type="password">`
`_ [input-type-number]`	`<input type="number">`
`_ [input-type-tel]`	`<input type="tel">` — phone number
`_ [input-type-url]`	`<input type="url">` — website URL
`_ [input-type-date]`	`<input type="date">` — date picker
`_ [input-type-time]`	`<input type="time">` — time picker
`_ [input-type-file]`	`<input type="file">` — file upload
`_ [input-type-range]`	`<input type="range">` — slider
`_ [input-type-color]`	`<input type="color">` — color picker
`_ [input-type-search]`	`<input type="search">` — search field
`_ [input-type-checkbox]`	`<input type="checkbox">`
`_ [input-type-radio]`	`<input type="radio">`
`__`	Textarea — `<textarea>`

→

input-type-* goes inside the [styles] box alongside your other utilities. It sets the HTML type attribute — it doesn't generate any CSS.

Dividers & Line Breaks

Use --- for a horizontal divider and -- for a line break.

dividers & breaks

// Horizontal rule (divider line)
---

// Line break (adds vertical space)
--

// Divider with custom style
--- [border-color-eeeeee outer-y-24]

Symbol	Output
`---`	Horizontal rule — `<hr>`
`--`	Line break — `<br>`

Blocks

Wrap any elements in { } to group them into a layout container. Styles on the closing } apply to the container.

blocks

// A flex row with two elements
{
    # My Logo [text-size-20 bold]
    : Sign in [border-1 inner-y-8 inner-x-16 round-6]
} [flex row justify-between items-center inner-x-40 inner-y-16]

// Nested blocks
{
    {
        # Left column
    }
    {
        # Right column
    }
} [flex row gap-32]

Table

Wrap rows inside { } and add [table] to the closing brace. Use h for a header row, plain comma-separated values for body rows. No h line means no header.

with header

{
    h Feature, Free, Pro
    Live Preview, ✓, ✓
    Custom Fonts, ✓, ✓
    Priority Support, ✗, ✓
} [table]

without header

{
    Alice, 28, Mumbai
    Bob, 32, Delhi
    Carol, 25, Bangalore
} [table]

Blockquote

Use a regular block with [blockquote] on the closing brace. Any elements inside work normally — text, headings, styling.

blockquote

{
    t Design is not just what it looks like. Design is how it works. [italic text-size-16 leading-28]
    t — Steve Jobs [text-size-13 bold text-color-888888 outer-t-8]
} [blockquote]

Combine with other utilities: [blockquote bg-f5f5f5 round-8 outer-y-24]

Accordion

Wrap child blocks in an outer block with [accordion]. Each child becomes a <details> element. Use s for the summary (clickable title) and any other elements for the body.

accordion

{
    {
        s What is Skydev?
        t A markup language for building websites without writing CSS.
    }
    {
        s Do I need to know HTML?
        t No. Skydev handles all the HTML and CSS for you.
    }
    {
        s Can I export my site?
        t Yes — export to static HTML ready for any host.
    }
} [accordion]

Modules

Modules let you write a piece of UI once and reuse it across every page — navbars, footers, banners, cookie bars, anything. They live in a modules/ subfolder and are referenced with @modules/name.

Creating a Module

Click + in the Modules panel to create a new module, or add a .sd file manually inside modules/. Write any Skydev content inside — it works exactly like a normal page.

file structure

my-project/
├── home.sd
├── about.sd
├── modules/
│   ├── navbar.sd
│   └── footer.sd
└── assets/

Using a Module

Add @modules/name on its own line wherever you want the module content to appear. The name is the filename without .sd.

home.sd

@modules/navbar

# Welcome

t This is the home page.

@modules/footer

about.sd

@modules/navbar

# About

t This is the about page.

@modules/footer

Example Module

modules/navbar.sd

{
    # MySite [text-size-18 bold]
    {
        : Home -> / [inner-8 round-6 hover-bg-f5f5f5 transition]
        : About -> /about [inner-8 round-6 hover-bg-f5f5f5 transition]
    } [flex row gap-4]
} [flex row items-center between inner-x-40 inner-y-16 border-b-1 sticky top-0 z-100]

Rules & Behaviour

Rule	Detail
`@modules/name`	Must be on its own line. Leading/trailing spaces are ignored.
Name = filename	`footer.sd` → `@modules/footer`. No path separators needed.
Reusable anywhere	Use the same module on as many pages as you like.
No nesting	A module cannot reference another module (max depth 1).
Frontmatter ignored	Any `----` metadata block inside a module is stripped before inlining.
Export-safe	On export, module content is fully inlined into each page. No `modules/` folder is included in the ZIP.

Custom Fonts

Download any font file (.ttf, .woff2, .otf, .woff) and upload it via the Assets panel. The font utility is automatically derived from the filename — lowercase, spaces become hyphens.

usage

// Upload roboto.woff2 → use font-roboto
# Hello World [font-roboto bold text-size-40]

// Upload Playfair Display.ttf → use font-playfair-display
t Body copy in Playfair [font-playfair-display]

// Apply to an entire section
{
    # All text here uses this font
    t Including this paragraph
} [font-roboto flex col gap-16]

filename → utility

roboto.woff2           →  font-roboto
Playfair Display.ttf   →  font-playfair-display
JetBrains Mono.woff2   →  font-jetbrains-mono
OpenSans-Regular.ttf   →  font-opensans-regular

// 05 — styles

Spacing

inner-* = padding. outer-* = margin. Add a direction (x, y, t, b, l, r) to target specific sides. Values are in px.

Syntax	CSS Output
`inner-20`	padding: 20px
`inner-x-20`	padding-left: 20px; padding-right: 20px
`inner-y-20`	padding-top: 20px; padding-bottom: 20px
`inner-t-20`	padding-top: 20px
`inner-b-20`	padding-bottom: 20px
`outer-20`	margin: 20px
`outer-t-32`	margin-top: 32px
`gap-16`	gap: 16px (between flex/grid children)
`gap-x-16`	column-gap: 16px
`gap-y-16`	row-gap: 16px

Sizing

Numbers are in px. Use full for 100%, screen for 100vw/100vh, or fractions like 1/2, 3/4.

Syntax	CSS Output
`w-200`	width: 200px
`w-full`	width: 100%
`w-1/2`	width: 50%
`h-screen`	height: 100vh
`min-w-300`	min-width: 300px
`max-w-800`	max-width: 800px
`min-h-full`	min-height: 100%

Typography

Size & Weight

text-size-16 bold semi-bold italic leading-28 tracking-2

Alignment & Case

text-left text-center text-right caps lowercase capitalize

Decoration

underline no-underline strikethrough truncate no-wrap break-word

Color

text-color-333333 text-color-red text-color-ff6b6b

Custom Font

font-roboto font-playfair font-jetbrains-mono

Upload a font file to assets/ — the utility name is the filename without extension, lowercased.

✦

Colors: use any CSS color name (red, blue) or a hex code without the # — just text-color-ff6b6b.

Colors

All color utilities accept CSS color names or hex codes without the #. These work anywhere a color is expected.

ff6b6b

4f9eff

3dd68c

ffb86c

bd93f9

f1fa8c

111111

ffffff

Utility	What it affects
`text-color-*`	Text color
`bg-*`	Background color
`border-color-*`	Border color
`shadow-color-*`	Box shadow color
`outline-color-*`	Outline color

Layout & Flex

Layout utilities go on { blocks }. Combine them to build any structure.

layout examples

// Horizontal row, centered, with gap
} [flex row items-center gap-20]

// Vertical stack
} [flex col gap-16]

// Space between left and right
} [flex row justify-between items-center]

// 3-column grid
} [grid grid-cols-3 gap-24]

// Perfectly centered (both axes)
} [center h-screen]

Utility	Description
`flex`	Enable flexbox
`grid`	Enable grid
`block`	display: block
`inline`	display: inline
`inline-flex`	display: inline-flex
`hidden`	display: none
`row`	flex-direction: row
`col`	flex-direction: column
`wrap`	flex-wrap: wrap
`nowrap`	flex-wrap: nowrap
`grow`	flex-grow: 1
`shrink`	flex-shrink: 1
`center`	Center both axes (shorthand)
`between`	justify-content: space-between
`justify-*`	justify-content (start, end, center, between, around, evenly)
`items-*`	align-items (start, end, center, baseline, stretch)
`self-*`	align-self (start, end, center, stretch)
`grid-cols-3`	grid-template-columns: repeat(3, 1fr)
`grid-rows-2`	grid-template-rows: repeat(2, 1fr)
`col-span-2`	grid-column: span 2
`col-span-full`	grid-column: 1 / -1 (full width)

Borders & Radius

Syntax	CSS Output
`border`	border: 1px solid #ddd
`border-2`	border-width: 2px; border-style: solid
`border-color-ff0000`	border-color: #ff0000
`border-t-1`	border-top: 1px solid
`border-b-1`	border-bottom: 1px solid
`round-8`	border-radius: 8px
`round-full`	border-radius: 9999px (pill shape)
`outline-color-blue`	outline-color: blue
`outline-width-2`	outline: 2px solid
`outline-none`	outline: none

Effects

Syntax	CSS Output
`shadow-12`	box-shadow: 0 4px 12px rgba(0,0,0,0.15)
`shadow-color-ff0000`	Shadow tinted with that color
`opacity-50`	opacity: 0.5
`blur-8`	filter: blur(8px)
`brightness-75`	filter: brightness(0.75)
`overflow-hidden`	overflow: hidden
`overflow-scroll`	overflow: scroll
`overflow-auto`	overflow: auto
`overflow-x-hidden`	overflow-x: hidden
`overflow-y-auto`	overflow-y: auto
`transition`	transition: all 0.3s ease
`transition-colors`	Transition color, bg, border only
`transition-transform`	Transition transform only
`transition-opacity`	Transition opacity only
`duration-200`	transition-duration: 200ms
`ease-in`	transition-timing-function: ease-in
`ease-out`	transition-timing-function: ease-out
`ease-in-out`	transition-timing-function: ease-in-out
`cursor-pointer`	cursor: pointer
`cursor-default`	cursor: default
`cursor-not-allowed`	cursor: not-allowed
`cursor-grab`	cursor: grab
`select-none`	user-select: none
`select-all`	user-select: all
`pointer-none`	pointer-events: none
`disabled`	opacity: 0.5; cursor: not-allowed

Position

Syntax	CSS Output
`relative`	position: relative
`absolute`	position: absolute
`fixed`	position: fixed
`sticky`	position: sticky
`top-0`	top: 0px
`top-20`	top: 20px
`left--10`	left: -10px (negative values use double dash)
`inset-0`	inset: 0 (all four sides)
`z-10`	z-index: 10

!

Negative values: use double dash — top--10 = top: -10px, translate-y--20 = translateY(-20px).

Transforms

Transform utilities combine automatically — use as many as you need on one element.

Syntax	CSS Output
`scale-110`	transform: scale(1.1)
`scale-90`	transform: scale(0.9)
`rotate-45`	transform: rotate(45deg)
`rotate--45`	transform: rotate(-45deg)
`translate-x-10`	transform: translateX(10px)
`translate-y--8`	transform: translateY(-8px)

combined transforms

// All three combine into one transform property
: Fancy button [scale-105 rotate-2 translate-y--4]

// 05 — interactivity

Hover & Focus

Prefix any utility with hover- or focus- to apply it only on that state. Works with every utility in the system.

state examples

// Button that changes bg and lifts on hover
: Hover me [bg-f0f0f0 inner-14 round-8 transition
           hover-bg-111111 hover-text-color-ffffff hover-scale-105]

// Input with focus outline
: Input field [border-1 border-color-dddddd round-8 inner-12
              focus-outline-color-4f9eff focus-outline-width-2]

// Card that grows shadow on hover
} [shadow-4 transition hover-shadow-20 hover-translate-y--3]

Responsive

Use mobile- (≤640px) or tablet- (≤1024px) to override any style at smaller screen sizes.

responsive example

// Desktop: 3-col grid. Tablet: 2-col. Mobile: 1-col.
} [grid grid-cols-3 gap-24
  tablet-grid-cols-2
  mobile-grid-cols-1]

// Smaller text on mobile
# Big Title [text-size-56 mobile-text-size-32]

// Stack horizontally on desktop, vertically on mobile
} [flex row gap-24 mobile-col]

Prefix	Breakpoint
`mobile-*`	Applies at screen width ≤ 640px
`tablet-*`	Applies at screen width ≤ 1024px

Navigation

Use ~ for all page navigation — internal paths, external URLs, and email. Add no-underline to remove the default underline when styling links as buttons.

navigation

// Internal — goes to /about (about.sd must exist)
~ About us -> /about [no-underline]

// Home page
~ Home -> /home [no-underline]

// Styled nav link — looks like a button
~ Contact -> /contact [bg-4f9eff text-color-ffffff inner-y-10 inner-x-20 round-8 no-underline]

// External — opens in new tab
~ Visit site -> https://example.com

// Email
~ Email us -> mailto:hello@example.com

// 06 — quick reference

Full Cheatsheet

Everything in one place.

all elements

#    Heading 1   [styles]
##   Heading 2   [styles]
###  Heading 3   [styles]
t    Text / para [styles]
s    Summary     [styles]  ← accordion title
:    Button      [styles] -> /page or https://  ← action (phase 2) or navigation
~    Link text   -> /page or https://... [styles]  // use ~ for all navigation
>    image.jpg   [styles]
>>   audio.mp3   [styles]
>>>  video.mp4   [styles]
-    List item
1.   Ordered item
h    Col1, Col2  ← table header row
     Val1, Val2  ← table body row
/    Label text  [styles]
_    Placeholder [input-type-text|email|password|number|tel|url|date|time|file|range|color|search|checkbox|radio]
__   Placeholder [styles]
---  horizontal rule
--   line break
{
    ...elements...
} [styles]
} [table]       ← table block
} [blockquote]  ← blockquote block
} [accordion]  ← accordion wrapper
// comment

all style categories

// Spacing
inner-20   inner-x-20  inner-y-20  inner-t-20  inner-b-20  inner-l-20  inner-r-20
outer-20   outer-x-20  outer-y-20  outer-t-20  outer-b-20
gap-16     gap-x-16    gap-y-16

// Sizing
w-200  w-full  w-1/2  w-screen   min-w-300   max-w-800
h-200  h-full  h-screen               min-h-300   max-h-600

// Typography
text-size-16   text-color-ff0000  leading-28   tracking-2
bold  semi-bold  italic  underline  no-underline  strikethrough  caps  lowercase  capitalize
text-left  text-center  text-right  truncate  no-wrap
font-roboto  font-playfair  ← custom font from assets/

// Background & Color
bg-ffffff   bg-opacity-50

// Borders
border  border-2  border-color-dddddd  border-style-dashed
border-t-1  border-b-1  border-l-1  border-r-1
round-8   round-full
outline-color-blue  outline-width-2  outline-none

// Effects
shadow-12   shadow-color-000000  opacity-80   blur-8   brightness-90
overflow-hidden  overflow-scroll  overflow-auto

// Layout
flex  grid  block  inline  hidden
row  col  wrap  nowrap  grow  shrink
center  between  justify-start  justify-end  justify-evenly
items-center  items-start  items-end  items-stretch
grid-cols-3  grid-rows-2  col-span-2

// Position
relative  absolute  fixed  sticky
top-0  right-0  bottom-0  left-0  inset-0  z-10

// Transforms
scale-105  rotate-45  translate-x-10  translate-y--4

// Transitions
transition  transition-colors  transition-transform  transition-opacity
duration-300  ease-in  ease-out  ease-in-out

// Interactivity
cursor-pointer  cursor-not-allowed  cursor-grab
select-none  pointer-none  disabled

// States (prefix ANY utility)
hover-bg-000000   hover-text-color-fff   hover-scale-105   hover-shadow-20
focus-outline-color-4f9eff   focus-border-color-blue
mobile-text-size-16   mobile-col   mobile-hidden
tablet-grid-cols-2   tablet-inner-x-20

Skydev Syntax

How it works

File structure

Comments

Metadata

Headings

Text

Buttons

Links

Images

Audio & Video

Lists

Forms

Dividers & Line Breaks

Blocks

Table

Blockquote

Accordion

Modules

Creating a Module

Using a Module

Example Module

Rules & Behaviour

Custom Fonts

Spacing

Sizing

Typography

Colors

Layout & Flex

Borders & Radius

Effects

Position

Transforms

Hover & Focus

Responsive

Navigation

Full Cheatsheet