forked from olton/metroui
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsizing.html
More file actions
157 lines (138 loc) · 7.41 KB
/
Copy pathsizing.html
File metadata and controls
157 lines (138 loc) · 7.41 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="Easily make an element as wide or as tall (relative to its parent) with our width and height utilities. The most popular HTML, CSS, and JS library in Metro style.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Sizing - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body>
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav">
</div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Sizing</a></li>
<li class="toc-entry"><a href="#_sizing_width">Width</a></li>
<li class="toc-entry"><a href="#_sizing_height">Height</a></li>
<li class="toc-entry"><a href="#_sizing_responsive">Responsive</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Sizing</h1>
<p class="text-leader">
Easily make an element as wide or as tall (relative to its parent) with our width and height utilities.
</p>
<!-- ads-html -->
<h3 id="_sizing_width">Width</h3>
<p>
Width utilities are support for 25%, 50%, 75%, and 100% by default.
</p>
<div class="example p-0">
<div class="w-25 p-1 bg-grayWhite">Width 25%</div>
<div class="w-50 p-1 bg-grayWhite">Width 50%</div>
<div class="w-75 p-1 bg-grayWhite">Width 75%</div>
<div class="w-100 p-1 bg-grayWhite">Width 100%</div>
</div>
<pre><code class="html">
<div class="w-25">Width 25%</div>
<div class="w-50">Width 50%</div>
<div class="w-75">Width 75%</div>
<div class="w-100">Width 100%</div>
</code></pre>
<h4>Max-width</h4>
<p>
You can also use <code>max-with</code> utilities as needed:
<code>.mw-25</code>,
<code>.mw-50</code>,
<code>.mw-75</code>,
<code>.mw-100</code>.
</p>
<div class="example p-0">
<div class="bg-gray mw-75">Max width 75%</div>
</div>
<pre><code class="html">
<div class="mw-75">Max width 75%</div>
</code></pre>
<h3 id="_sizing_height">Height</h3>
<p>
height utilities are support for 25%, 50%, 75%, and 100% by default.
</p>
<div class="example clear p-0" style="height: 120px">
<div class="w-25 h-25 bg-grayWhite float-left">Height 25%</div>
<div class="w-25 h-50 bg-grayWhite float-left">Height 50%</div>
<div class="w-25 h-75 bg-grayWhite float-left">Height 75%</div>
<div class="w-25 h-100 bg-grayWhite float-left">Height 100%</div>
</div>
<pre><code class="html">
<div class="h-25">Height 25%</div>
<div class="h-50">Height 50%</div>
<div class="h-75">Height 75%</div>
<div class="h-100">Height 100%</div>
</code></pre>
<h4>Max-height</h4>
<p>
You can also use <code>max-height</code> utilities as needed:
<code>.mh-25</code>,
<code>.mh-50</code>,
<code>.mh-75</code>,
<code>.mh-100</code>.
</p>
<div class="example p-0" style="height: 120px">
<div class="bg-gray h-100 mh-75">Max height 75%</div>
</div>
<pre><code class="html">
<div class="mh-75">Max height 75%</div>
</code></pre>
<h3 id="_sizing_responsive">Responsive</h3>
<p>
All sizing utilities classes has media variants with breakpoints suffixes:
<code>-sm</code>,
<code>-md</code>,
<code>-lg</code>,
<code>-xl</code>,
<code>-xxl</code>.
</p>
</main>
</div>
</div>
<script src="docsearch/docsearch.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="metro/js/metro.js?ver=@@b-version"></script>
<script src="highlight/highlight.pack.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/site.js"></script>
<!-- ads-script -->
<!-- ga-script -->
<!-- hit-ua -->
</body>
</html>