dress-css
Version:
CSS helper mobile library
57 lines • 3.1 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" type="image/png" href="./logo.png">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="./../dist/css/min/dress.2.0.min.css">
<title>Dress.css v2.0 Demo</title>
</head>
<body class="dress">
<div class="center p-1 w-5 text-center circle sqr-48 mouse-over box-shadow border-blue border-solid border-s4 md-hide">
<i class="material-icons fs-48 w-100 c-pointer green">check</i>
</div>
<div class="tg-container text-center mt-1 bg-gray rounded box-shadow h-45 overflow-autohide scroller p-0">
<div class="tg-row p-0 bg-purple white">
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72 bg-hotpink">1</div>
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72">2</div>
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72">3</div>
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72">
<div class="tg-row p-0 bg-white black">
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">4.1</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">4.2</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">4.3</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">4.4</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45 bg-aqua">4.5</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">4.6</div>
</div>
</div>
<div class="tg-col-9 tg-col-md-4 tg-col-sm-12 fs-72 mouse-over c-pointer">5</div>
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72">6</div>
</div>
<div class="tg-row p-0 bg-maroon white h-45">
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72 c-move text-uppercase mouse-over">one</div>
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72 c-help text-lowercase">TWO</div>
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72 c-pointer text-capitalize bg-lime black">three</div>
<div class="tg-col-3 tg-col-md-4 tg-col-sm-12 fs-72 c-wait">4</div>
<div class="tg-col-4 tg-col-md-4 tg-col-sm-12 fs-72 c-hand bg-teal">
<div class="mt-10">5</div>
</div>
<div class="tg-col-8 tg-col-md-4 tg-col-sm-12 fs-72">
<div class="tg-row p-0 bg-yellow black">
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">6.1</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45 bg-red">6.2</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">6.3</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45 bg-red">6.4</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">6.5</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45 bg-red">6.6</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">6.7</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45 bg-red">6.8</div>
<div class="tg-col-4 tg-col-md-6 tg-col-sm-12 fs-45">6.9</div>
</div>
</div>
</div>
</div>
</body>
</html>