pilot-frame

Sweet Pug mixins

Usage no npm install needed!

<script type="module">
  import pilotFrame from 'https://cdn.skypack.dev/pilot-frame';
</script>

README

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>