UI

Boilerplate
Snippets
CSS

Boilerplate

XXX

<!DOCTYPE html>
<html lang="XXX">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="format-detection" content="telephone=no">
<title>XXX</title>
<meta name="description" content="XXX">
<style>
html {-webkit-text-size-adjust:100%;}
</style>
</head>
<body>
<script></script>
</body>
</html>

Snippets

General rules

Postel's law or robustness principle: "be conservative in what you send, be liberal in what you accept".

Design rules

Lower letter spacing and line height with larger text. Raise them with smaller text.
Simple element over complex background or complex element over simple background.

CSS Debugging

{outline:1px solid red;}{outline:1px solid red;}

Form attributes: autocomplete and required

required Login: autocomplete="username" New password: autocomplete="new-password" and id="new-password" Current password: autocomplete="current-password" and id="current-password"

Input autofocus

<input autofocus />

Input validated length

minlength="3" & maxlength="4"

<label for="minmax-length"> minlength="3" & maxlength="4"</label>
<input id="minmax-length" minlength="3" maxlength="4" />

Input validated regex pattern

<form action="#">
<label for="input-pattern">pattern="[A-z]{2,4}"</label>
<input id="input-pattern" pattern="[A-Za-z]{2,4}">
<input type="submit" value="click submit">
</form>

Mobile input modes

inputmode="numeric"

<label for="mode-numeric">inputmode="numeric"</label>
<input id="mode-numeric" inputmode="numeric" />

inputmode="decimal"

<label for="mode-decimal">inputmode="decimal"</label>
<input id="mode-decimal" inputmode="decimal" />

inputmode="tel"

<label for="mode-tel">inputmode="tel"</label>
<input id="mode-tel" inputmode="tel" />

inputmode="email"

<label for="mode-email">inputmode="email"</label>
<input id="mode-email" inputmode="email" />

inputmode="url"

<label for="mode-url">inputmode="url"</label>
<input id="mode-url" inputmode="url" />

inputmode="search"

<label for="mode-search">inputmode="search"</label>
<input id="mode-search" inputmode="search" />

Mobile specific

make a selfie:

<label for="mobile-selfie">make a selfie:</label>
<input id="mobile-selfie" type="file" capture="user" accept="image/jpeg,image/png" />

autocapitalize="none"

<label for="autocapitalize-none">autocapitalize="none"</label>
<input id="autocapitalize-none" autocapitalize="none" />

Multiple inputs in dropdown

! bigger than a regular dropdown

select more than one:

<label for="multiple-select">select more than one:</label>
<select id="multiple-select" multiple>
<option value="1">option 1</option>
<option value="2">Option 2</option>
<option value="3">option 3</option>
<option value="4">Option 4</option>
<option value="5">option 5</option>
<option value="6">Option 6</option>
</select>

Multiple validated email inputs

multiple emails (comma separated):

<label for="multiple-email">multiple emails (comma separated):</label>
<input type="email" id="multiple-email" multiple />

Input autocomplete from a list

<form>
<datalist id="list-autocomplete">
<option value="-> option 1 <-">option 1</option>
<option value="Option 2" />
<option value="option 3" />
<option value="Option 4" />
<option value="option 5" />
<option value="Option 6" />
</datalist>
<label for="datalist-autocomplete">start typing the letter o:</label>
<input id="datalist-autocomplete" list="list-autocomplete" />
</form>

Custom download file name

download file<a href=".\test.txt" download="custom" >download file</a>