Skip to content

nockbits/WebsiteSkeleton

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

WebsiteSkeleton

A simple website skeleton for quick web development. Download and start now!

1. Doctype and html declaration

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

2. Head and Meta information

<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>__Websit_Title__.</title>
<meta name="generator" content="1.0">
<meta name="author" content="__Website_Admin__">
<meta name="keywords" content="__Meta_Keywords_Set__(8 to 12 words)">
<meta name="description" content="__Meta_Description_Set__(15 to 25 words)">

<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1">
...
...
</head>

3. Using Open Fonts

<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="//fonts.googleapis.com/css?family=Raleway:400,300,600" rel="stylesheet" type="text/css">

OR

<link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>

4. CSS Files

<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="fonts/font-awesome/css/font-awesome.min.css"> [Optional]
[CDN: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">]
<link rel="stylesheet" href="js/sidr/stylesheets/jquery.sidr.dark.css"> [Optional]
<link rel="stylesheet" href="css/style.css"> [Custome Styling]

5. Favicon Generator

<!-- Favicon via http://iconifier.net/
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="shortcut icon" href="images/iconified/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="images/iconified/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="images/iconified/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/iconified/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/iconified/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/iconified/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/iconified/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/iconified/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/iconified/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/iconified/apple-touch-icon-180x180.png">

6. Include JS Files

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.sidr.min.js"></script> [Optional]

7. Body Part

<body>
  <!-- Primary Page Layout
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  
  <!-- Header Section
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <header class="container">
    <div class="row">
      <div class="four columns">[BRANDING LOGO]</div>
      <div class="eight columns">[MENU LINKS]</div>
    </div><!-- /row -->
  </header><!-- /header container -->
  
  <!-- Content Section
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <div class="container">
    <div class="row">
      <div class="tweleve columns">[CONTENT]</div>
    </div><!-- /row -->
    <div class="row">
      <div class="four columns">[BOX 1]</div>
      <div class="four columns">[BOX 2]</div>
      <div class="four columns">[BOX 3]</div>
    </div><!-- /row -->
  </div><!-- /container -->
  
  <!-- Footer Section
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  <footer class="container">
    <div class="row">
      <div class="six columns">Powered by &copy; __BRAND_NAME__</div>
      <div class="six columns">[FOOTER LINKS and SOCIAL MEDIA LINKS]</div>
    </div><!-- /row -->
  </footer><!-- /footer container -->
  
  <!-- End Document
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  
  <!-- Additional JS / Scripts 
  –––––––––––––––––––––––––––––––––––––––––––––––––– -->
  
</body>

About

A simple website skeleton for quick web development. Download and start now!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 2

  •  
  •  

Languages