Get Started

Introduction

Welcome! Get started with Hydrogen and build web pages in no time. We provide the pre made components to speed up your process. You just need to add our stylesheet to you HTML page and copy-paste the HTML code given and customize your content.

Quick Start

Copy-paste the stylesheet <link> into your <head> element before all other stylesheets to load our CSS.


                    
    
      
        
  
    
    

        


  


  
        
          
            <link rel="stylesheet" href="https://hydrogen-ui.netlify.app/style.css" />
        
  



    

  


      
      
        view raw
        
          index.html
        
        hosted with ❤ by GitHub

Starter Template

The following starter template uses the latest development standards. It used HTML5 doctype and also viewport metatag. Putting it all together the page will look like...


                    
    
      
        
  
    
    

        


  


  
        
          
          <!DOCTYPE html>
        
        
          
          <html lang="en">
        
        
          
          <head>
        
        
          
              <!--   required metatags -->
        
        
          
              <meta charset="UTF-8">
        
        
          
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
        
        
          
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        
          
          

        
        
          
              <!-- Hydrogen Stylesheet -->
        
        
          
               <link rel="stylesheet" href="https://hydrogen-ui.netlify.app/style.css" />
        
        
          
          

        
        
          
              <title>Your Awesome Title</title>
        
        
          
          </head>
        
        
          
          <body>
        
        
          
            <h1>Your Awesome Heading</h1>
        
        
          
          </body>
        
        
          
          </html>
        
  



    

  


      
      
        view raw
        
          index.html
        
        hosted with ❤ by GitHub

Alert

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- required metatags -->
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<!-- Hydrogen Stylesheet -->
	<link rel="stylesheet" href="https://hydrogen-ui.netlify.app/style.css" />

	<title>Your Awesome Title</title>
	</head>
	<body>
	<h1>Your Awesome Heading</h1>
	</body>
	</html>