-
Notifications
You must be signed in to change notification settings - Fork 0
/
docSass.html
171 lines (150 loc) · 8.95 KB
/
docSass.html
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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/heinz.min.css" rel="stylesheet">
<link href="css/prism.css" rel="stylesheet" />
<title>Heinz - Sass</title>
<link rel="apple-touch-icon" sizes="180x180" href="media/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="media/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="media/favicons/favicon-16x16.png">
<link rel="manifest" href="media/favicons/manifest.json">
<link rel="mask-icon" href="media/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
</head>
<body class="boxed">
<header class="head">
<nav class="menu boxed">
<div class="bar">
<a href="https://htw-mmp.github.io/heinz/" class="branding">
<img src="media/heinz_h.svg">
</a>
<a class="fork-link" target="_blank" href="https://github.com/HTW-MMP/heinz/"><img style="position: absolute; top: 0; right: 0; border: 0;z-index: 10001;" src="https://camo.githubusercontent.com/a6677b08c955af8400f44c6298f40e7d19cc5b2d/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_gray_6d6d6d.png"></a>
<span class="nav-toggle">
<div class="hamburger">toggle menu</div>
</span>
<ul>
<li><span class="nav-toggle"><div class="ex">close</div></span></li>
<li><a href="documentation.html">Documentation</a></li>
<li><span class="current">Sass</span></li>
</ul>
</div>
<div class="scrollspy-wrapper display-titles">
<div class="scrollbar"></div>
</div>
</nav>
</header>
<!-- main section has class grid, in the grid there are secions, if section needs background, add class box -->
<main class="main grid numbered">
<section class="box" data-section-title="Intro">
<p class="text-center">
<a href="downloads/heinz_sass.zip" class="btn">Download the Sass Version of Heinz</a>
</p>
<h1>Advanced Uses for Heinz</h1>
<p class="text-lead">Heinz was built using Sass which enables a lot of powerful customization options. This Page guides you through the process of adjusting the framework to your needs.</p>
<p>Heinz was built for modern browsers using modern tools. We personally really like working with the <a href="https://prepros.io/" target="_blank">Prepros Program</a> which offers a GUI for common command-line tools.</p>
<p>Heinz comes with a prepros file included, which will ensure that all compiling is done correctly and no tool is forgotten.</p>
<p>However, if you prefer working with other build-tools or just run the tasks manually, you are very welcome to do that. If you are at that stage of advanced you most probably won't need any help from us anyways. So why are you still reading? Go check our code directly.</p>
</section>
<section class="box" data-section-title="Sass">
<h1>Simple Adjustments with Sass</h1>
<p>All important settings that you might want to customize have been made using Sass Variables. There is a Settings Partial within the Sass folder which contains all of our settings. You can go ahead and play in there, but we wouldn't recommend that.
</p>
<p>Our recommendation is to keep all the defaults in case you want to roll back on something and use the overwrite partial we provided.</p>
<p>Overwriting is very simple. You want to open up the Settings file for referencing, copy the variable name into the overwrite file and then just include your new value.</p>
<p>As an example if you'd like to change the background color, switch the headings and main text font and change the menu background color, you'd do something like this.</p>
<pre><code class="language-scss">$main-font: $sans-serif;
$headings-font: $serif;
$background-color: #eee;
$menu-bg: black;</code></pre>
</section>
<section class="box">
<h1>Custom Grid</h1>
<p>There is an additonal empty partial called custom which is the perfect place to add additional Sass Code. Heinz includes a powerful Grid Mixin, which helps you create a fun layout in no time. You know, in case you want to go a bit crazy.</p>
<p>Let's say you want to build a custom Grid like this. You could totally do this to a body tag as well and have a full-screen grid. <a href="customgrid.html" target="_blank">like here.</a></p>
<div class="customgrid item-span-8">
<div class="area-1"></div>
<div class="area-2"></div>
<div class="area-3"></div>
<div class="area-4"></div>
<div class="area-5"></div>
<div class="area-6"></div>
<div class="area-7"></div>
</div>
<p></p>
<p>Building this is super simple. Start by writing some HTML. To keep this simple this example works with a bunch of div tags.</p>
<pre><code class="language-markup"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/heinz.min.css" rel="stylesheet">
<title>Heinz - Documentation</title>
</head>
<body class="customgrid">
<div class="area-1"></div>
<div class="area-2"></div>
<div class="area-3"></div>
<div class="area-4"></div>
<div class="area-5"></div>
<div class="area-6"></div>
<div class="area-7"></div>
</body>
</html></code></pre>
<p>Next is building the Sass. The Grid Creator is a mixin, that takes 4 values. The rows, the columns, the list of elements and the grid layout.</p>
<p>This example works with a simple 4x4 layout, that breaks into a 2x5 grid.</p>
<p>Then this Sass is added to the _custom.scss partial file with two variables. One of them is the breakpoint where the layout should break and the other is a list of colors. This example uses some background colors and stretches all grid items, to fill the full screen. Accomplishing this is just a few lines of SCSS.</p>
<pre><code class="language-scss">$breakpoint: 850px;
$grid-colors: #F5C7CA, #E779AE, #3759A0, #A0CEEC, #EBEBEB, #D7E6E8, #D6D3EE;
@each $c in $grid-colors {
$i: index($grid-colors, $c);
.area-#{$i} {
background: $c;
box-shadow: inset 0px 0px 5px darken($c, 30%);
}
}
.customgrid{
width: 100%;
height: 100vh;
align-items: stretch;
}</code></pre>
<p>Now for the actual Grid Part. In this example auto-sizing is used for the grid items, passing the list of items will assign the area to the container with the class of the same name in the HTML. So make sure you use those area names as your class names, in order for this to work. The amount of classes is variable, you can pass an empty list too, which is what happends in this example, when the gridCreator mixin is called again, for our media query. Then just build the layout, and you're done.</p>
<pre><code class="language-scss">.customgrid{
width: 100%;
height: 100vh;
align-items: stretch;
@include gridCreator(
auto auto auto auto,
auto auto auto auto,
(area-1, area-2, area-3, area-4, area-5, area-6, area-7),
'area-1 area-2 area-3 area-3',
'area-4 area-2 area-3 area-3',
'area-4 area-5 area-5 area-6',
'area-7 area-7 area-7 area-6');
@media screen and (max-width: $breakpoint){
@include gridCreator(
auto auto auto auto auto,
auto auto,
(),
'area-1 area-2',
'area-3 area-3',
'area-4 area-5',
'area-6 area-5',
'area-7 area-7');
}
}</code></pre>
<p>The possibilities of this are infinite and will help in creating some very interesting looks with ease.</p>
</section>
</main>
<footer class="grid">
<div class="foot">
<p>
© Heinz · 2017 · <span class="backtotop">Back To Top</span></p>
</div>
</footer>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/heinz.min.js"></script>
<script src="js/prism.js"></script>
</body>
</html>