plasma.css
Version:
A robust, yet minimalist CSS grid framework based on Flexbox.
562 lines (559 loc) • 25.7 kB
HTML
<html class="no-js"
lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible"
content="ie=edge">
<title>Plasma Grid | A Flexbox Grid</title>
<meta name="description"
content="">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="apple-touch-icon"
href="apple-touch-icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet"
href="assets/css/plasma.css">
<link rel="stylesheet"
href="assets/css/docs.css">
</head>
<body class="">
<!--[if lt IE 8]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
<![endif]-->
<div class="container-fluid container-center-content sm-fixed-h-4 lg-fixed-h-7">
<div class="row row-gutter stack-align-y-center text-center">
<div class="col xs-12 row-gutter text-center">
<h1>Plasma Grid</h1>
<h3>A flexbox grid.</h3>
</div>
<div class="col xs-12 sm-4">
<span class="xs-fixed-2 xs-fixed-h-2 md-fixed-2 md-fixed-h-2 lg-fixed-1 lg-fixed-h-1 highlight-box circle"></span>
<br>
<h4>12 column grid by default. Customizable by you.</h4>
</div>
<div class="col xs-12 sm-4">
<span class="xs-fixed-2 xs-fixed-h-2 md-fixed-2 md-fixed-h-2 lg-fixed-1 lg-fixed-h-1 highlight-box circle"></span>
<br>
<h4>Respsonsive and mobile first.
</h4>
</div>
<div class="col xs-12 sm-4">
<span class="xs-fixed-2 xs-fixed-h-2 md-fixed-2 md-fixed-h-2 lg-fixed-1 lg-fixed-h-1 highlight-box circle"></span>
<br>
<h4>Optional compatibility mode with Twitter Bootstrap 3.
</h4>
</div>
<div class="col xs-12 row-gutter text-center">
<div>
<a href="https://github.com/betsydupuis/plasma.css">View this project on Github</a>
</div>
</div>
</div>
</div>
<div class="container-fluid sm-10 lg-8">
<!-- -->
<h3>Responsive Grid</h3>
<div class="row row-gutter">
<div class="col xs-1">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-11">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-2">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-10">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-3">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-9">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-4">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-8">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-5">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-7">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-12">
<div class="card xs-fixed-h-1"></div>
</div>
</div>
</div>
<div class="container-fluid container-center-content xs-fixed-12 container-xs">
<h3>Fixed Grid</h3>
<h4>Phone</h4>
<div class="row">
<div class="col xs-fixed-1" >
<div class="card xs-fixed-h-1" style="padding-left: 1px;padding-right: 1px;"></div>
</div>
<div class="col xs-fixed-11">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-2">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-10">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-3">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-9">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-4">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-8">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-5">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-7">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xs-fixed-12">
<div class="card xs-fixed-h-1"></div>
</div>
</div>
</div>
<div class="container-fluid container-center-content sm-fixed-12 container-sm">
<h4>Tablet</h4>
<div class="row">
<div class="col sm-fixed-1">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-11">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-2">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-10">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-3">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-9">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-4">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-8">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-5">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-7">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col sm-fixed-12">
<div class="card xs-fixed-h-1"></div>
</div>
</div>
</div>
<div class="container-fluid container-center-content md-fixed-12 container-md">
<h4>Large Tablet / Small Desktop</h4>
<div class="row">
<div class="col md-fixed-1">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-11">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-2">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-10">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-3">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-9">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-4">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-8">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-5">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-7">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col md-fixed-12">
<div class="card xs-fixed-h-1"></div>
</div>
</div>
</div>
<div class="container-fluid container-center-content lg-fixed-12 container-lg">
<h4>Large Desktop</h4>
<div class="row">
<div class="col lg-fixed-1">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-11">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-2">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-10">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-3">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-9">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-4">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-8">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-5">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-7">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col lg-fixed-12">
<div class="card xs-fixed-h-1"></div>
</div>
</div>
</div>
<div class="container-fluid container-center-content xl-fixed-12 container-xl">
<h4>Extra Large Desktop</h4>
<div class="row">
<div class="col xl-fixed-1">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-11">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-2">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-10">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-3">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-9">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-4">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-8">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-5">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-7">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-6">
<div class="card xs-fixed-h-1"></div>
</div>
<div class="col xl-fixed-12">
<div class="card xs-fixed-h-1"></div>
</div>
</div>
</div>
<!-- -->
<div class="container-fluid sm-10 lg-8">
<div class="row row-gutter row-gutter-top">
<div class="col col-fill container-fill">
<div>
<h3>Fixed width, fluid, fill, and baseless columns can be <em>mixed</em>.</h3>
<p>See the grid in action by resizing your browser.</p>
</div>
</div>
<div class="col xs-12">
<div class="row">
<div class="col xs-fixed-5 md-fixed-2 lg-fixed-2">
<div class="card xs-fixed-h-3 lg-fixed-h-3"></div>
</div>
<div class="col xs-7 md-5">
<div class="card xs-fixed-h-3 lg-fixed-h-3"></div>
</div>
<div class="col col-fill md-fixed-2">
<div class="card xs-fixed-h-3 lg-fixed-h-3"></div>
</div>
<div class="col md-fixed-2">
<div class="card xs-fixed-h-3 lg-fixed-h-3"></div>
</div>
</div>
</div>
</div>
<!-- -->
<div class="row">
<div class="col xs-12 md-4 stack-align-y-center">
<div>
<h3>All columns are <em>matched heights</em> by default.</h3>
<!-- <p>Try resizing your browser.</p> -->
</div>
</div>
<div class="col md-8">
<div class="card">
<div class="row">
<div class="col col-fill">
<div class="card xs-h-12">
<h4>Shorter Column</h4>
<p>This column has shorter text.</p>
</div>
</div>
<div class="col col-fill">
<div class="card xs-h-12">
<h4>Longer Column</h4>
<p>This column has longer text.</p>
<p>The shorter column grows in height to match the longer column.</p>
<p>The shorter column grows in height to match the longer column.</p>
<p>The shorter column grows in height to match the longer column.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div>
<h3>Columns can be set to <em>fill the remaining space</em>.</h3>
<p>This can produce <em>Irrational Ratios</em>.</p>
<div class="row">
<div class="col col-fill ">
<div class="card sm-fixed-h-3 lg-fixed-h-3">
2/7/12
</div>
</div>
<div class="col col-fill ">
<div class="card sm-fixed-h-3 lg-fixed-h-3">
2/7/12
</div>
</div>
<div class="col xs-5 ">
<div class="card sm-fixed-h-3 lg-fixed-h-3">5/12</div>
</div>
</div>
<div class="row row-gutter">
<div class="col col-fill ">
<div class="card sm-fixed-h-3 lg-fixed-h-3">
2/9/12
</div>
</div>
<div class="col col-fill ">
<div class="card sm-fixed-h-3 lg-fixed-h-3">
2/9/12
</div>
</div>
<div class="col xs-3 ">
<div class="card sm-fixed-h-3 lg-fixed-h-3">3/12</div>
</div>
</div>
</div>
<div class="row">
<div class="col xs-4 stack-align-y-center">
<div>
<h3>Set <em>fixed heights</em> for complex layouts.</h3>
<p>Try resizing your browser.</p>
</div>
</div>
<div class="col xs-8">
<div class="card">
<div class="row stack xs-fixed-h-12"
style="height: 240px">
<div class="col container-fill-y xs-4 xs-fixed-h-12">
<div class="card fill">
</div>
</div>
<div class="col container-fill-y xs-8 xs-fixed-h-6">
<div class="card fill">
</div>
</div>
<div class="col container-fill-y xs-8 xs-fixed-h-4">
<div class="card fill">
</div>
</div>
<div class="col container-fill-y xs-8 xs-fixed-h-2">
<div class="card fill">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div class="row">
<div class="col xs-12 stack-align-y-center">
<div>
<h3>Easily control <em>scrollable areas</em>.</h3>
<p>Try resizing your browser.</p>
</div>
</div>
<div class="col xs-5">
<div class="card">
<div class="row stack xs-fixed-h-12 sm-fixed-h-8"
style="height: 240px">
<div class="col container-fill-y">
<div class="card fill">
<h4>Header</h4>
</div>
</div>
<div class="col container-fill-y col-fill overflow-hidden">
<div class="card fill scroll-y">
<h4>Scrollable Area</h4>
<p>Lorem ipsum dolor sit amet, tantas ancillae consequat ex ius, sea ex ponderum signiferumque. Graeci graeco splendide est ea. Usu cu graeco lucilius consequuntur, no purto iuvaret pro. Has at agam tantas definitionem, est te tantas salutatus. Sea brute meliore verterem ea, tota omnium contentiones at usu. Salutatus adolescens eu sed, solum viderer ceteros in qui.</p>
<p>Mel no diceret invenire, et mea natum alienum percipit, mea nominavi principes aliquando ne. Purto dicat pericula id sit, fugit iudico causae eu nec. Amet reque rationibus eum eu, mea solum nostro contentiones an. At vidit persius definiebas vel, eu affert quaerendum qui.</p>
<p>Eum altera qualisque adversarium ne. Te pro saepe sadipscing voluptatibus, et nam euismod sanctus qualisque. Putant voluptaria est ei, no mei legere sententiae, an maluisset reformidans his. Pri deleniti tractatos et, reque everti cu duo. Id nec constituam sadipscing, ea ridens bonorum vis. Nec civibus antiopam id, vel id putant convenire. Falli incorrupte duo ei, ne usu sint quodsi qualisque, ex cum quod numquam cotidieque.</p>
</div>
</div>
<div class="col ">
<div class="card fill">
<h4>Footer</h4>
</div>
</div>
</div>
</div>
</div>
<div class="col col-fill">
<div class="card">
<div class="row stack xs-fixed-h-12 sm-fixed-h-8"
style="height: 240px">
<div class="col container-fill-y xs-12 ">
<div class="card fill">
<h4>Header</h4>
</div>
</div>
<div class="col container-fill-y col-fill xs-12 overflow-hidden">
<div class="card fill container-fill-y scroll-y">
<div class="row fill stack">
<div class="col container-fill-y xs-8 xs-h-12">
<div class="card fill scroll-y">
<h4>Horizontal Scrollable Area</h4>
<h6>With vertically scrolling cards</h6>
<p>Eum altera qualisque adversarium ne. Te pro saepe sadipscing voluptatibus, et nam euismod sanctus qualisque. Putant voluptaria est ei, no mei legere sententiae, an maluisset reformidans his. Pri deleniti tractatos et, reque everti cu duo. Id nec constituam sadipscing, ea ridens bonorum vis. Nec civibus antiopam id, vel id putant convenire. Falli incorrupte duo ei, ne usu sint quodsi qualisque, ex cum quod numquam cotidieque.</p>
</div>
</div>
<div class="col container-fill-y xs-8 xs-h-12">
<div class="card fill scroll-y">
<p>Lorem ipsum dolor sit amet, tantas ancillae consequat ex ius, sea ex ponderum signiferumque. Graeci graeco splendide est ea. Usu cu graeco lucilius consequuntur, no purto iuvaret pro. Has at agam tantas definitionem, est te tantas salutatus. Sea brute meliore verterem ea, tota omnium contentiones at usu. Salutatus adolescens eu sed, solum viderer ceteros in qui.</p>
</div>
</div>
<div class="col container-fill-y xs-8 xs-h-12">
<div class="card fill scroll-y">
<p>Mel no diceret invenire, et mea natum alienum percipit, mea nominavi principes aliquando ne. Purto dicat pericula id sit, fugit iudico causae eu nec. Amet reque rationibus eum eu, mea solum nostro contentiones an. At vidit persius definiebas vel, eu affert quaerendum qui.</p>
</div>
</div>
<div class="col container-fill-y xs-8 xs-h-12">
<div class="card fill scroll-y">
<p>Eum altera qualisque adversarium ne. Te pro saepe sadipscing voluptatibus, et nam euismod sanctus qualisque. Putant voluptaria est ei, no mei legere sententiae, an maluisset reformidans his. Pri deleniti tractatos et, reque everti cu duo. Id nec constituam sadipscing, ea ridens bonorum vis. Nec civibus antiopam id, vel id putant convenire. Falli incorrupte duo ei, ne usu sint quodsi qualisque, ex cum quod numquam cotidieque.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col xs-12">
<div class="card fill">
<h4>Footer</h4>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- -->
<div class="row">
<div class="col xs-8 stack-align-y-center">
<div>
<h3>Use <em>vertical centering</em> in elements with a height.</p>
</div>
</div>
<div class="col xs-12">
<div class="card">
<div class="row">
<img class="col col-align-y-top"
src="https://unsplash.it/120/96/?random">
<div class="col col-fill">
<h4>Media Body</h4>
<p>Eum altera qualisque adversarium ne. Te pro saepe sadipscing voluptatibus, et nam euismod sanctus qualisque. Putant voluptaria est ei, no mei legere sententiae, an maluisset reformidans his. </p>
<p>Pri deleniti tractatos et, reque everti cu duo. Id nec constituam sadipscing, ea ridens bonorum vis. Nec civibus antiopam id, vel id putant convenire. Falli incorrupte duo ei, ne usu sint quodsi qualisque, ex cum quod numquam cotidieque.</p>
</div>
<img class="col col-align-y-bottom"
src="https://unsplash.it/120/240/?random">
<img class="col col-align-y-center"
src="https://unsplash.it/240/120/?random">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col xs-8 stack-align-y-center">
<h3>Use a single class to apply <em> vertical centering</em>.</h3>
<p>Media objects can be created using the same conventions as the grid. No extra classes necessary!</p>
</div>
</div>
</div>
<div class="card container-center-content xs-h-8">
<img class=""
src="https://unsplash.it/240/120/?random">
</div>
</body>
</html>