HTML


FLEXBOX

Flexbox guide

Flexbox patterns


CSS GRID

gridbyexample


SNIPPETS

Template

<!DOCTYPE html>
<html lang="en">

<head>

  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="Content" />

  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="/path/to/favicon">

  <!-- CSS -->
  <link rel="stylesheet" type="text/css" href="./index.css">

  <!-- Open Sans -->
  <link href="https://fonts.googleapis.com/css?family=Varela"
   rel="stylesheet">

</head>

<body>

  <!-- google-analytics -->
  <!--#include file="/path/to/templates/stats.html" -->

  <!-- Footer-- >
  <!--#include file= "/path/to/templates/footer.html" -->

  <!-- cookie Law -->
  <!--#include file="/path/to/templates/cookieLaw.html" -->

</body>

</html>

HTML5 validation without submit

<form action="./exercise/v1/newUser" method="post">
    <input id="newUsername" type="text" name="username" 
    placeholder="username" required>
    <input id="addUser" class="but" type="submit" value="Send">
</form>
document.getElementById('addUser').addEventListener('click', addNewUser);

function addNewUser (ev) {
  ev.preventDefault();
  const f = document.getElementsByTagName('form')[0];
  if (f.checkValidity()) {
    const newUsername = document.getElementById('newUsername').value;
    const params = `username=${newUsername}`;
    makeAjaxRequest(addNewUserUrl, 'POST', params, null, function (data) {
      showUsersList(data);
    });
  } else {
    alert(document.getElementById('newUsername').validationMessage);
  }
}

Trigger button click on Enter key

<div>
  <input id="inputText" class="inputText" type="text" name="input">
  <span id="button" class="button">Button</span>
</div>
function init () {
  const button = document.getElementById('button');
  button.addEventListener('click', action);
  const input = document.getElementById('inputText');
  input.addEventListener('keyup', testEnter);
}

function testEnter (ev) {
  ev.preventDefault();
  if (ev.keyCode === 13) {
    document.getElementById('button').click();
  }
}