SML: Stylish Markup Language

Contact Example

SML

article.h-card {
	header.s-profile {
		span.s-photo {
			img.u-photo::alt("Profile") { "profile.jpg" }
		}
		h1.p-name {
			span.p-given-name { "Jonathan" }
			span.p-family-name { "Neal" }
		}
		subline.s-role {
			span.p-role { "Markup Lover" }
		}
	}
}

HTML beautified

<article class="h-card">
	<header class="s-profile">
		<span class="s-photo">
			<img class="u-photo" src="profile.jpg" alt="Profile">
		</span>
		<h1 class="p-name">
			<span class="p-given-name">Jonathan</span>
			<span class="p-family-name">Neal</span>
		</h1>
		<subline class="s-role">
			<span class="p-role">Markup Lover</span>
		</subline>
	</header>
</article>

Navigation Example

JSON navigation

{
	"children": [{
		"label": "Home",
		"href": "/home"
	}, {
		"label": "About",
		"href": "/about"
	}, {
		"label": "Clients",
		"href": "/clients",
		"children": [{
			"label": "Lorem",
			"href": "/clients/lorem"
		}, {
			"label": "Ipsum",
			"href": "/clients/ipsum"
		}]
	}, {
		"label": "Contact Us",
		"href": "/contact-us"
	}]
}

PHP

<?php function navigation ($navigation) {
	print ('<ul'.($navigation->parent ? ' class="child-menu"' : '').'>');

	foreach ($navigation->children as $item) {
		print ('<li>');
		print ('<a href="'.$item->href.'"'.($item->active ? ' class="active"' : '').'>'.$item->label.'</a>');

		if ($item->children) {
			$item->parent = $navigation;

			navigation ($item);
		}

		print ('</li>');
	}

	print ('</ul>');
} ?>

<nav>
	<?php navigation ($navigation); ?>
</nav>

SML

nav {
	ul:if(@navigation.parent):then(.child-menu):each(@navigation.children as @item) {
		li {
			a:link(@item.href):if(@item.active):then(.selected) {
				@item.label
			}

			if(@item.children) {
				goto(ul, @item.parent = @navigation, @navigation = @item)
			}
		}
	}
}

HTML beautified

<nav>
	<ul>
		<li>
			<a href="/home">Home</a>
		</li>
		<li>
			<a href="/about">About</a>
		</li>
		<li>
			<a href="/clients">Clients</a>

			<ul class="child-menu">
				<li>
					<a href="/clients/lorem">Lorem</a>
				</li>
				<li>
					<a href="/clients/ipsum">Ipsum</a>
				</li>
			</ul>
		</li>
		<li>
			<a href="/contact-us">Contact Us</a>
		</li>
	</ul>
</nav>