@lrnwebcomponents/responsive-grid
Version:
Automated conversion of responsive-grid/
199 lines (196 loc) • 7.36 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>ResponsiveGrid: responsive-grid Demo</title>
<script src="../../../node_modules/@lrnwebcomponents/deduping-fix/deduping-fix.js"></script>
<script type="module">
import '@polymer/iron-demo-helpers/demo-snippet.js';
import '../responsive-grid.js';
</script>
<style is="custom-style" include="demo-pages-shared-styles"></style>
</head>
<body>
<small><a href="performancetest.html">Performance Test</a></small>
<div class="vertical-section-container centered">
<h3>Basic responsive-grid demo</h3>
<h4>Simple Responsive Grid with No Gutter</h4>
<demo-snippet>
<template>
<responsive-grid-row>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
<div class="column-demo">
Responsive column
</div>
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
<div class="column-demo">
Responsive column
</div>
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
<div class="column-demo">
Responsive column
</div>
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
<div class="column-demo">
Responsive column
</div>
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
<div class="column-demo">
Responsive column
</div>
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
<div class="column-demo">
Responsive column
</div>
</responsive-grid-col>
</responsive-grid-row>
<style>
responsive-grid-col {
outline: 1px solid #333;
}
</style>
</template>
</demo-snippet>
<h4>Responsive Grid with Custom Gutter</h4>
<demo-snippet>
<template>
<responsive-grid-row gutter="3">
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
Responsive column
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
Responsive column
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
Responsive column
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
Responsive column
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
Responsive column
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12">
Responsive column
</responsive-grid-col>
</responsive-grid-row>
<style>
responsive-grid-col {
outline: 1px solid #333;
}
</style>
</template>
</demo-snippet>
<h4>Responsive Grid with Hidden Columns and Clear Floats</h4>
<demo-snippet>
<template>
<responsive-grid-row gutter="1">
<responsive-grid-col xl="6" lg="6" md="4" sm="6" xs="12">
Responsive column (50% wide on large and extra-large screens)
</responsive-grid-col>
<responsive-grid-col xl="2" lg="0" md="4" sm="6" xs="12">
Responsive column hidden on large screens
</responsive-grid-col>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12" print-only>
Responsive column print-only
</responsive-grid-col>
<responsive-grid-clear sm></responsive-grid-clear>
<responsive-grid-col xl="2" lg="3" md="4" sm="6" xs="12" screen-only>
Responsive column screen-only
</responsive-grid-col>
<responsive-grid-col xl="0" lg="0" md="0" sm="0" xs="12">
Visible on an extra-small screen.
</responsive-grid-col>
<responsive-grid-col xl="0" lg="0" md="0" sm="6" xs="0">
Visible on an small screen.
</responsive-grid-col>
<responsive-grid-clear md></responsive-grid-clear>
<responsive-grid-col xl="0" lg="0" md="4" sm="0" xs="0">
Visible on an medium screen.
</responsive-grid-col>
<responsive-grid-col xl="0" lg="3" md="0" sm="0" xs="0">
Visible on an large screen.
</responsive-grid-col>
<responsive-grid-col xl="2" lg="0" md="0" sm="0" xs="0">
Visible on an extra large screen.
</responsive-grid-col>
</responsive-grid-row>
<style>
responsive-grid-col {
outline: 1px solid #333;
}
</style>
</template>
</demo-snippet>
<h4>Responsive Grid Relative to Parent Container</h4>
<demo-snippet>
<template>
<div class="parent">
<p><small><em>Parent Container</em></small></p>
<responsive-grid-row gutter="2" responsive-to-parent>
<responsive-grid-col xl="0" lg="0" md="0" sm="0" xs="12">
Visible in an extra-small parent (< 600px).
</responsive-grid-col>
<responsive-grid-col xl="0" lg="0" md="0" sm="12" xs="0">
Visible in a small parent (> 600px and < 900px).
</responsive-grid-col>
<responsive-grid-col xl="0" lg="0" md="12" sm="0" xs="0">
Visible on a medium screen (> 900px and < 1200px).
</responsive-grid-col>
<responsive-grid-col xl="0" lg="12" md="0" sm="0" xs="0">
Visible on a large screen (> 1200px and < 1800px).
</responsive-grid-col>
<responsive-grid-col xl="12" lg="0" md="0" sm="0" xs="0">
Visible on an extra-large screen (>= 1800px).
</responsive-grid-col>
</responsive-grid-row>
</div>
</template>
<style>
responsive-grid-col {
outline: 1px solid #333;
}
.parent {
max-width: 800px;
border: 1px dotted #666;
padding: 0 15px 15px;
margin: 0 auto;
}
</style>
</demo-snippet>
<h4>Responsive grid with Custom Breakpoints</h4>
<demo-snippet>
<template>
<responsive-grid-row sm="1000" md="1500" lg="2000" xl="2500" gutter="2">
<responsive-grid-col xl="0" lg="0" md="0" sm="0" xs="12">
Visible on an extra-small screen (< 1500px).
</responsive-grid-col>
<responsive-grid-col xl="0" lg="0" md="0" sm="12" xs="0">
Visible on a small screen (> 1500px and < 2000px).
</responsive-grid-col>
<responsive-grid-col xl="0" lg="0" md="12" sm="0" xs="0">
Visible on a medium screen (> 1500px and < 2000px).
</responsive-grid-col>
<responsive-grid-col xl="0" lg="12" md="0" sm="0" xs="0">
Visible on a large screen (> 2000px and < 2500px).
</responsive-grid-col>
<responsive-grid-col xl="12" lg="0" md="0" sm="0" xs="0">
Visible on an extra-large screen (>= 2500px).
</responsive-grid-col>
</responsive-grid-row>
<style>
responsive-grid-col {
outline: 1px solid #333;
}
</style>
</template>
</demo-snippet>
</div>
</body>
</html>