Skip to content

Instantly share code, notes, and snippets.

View thatisuday's full-sized avatar

Uday Hiwarale thatisuday

605 followers · 2 following
View GitHub Profile
@thatisuday
thatisuday / inline-code.pug
Last active July 6, 2020 11:09
//- Pug.js allow writing inline JavaScript code.
//- Unbuffered JavaScript code does not output any results.
//- Unbuffered code must start with `-` hyphen.
- var fieldName = "username"
- var required = false
input(type="text", name=fieldName, required=required)
//- Pug.js also support block Unbuffered code.
-
@thatisuday
thatisuday / inline-code.html
Created March 22, 2018 19:19
<input type="text" name="username"/><a class="general link active" href="some-link"></a>
<p>Hello World! I am &lt;b&gt;Pug.js!&lt;/b&gt;</p>
<p>Hello World! I am <b>Pug.js!</b></p>
<p>I am male.</p>
<p><a class="link" href="some-link">Click to log in.</a></p>
<ul>
<li>current value is 0</li>
<li>current value is 1</li>
<li>current value is 2</li>
@thatisuday
thatisuday / includes.pug
Created March 22, 2018 19:34
//- Like PHP, we can include content of another file in a file.
//- If another file extension is `.pug`, then it's content will be compiled.
//- If another files is non-pug file, then it's content will be included as raw text.
//- If no file extenstion is given, `.pug` is automatically appended to the file name.
doctype html
html
head
title Includes Example
include includes/resources.pug
@thatisuday
thatisuday / resources.pug
Created March 22, 2018 19:36
//- located in includes folder
link(rel="stylesheet", href="http://website.com/style.css")
script(src="http://website.com/script.js")
@thatisuday
thatisuday / includes.html
Created March 22, 2018 19:37
<!DOCTYPE html>
<html>
<head>
<title>Includes Example</title>
<link rel="stylesheet" href="http://website.com/style.css">
<script src="http://website.com/script.js"></script>
<style>
/* located in includes folder */
@thatisuday
thatisuday / mixin.pug
Created March 22, 2018 20:00
//- Mixin is used to create reusable block of code.
//- Mixin is just a wrapper around proper Pug code.
//- Mixin can also be a function with arguments.
mixin notAllowed
p: b You are not allowed here
mixin user(data)
li
p.name= data.name
p.city= data.city
@thatisuday
thatisuday / mixin.html
Created March 22, 2018 20:00
<div class="critical-section">
<p>
<b>You are not allowed here</b>
</p>
</div>
<ul class="user-list">
<li>
<p class="name">Ross Geller</p>
<p class="city">New York</p>
</li>
@thatisuday
thatisuday / html-email-gulpfile.js
Created March 23, 2018 20:57
const gulp = require('gulp');
const pug = require('gulp-pug');
const sass = require('gulp-sass');
const replace = require('gulp-replace');
const inlineCss = require('gulp-inline-css');
const rename = require('gulp-rename');
const browserSync = require('browser-sync').create();
// browserSync base directory
// this will be the base directory of files for web preview
@thatisuday
thatisuday / html-email-temp-one.pug
Created March 23, 2018 20:59
doctype html
html
head
title One | Email template!
//- import css/scss stylesheets
//- these file names will be replace by gulp with proper css file paths
link(rel="stylesheet", href="../../sass/basic.scss")
link(rel="stylesheet", href="../../sass/one/styles.scss")
@thatisuday
thatisuday / html-email-temp-one.html
Created March 23, 2018 21:08
<!DOCTYPE html>
<html style="margin: 0; padding: 0;">
<head>
<title>One | Email template!</title>
</head>
<body style="margin: 0; padding: 0;">
<table class="table" cellpadding="0" cellspacing="0" style="background-color: #eee; empty-cells: hide; margin: 0 auto; padding: 0; width: 600px;">
<tr>