siwi-layout
Version:
layout for siwi ui
203 lines (177 loc) • 8.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout Demo</title>
<link rel="stylesheet" href="../dist/siwi-layout.css">
<style media="screen">
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.even {
height: 50px;
background: #A7B2B8;
margin: 5px 0;
border-left: 2px solid white;
border-right: 2px solid white;
}
.odd {
height: 50px;
background: #616E75;
margin: 5px 0;
border-left: 2px solid white;
border-right: 2px solid white;
}
.bg-odd {
background: #616E75;
}
.bg-even {
background: #A7B2B8;
}
span {
color: white;
display: block;
height: 40px;
line-height: 40px;
text-align: center;
}
span::before {
content: "";
}
.height-100 {
height: 100px;
}
.height-80 {
height: 80px;
}
.height-60 {
height: 60px;
}
.height-30 {
height: 30px;
}
</style>
</head>
<body>
<div class="sw flex-row">
<div class="col-18">
<h1>基本</h1>
<div class="sw flex-row">
<div class="col-24 odd"><span>24</span></div>
<div class="col-12 odd"><span>12</span></div>
<div class="col-12 even"><span>12</span></div>
<div class="col-8 odd"><span>8</span></div>
<div class="col-8 even"><span>8</span></div>
<div class="col-8 odd"><span>8</span></div>
<div class="col-6 odd"><span>6</span></div>
<div class="col-6 even"><span>6</span></div>
<div class="col-6 odd"><span>6</span></div>
<div class="col-6 even"><span>6</span></div>
<div class="col-4 odd"><span>4</span></div>
<div class="col-4 even"><span>4</span></div>
<div class="col-4 odd"><span>4</span></div>
<div class="col-4 even"><span>4</span></div>
<div class="col-4 odd"><span>4</span></div>
<div class="col-4 even"><span>4</span></div>
<div class="col-3 odd"><span>3</span></div>
<div class="col-3 even"><span>3</span></div>
<div class="col-3 odd"><span>3</span></div>
<div class="col-3 even"><span>3</span></div>
<div class="col-3 odd"><span>3</span></div>
<div class="col-3 even"><span>3</span></div>
<div class="col-3 odd"><span>3</span></div>
<div class="col-3 even"><span>3</span></div>
<div class="col-2 odd"><span>2</span></div>
<div class="col-2 even"><span>2</span></div>
<div class="col-2 odd"><span>2</span></div>
<div class="col-2 even"><span>2</span></div>
<div class="col-2 odd"><span>2</span></div>
<div class="col-2 even"><span>2</span></div>
<div class="col-2 odd"><span>2</span></div>
<div class="col-2 even"><span>2</span></div>
<div class="col-2 odd"><span>2</span></div>
<div class="col-2 even"><span>2</span></div>
<div class="col-2 odd"><span>2</span></div>
<div class="col-2 even"><span>2</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 odd"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
<div class="col-1 even"><span>1</span></div>
</div>
<div class="sw flex-row justify-content-flex-start">
<div class="col-6 odd"><span>flex-start</span></div>
<div class="col-6 even"><span>flex-start</span></div>
</div>
<div class="sw flex-row justify-content-flex-end">
<div class="col-6 odd"><span>flex-end</span></div>
<div class="col-6 even"><span>flex-end</span></div>
</div>
<div class="sw flex-row justify-content-center">
<div class="col-6 odd"><span>flex-center</span></div>
<div class="col-6 even"><span>flex-center</span></div>
</div>
<div class="sw flex-row justify-content-space-around">
<div class="col-6 odd"><span>flex-space-around</span></div>
<div class="col col-6 even"><span>flex-space-around</span></div>
</div>
<div class="sw flex-row justify-content-space-between">
<div class="col-6 odd"><span>flex-space-between</span></div>
<div class="col col-6 even"><span>flex-space-between</span></div>
</div>
<div class="sw flex-row justify-content-center align-items-flex-start">
<div class="col-3 odd height-100"><span>flex-top</span></div>
<div class="col-3 even height-80"><span>flex-top</span></div>
<div class="col-3 odd height-50"><span>flex-top</span></div>
<div class="col-3 even height-60"><span>flex-top</span></div>
</div>
<div class="sw flex-row justify-content-center align-items-center">
<div class="col-3 odd height-100"><span>flex-middle</span></div>
<div class="col-3 even height-80"><span>flex-middle</span></div>
<div class="col-3 odd height-50"><span>flex-middle</span></div>
<div class="col-3 even height-60"><span>flex-middle</span></div>
</div>
<div class="sw flex-row justify-content-center align-items-flex-end">
<div class="col-3 odd height-100"><span>flex-bottom</span></div>
<div class="col-3 even height-80"><span>flex-bottom</span></div>
<div class="col-3 odd height-50"><span>flex-bottom</span></div>
<div class="col-3 even height-60"><span>flex-bottom</span></div>
</div>
<div class="sw flex-row">
<div class="col-8 bg offset-3"><span>col-8 offset-3</span></div>
</div>
<h1>Pull Push</h1>
<div class="siwi row">
<div class="col col-8 bg-odd push-16"><span>col-8 col-push-16</span></div>
<div class="col col-16 bg-even pull-8"><span>col-16 col-pull-8</span></div>
</div>
</div>
<div class="col-6" style="background: #EFEFEF;min-height: 3000px;border-left:10px solid white;">
</div>
</div>
</body>
</html>