ribs-grid
Version:
Scss flexbox grid system can be used with sass or css
239 lines (216 loc) • 5.98 kB
HTML
<html>
<head>
<title>Ribs grid</title>
<link rel="stylesheet" href="../dist/css/style.min.css">
<link rel="stylesheet" href="../dist/css/example.min.css">
</head>
<body>
<div class="ribs-container">
<h2>Grid</h2>
<div class="row">
<div class="cxs-12 csm-12 cmd-12"><div></div></div>
</div>
<div class="row">
<div class="cxs-12 csm-1 cmd-1"><div></div></div>
<div class="cxs-12 csm-11 cmd-11"><div></div></div>
</div>
<div class="row">
<div class="cxs-12 csm-2 cmd-2"><div></div></div>
<div class="cxs-12 csm-10 cmd-10"><div></div></div>
</div>
<div class="row">
<div class="cxs-12 csm-3 cmd-3"><div></div></div>
<div class="cxs-12 csm-9 cmd-9"><div></div></div>
</div>
<div class="row">
<div class="cxs-12 csm-4 cmd-4"><div></div></div>
<div class="cxs-12 csm-8 cmd-8"><div></div></div>
</div>
<div class="row">
<div class="cxs-12 csm-5 cmd-5"><div></div></div>
<div class="cxs-12 csm-7 cmd-7"><div></div></div>
</div>
</div>
<div class="ribs-container">
<h2>Offset columns</h2>
<div class="row">
<div class="cxs-1 cxs-offset-11"><div></div></div>
<div class="cxs-2 cxs-offset-10"><div></div></div>
<div class="cxs-3 cxs-offset-9"><div></div></div>
<div class="cxs-4 cxs-offset-8"><div></div></div>
<div class="cxs-5 cxs-offset-7"><div></div></div>
<div class="cxs-6 cxs-offset-6"><div></div></div>
<div class="cxs-7 cxs-offset-5"><div></div></div>
<div class="cxs-8 cxs-offset-4"><div></div></div>
<div class="cxs-9 cxs-offset-3"><div></div></div>
<div class="cxs-10 cxs-offset-2"><div></div></div>
<div class="cxs-11 cxs-offset-1"><div></div></div>
</div>
</div>
<div class="ribs-container">
<h2>Auto width</h2>
<div class="row">
<div class="cxs"><div></div></div>
<div class="cxs"><div></div></div>
<div class="cxs"><div></div></div>
</div>
<div class="row">
<div class="cxs"><div></div></div>
<div class="cxs"><div></div></div>
<div class="cxs"><div></div></div>
<div class="cxs"><div></div></div>
<div class="cxs"><div></div></div>
<div class="cxs"><div></div></div>
</div>
</div>
<div class="ribs-container">
<h2>Nested grids</h2>
<div class="row">
<div class="cxs-12 csm-12 cmd-8">
<div>
<div class="row">
<div class="cxs-12 csm-12 cmd first-level">
<div>
<div class="row">
<div class="cxs-12 csm-12 cmd-10 second-level">
<div></div>
</div>
<div class="cxs-12 csm-12 cmd-2 second-level">
<div></div>
</div>
</div>
</div>
</div>
<div class="cxs-12 csm-12 cmd first-level">
<div>
<div class="row">
<div class="cxs-12 csm-12 cmd-4 second-level">
<div></div>
</div>
<div class="cxs-12 csm-12 cmd-6 second-level">
<div></div>
</div>
<div class="cxs-12 csm-12 cmd-2 second-level">
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cxs-12 csm-12 cmd-4">
<div>
<div class="row">
<div class="cxs-12 csm-12 cmd-9 first-level">
<div>
<div class="row">
<div class="cxs-12 csm-12 cmd second-level">
<div></div>
</div>
<div class="cxs-12 csm-12 cmd second-level">
<div></div>
</div>
<div class="cxs-12 csm-12 cmd second-level">
<div></div>
</div>
</div>
</div>
</div>
<div class="cxs-12 csm-12 cmd-3 first-level">
<div>
<div class="row">
<div class="cxs-12 csm-12 cmd second-level">
<div></div>
</div>
<div class="cxs-12 csm-12 cmd second-level">
<div></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ribs-container">
<h2>Alignment</h2>
<h3>Start</h3>
<div class="row">
<div class="cxs-12">
<div class="row start-xs">
<div class="cxs-6 second-level"><div></div></div>
</div>
</div>
</div>
<h3>Center</h3>
<div class="row">
<div class="cxs-12">
<div class="row center-xs">
<div class="cxs-6 second-level"><div></div></div>
</div>
</div>
</div>
<h3>End</h3>
<div class="row">
<div class="cxs-12">
<div class="row end-xs">
<div class="cxs-6 second-level"><div></div></div>
</div>
</div>
</div>
<h3>Responsive alignment</h3>
<div class="row">
<div class="cxs-12">
<div class="row start-sm center-lg end-md">
<div class="cxs-6 second-level"><div></div></div>
</div>
</div>
</div>
<h3>Top</h3>
<div class="row top-xs">
<div class="cxs-6">
<div class="height-alignment"></div>
</div>
<div class="cxs-6">
<div></div>
</div>
</div>
<h3>Middle</h3>
<div class="row middle-xs">
<div class="cxs-6">
<div class="height-alignment"></div>
</div>
<div class="cxs-6">
<div></div>
</div>
</div>
<h3>Bottom</h3>
<div class="row bottom-xs">
<div class="cxs-6">
<div class="height-alignment"></div>
</div>
<div class="cxs-6">
<div></div>
</div>
</div>
</div>
<div class="ribs-container">
<h2>Distribution</h2>
<h3>Space around</h3>
<div class="row around-xs">
<div class="cxs-2"><div></div></div>
<div class="cxs-2"><div></div></div>
<div class="cxs-2"><div></div></div>
</div>
<h3>Space between</h3>
<div class="row between-xs">
<div class="cxs-2"><div></div></div>
<div class="cxs-2"><div></div></div>
<div class="cxs-2"><div></div></div>
</div>
</div>
</body>
</html>