-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdocumentation_layout.html
144 lines (124 loc) · 6.33 KB
/
documentation_layout.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documentation</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/lt-style.css">
</head>
<body class="lt-grid-container">
<header class="lt-col-1-6-desktop lt-row-1-1-desktop
lt-col-1-3-tablet lt-row-1-1-tablet
lt-col-1-1-mobile lt-row-1-1-mobile
lt-box-shadow">
<!-- main navigation -->
<nav class="lt-nav">
<ul class="lt-nav-ul">
<li class="lt-nav-li"><a href="index.html" class="lt-nav-a lt-link-transition">Home</a></li>
<li class="lt-nav-li"><a href="documentation.html" class="lt-nav-a lt-link-transition lt-nav-active-a">Documentation</a></li>
<li class="lt-nav-li"><a href="examples.html" class="lt-nav-a lt-link-transition">Examples</a></li>
</ul>
</nav>
</header>
<aside class="lt-col-1-1-desktop lt-row-2-5-desktop
lt-col-1-1-tablet lt-row-2-5-tablet
lt-col-1-1-mobile lt-row-2-2-mobile
lt-padding-left-small lt-padding-right-medium
lt-border-right-2
adjust-width">
<!-- side navigation -->
<nav class="lt-side-nav">
<ul class="lt-side-nav-ul">
<!-- Getting started -->
<li class="lt-margin-top-small">Getting started</li>
<li><a href="documentation_intro.html"
class="lt-side-nav-a lt-link-transition">Instalation</a></li>
<!-- Layout -->
<li class="lt-margin-top-small">Layout</li>
<li><a href="documentation_layout.html"
class="lt-side-nav-a lt-link-transition lt-link-active">Grid</a></li>
<!-- Components -->
<li class="lt-margin-top-small">Components</li>
<li><a href="documentation_components_nav.html"
class="lt-side-nav-a lt-link-transition">Navigation</a></li>
<li><a href="documentation_components_hero.html"
class="lt-side-nav-a lt-link-transition">Hero</a></li>
<li><a href="documentation_components_button.html"
class="lt-side-nav-a lt-link-transition">Button</a></li>
<!-- Styles -->
<li class="lt-margin-top-small">Styles</li>
<li><a href="documentation_styles_color.html"
class="lt-side-nav-a lt-link-transition">Colors</a></li>
<li><a href="documentation_styles_font.html"
class="lt-side-nav-a lt-link-transition">Fonts</a></li>
<li><a href="documentation_styles_breakpoints.html"
class="lt-side-nav-a lt-link-transition">Breakpoints</a></li>
</ul>
</nav>
</aside>
<main class="lt-col-2-6-desktop lt-row-2-5-desktop
lt-col-2-3-tablet lt-row-2-5-tablet
lt-col-1-1-mobile lt-row-3-5-mobile
lt-padding-left-small">
<!-- article -->
<article class="lt-card-main lt-margin-right-small">
<h1>Layout</h1>
<h2>Grid</h2>
<p>LightKit grid system consists of six columns and six rows. To be able to include the grid on your website, you need to mark container for the grid as a grid container, and all children as grid items.</p>
<div class="lt-card-secondary">
<img class="img-demonst lt-width-medium" src="img/grid.jpg" alt="grid demonstration">
<code><div class="lt-grid-container"></code>
<code><div class="lt-col-1-2 lt-row-1-1"></code>
<code>-------First.-------</code>
<code></div></code>
<code><div class="lt-col-3-4 lt-row-1-1"></code>
<code>-------Second.------</code>
<code></div></code>
<code><div class="lt-col-5-6 lt-row-1-1"></code>
<code>-------Third.-------</code>
<code></div></code>
<code></div></code>
</div>
<p>To be able to change width or height of the item - specify which columns/rows you would like to occupy. For example, if you want that your column span over two columns starting from the beginning, it means that you need column 1 and column 2. If you want the height of the first two rows, it means that you need row 1 and row 2.</p>
<div class="lt-card-secondary">
<img class="img-demonst lt-width-medium" src="img/grid-width.jpg" alt="grid width demonstration">
<code><div class="lt-grid-container"></code>
<code><div class="lt-col-1-2 lt-row-1-1"></code>
<code>-------First two columns, first row.-------</code>
<code></div></code>
<code><div class="lt-col-1-1 lt-row-2-2"></code>
<code>-------First column, second row.------</code>
<code></div></code>
<code><div class="lt-col-2-2 lt-row-2-2"></code>
<code>-------Second column, second row.-------</code>
<code></div></code>
<code></div></code>
</div>
<p>Depending on screen width, you can apply different grid layout, using '-desktop', '-tablet', and '-mobile' suffixes.</p>
<div class="lt-card-secondary">
<img class="img-demonst lt-width-large" src="img/grid-desktop.jpg" alt="grid desktop size demonstration">
<img class="img-demonst lt-width-medium" src="img/grid-tablet.jpg" alt="grid tablet size demonstration">
<img class="img-demonst lt-width-small" src="img/grid-mobile.jpg" alt="grid mobile size demonstration">
<code><div class="lt-grid-container"></code>
<code><div class="lt-col-1-3-desktop lt-row-1-1-desktop
lt-col-1-1-tablet lt-row-1-1-tablet
lt-col-1-1-mobile lt-row-1-1-mobile"></code>
<code>---This item will take first three columns on a desktop size device, only first column on a tablet size device, and only first column on a mobile device.--</code>
<code></div></code>
<code><div class="lt-col-4-6-desktop lt-row-1-1-desktop
lt-col-2-3-tablet lt-row-1-1-tablet
lt-col-1-1-mobile lt-row-2-2-mobile"></code>
<code>---This item will span over columns 4, 5, and 6 on a desktop size device, columns 2 and 3 on a tablet size device, and only first column on a mobile device of the second row.--</code>
<code></div></code>
<code></div></code>
</div>
</article>
</main>
<footer class="lt-col-1-6-desktop lt-row-6-6-desktop
lt-col-1-3-tablet lt-row-6-6-tablet
lt-col-1-1-mobile lt-row-6-6-mobile
lt-text-right lt-padding-right-medium">
<p>© LightKit</p>
</footer>
</body>
</html>