style/index.html at master · jacksoncouse/style · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<!--[if lte IE 8]> <html class="no-js lt-ie9 breakpoint-desktop"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Example</title>

    <!--[if gt IE 8]><!-->
      <link rel="stylesheet" href="css/application.css" />
    <!--<![endif]-->

    <!--[if lte IE 8]>
      <link rel="stylesheet" href="css/application-lt-ie9.css" />
    <![endif]-->

    <!--
    metaquery (https://github.com/benschwarz/metaquery)
    You should minify & inline metaquery.js in production.
    -->
    <!--[if gt IE 8]><!-->
      <script src="bower_components/metaquery/metaquery.js"></script>
      <meta name="breakpoint" content="phone" media="(max-width: 568px)">
      <meta name="breakpoint" content="tablet" media="(min-width: 569px) and (max-width: 1024px)">
      <meta name="breakpoint" content="tablet-and-below" media="(max-width: 1024px)">
      <meta name="breakpoint" content="desktop" media="(min-width: 1025px)">
      <meta name="breakpoint" content="retina" media="only screen and (-webkit-min-device-pixel-ratio : 2)">
    <!--<![endif]-->

  </head>

  <body>
    <div id="this-is-some-full-width-container" style="background-color: beige;">
      <div class="grid">
        <div class="page">
          <div class="page__header">Header</div>
          <div class="page__sidebar">Sidebar</div>
          <div class="page__content">Content</div>
        </div>
      </div>
    </div>
  </body>
</html>