pilot-frame
v5.0.1
Published
Sweet Pug mixins
Downloads
20
Maintainers
dustin-archiveReadme
Document
+html
+html<!DOCTYPE html>
<html lang='en-us'>
</html>+head
+head({
zoom: true,
color: '#000',
description: 'Description or something.',
keywords: 'keywords, or, something',
favicon: 'assets/favicon.png',
title: 'Title or something.'
})<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<meta name='theme-color' content='#000'>
<meta name='description' content='Description or something.'>
<meta name='keywords' content='keywords, or, something'>
<link rel='icon' href='assets/favicon.png'>
<title>A title or something.</title>
</head>+script
+script('path/to/script.js')<script src='path/to/script.js'></script>+style
+style('path/to/styles.css')<link rel='stylesheet' href='path/to/styles.css'>+image
+image('path/to/image.png')<img src='path/to/image.png'>Form
+input-text
+input-text(placeholder='hello')<input type='text' size='1' placeholder='hello'>SVG
+svg
- To ensure svg contents are not visible, place the mixin in the head.
head
+svg.
<symbol id='close' viewBox='0 0 16 16'>
<path stroke='#f00' stroke-width='2' d='M4 4l8 8m0-8l-8 8' stroke-linecap='round'/>
</symbol>
//- you may find it easier to include your symbols from an external file
//- include symbols/close.xml<head>
<svg xmlns='http://www.w3.org/2000/svg'>
<symbol id='close' viewBox='0 0 16 16'>
<path stroke='#f00' stroke-width='2' d='M4 4l8 8m0-8l-8 8' stroke-linecap='round'/>
</symbol>
</svg>
</head>+use
+use('symbol-id')<svg>
<use xlink:href='symbol-id'/>
</svg>Vue.js
+vue
+vue({ el: 'app', script: 'main.js' })
.foobar<body>
<div id='app' class='app'>
<div class='foobar'></div>
</div>
<script src='main.js'></script>
</body>+template
+template('template-id')
div This is a template!<script id='template-id' type='x/template'>
<div>This is a template!</div>
</script>WYSIWYG
+video
+video
source(src='path/to/video.mp4' type='video/mp4')<video width='auto' height='auto'>
<source src='path/to/video.mp4' type='video/mp4'>
</video>