styleguide/index.html at master · DrupalizeMe/styleguide · 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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!doctype html>

<html lang="en">
  <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Drupalize.Me Style Guide</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
	      <meta name="application-name" content="Drupalize.Me"/>

        <link rel="stylesheet" href="css/style.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <script type="text/javascript" src="//use.typekit.net/syu0puk.js"></script>
        <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    </head>


<!-- body begins  -->
<body>
	<div class="container">
		<header class="banner">
    <img src="images/drupalizeme.svg" alt="Drupalize.Me">
		</header>
		<div class="intro">
      <h1>Drupalize.Me Style Guide</h1>
			<p>This guide is intended to aid in keeping our brand and website visually consistent as it grows and progresses. The more consistent and calculated we can be, the more professional and familier our brand will be. Drupalize.Me is a growing entity and therefore a brandguide is crucial in keeping our product on the right track. If there is anything unclear in this guide please bring it to the teams attention.</p>
       <img src="images/Style_Guide.svg" alt="Style Guide">
    </div>
    <div class="container_wrap_color">
  		<div class="color_pal">
  			<h1>Our Colors</h1>
  			<p>Below is our brand colors and some examples of shades.</p>
        <div class="colors">
          <ul>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="#137cc1" id="blue"><h3>$Blue</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="#fd7037" id="orange"><h3>$Orange</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="#ffd76d" id="gold"><h3>$Gold</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="#00be4c" id="green"><h3>$Green</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="#4d4d4f" id="charcoal"><h3>$Charcoal</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="#f5f5f5" id="silver"><h3>$Silver</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 10%" id="blue-shade"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 10%" id="orange-shade"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 10%" id="gold-shade"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 10%" id="green-shade"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 10%" id="charcoal-shade"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 20%" id="silver-shade"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 20%" id="blue-shade-two"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 20%" id="orange-shade-two"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 20%" id="gold-shade-two"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 20%" id="green-shade-two"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 20%" id="charcoal-shade-two"><h3>&nbsp;</h3></figure></li>
          <li class="block"><figure class="simptip-smooth simptip-position-top" data-tooltip="Darken 30%" id="silver-shade-two"><h3>&nbsp;</h3></figure></li>
        </ul>
        </div>
        <img src="images/Crayons.svg" alt="Style Guide">
      </div>
		</div>
		<div class="logo-usage">
			<h1>Logo Usage</h1>
			<p>Our logo is the face of our company and should always be used correctly regardless of the circumstance.</p>
        <div class="logo-stage">
          <div class="image-container">
            <img src="images/drupalizeme_main.svg" alt="Drupalize.Me">
          </div>
            <p>Whenever possible we should utilize our full color horizontal logo.</p>
          <div class="image-container">
            <img src="images/drupalizeme_all-white.svg" alt="Drupalize.Me">
          </div>
          <p>Our logo can be used reversed on our darker brand colors or black.</p>
          <div class="image-container">
          <img src="images/drupalizeme_grayscale.svg" alt="Drupalize.Me">
          </div>
          <p>Only when limited to do so our logo can be used in grayscale or all black.</p>
          <div class="image-container">
          <img src="images/drupalizeme_clearspace.svg" alt="Drupalize.Me">
          </div>
            <p>Regardless of which version of logo is in use the appropriate clear space should surround it.</p>
          <div class="image-container circle">
            <img src="images/CircleLogo.svg" alt="Drupalize.Me">
          </div>
            <p>We also have a circular logo that can be used for instaces where the horizontal format just doesn't work.
            <br><a class="action-link primary" href="https://github.com/DrupalizeMe/styleguide/tree/master/images">Download Our Logo Files</a>
            </p>


        </div>
      </div>
      <div class="container_wrap_typography">
          <div class="typography">
              <h1>Typography</h1>
              <p>Using our brand fonts are just as important as using the correct colors. Below is a breakdown of typefaces we use and some examples of usage.</p>
          </div>
          <div class="type-examples">
           <h1>Proxima Nova</h1>
           <p>Proxima Nova straddles the gap between typefaces like Futura and Akzidenz Grotesk. The result is a hybrid that combines modern proportions with a geometric appearance. In the last few years, Proxima Nova has become one of the most popular web fonts, in use on thousands of websites around the world.</p>
           <h1 class="serif">Chaparral Pro</h1>
           <p class="serif">Chaparral combines the legibility of slab serif designs popularized in the 19th century with the grace of 16th-century roman book lettering. The result is a versatile, hybrid slab-serif design, a unique addition to the Adobe Originals family of typefaces. Unlike “geometric” slab serif designs, Chaparral has varying letter proportions that give it an accessible and friendly appearance in all weights from light to bold. </p>
         </div>
      </div>
		</div>
  <!-- scripts -->
       <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="_js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
        <script src="js/plugins.js"></script>
        <script src="js/vendor/responsive-nav.js"></script>
        <script src="js/vendor/jquery.fitvids.js"></script>
        <script src="js/main.js"></script>
        <script>
  var navigation = responsiveNav("#menu", {
    insert: "after"
  });
</script>        <script>
  // Basic FitVids Test
  $(".player").fitVids();
</script>
</body>
</html>