Overview Basic Page Components

Setup and Dark Mode

Here you can find the documentation of Double use the side menu to explore all components

Install Double

To get started add the following style to your page 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/emanuelescarabattoli/double@0.0.2/dist/double.min.css" />

Basic template

To get started you can use the following template. Font Awesome is optional: if you don't want to use icons you can ignore the link in the head. Don't forget to add tags for the title, metadata and icons to improve the user experience 

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/emanuelescarabattoli/double@0.0.2/dist/double.min.css" />
</head>
<body>
  <!--Your HTML code here-->
</body>
</html>

Dark mode

Double allow you to implement the dark mode in you site just by adding the class dark-mode in the main container of a page, just like the following example 

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="./assets/double.min.css" />
</head>
<body>
  <div class="dark-mode">
    <!--Your HTML code here-->
  </div>
</body>
</html>
Double