Skip to content

Commit

Permalink
Adds FlexGrid to css and react packages.
Browse files Browse the repository at this point in the history
  • Loading branch information
@roblevintennis
roblevintennis committed Sep 20, 2020
1 parent be2a851 commit 86f479d
Show file tree
Hide file tree
Showing 16 changed files with 2,942 additions and 0 deletions.
1,125 changes: 1,125 additions & 0 deletions agnosticui-css/flexboxgrid-custom.css
View file

Large diffs are not rendered by default.

68 changes: 68 additions & 0 deletions agnosticui-css/flexboxgrid.html
View file
@@ -0,0 +1,68 @@
<!DOCTYPE html>

<html>

<head>
<title>Card</title>
<link rel="stylesheet" href="./flexboxgrid-custom.css">
<style>
body {
margin-top: 2em;
}

h3 {
font-weight: 300;
font-size: 3rem;
}

.demo-only {
background: #f9f9f9;
border: 1px solid #eee;
padding: 2rem 0;
}

.demo-only-field {
border: 1px solid #cccccc;
padding: 1.5rem 3rem;
}
</style>
</head>

<body>

<div class="flexgrid-container">
<h1>Basic Grid</h1>
<p>Check out the demo storybooks in the framework you're interested in (React, Svelte, Vue, etc.).</p>
<p><i>xs</i> = Extra Small. <i>sm</i> = Small. <i>lg</i> = Large.</p>
<p>The following breakpoints can be overriden by redefining in your stylesheet and omitting the <i>-default</i>
part:</p>
<pre>
--agnosticui-default-sm-min: 576px;
--agnosticui-default-md-min: 768px;
--agnosticui-default-lg-min: 992px;
--agnosticui-default-xl-min: 1200px;
</pre>
<div class="row demo-only">
<div class="col-xs-12 col-sm-4 col-lg-6">
<p class="demo-only-field">xs={12} sm={4} lg={6}</p>
</div>
<div class="col-xs-12 col-sm-4 col-lg-6">
<p class="demo-only-field">xs={12} sm={4} lg={6}</p>
</div>
<div class="col-xs-12 col-sm-4 col-lg-3">
<p class="demo-only-field">xs={12} sm={4} lg={3}</p>
</div>
<div class="col-xs-12 col-sm-4 col-lg-3">
<p class="demo-only-field">xs={12} sm={4} lg={3}</p>
</div>
<div class="col-xs-12 col-sm-4 col-lg-3">
<p class="demo-only-field">xs={12} sm={4} lg={3}</p>
</div>
<div class="col-xs-12 col-sm-4 col-lg-3">
<p class="demo-only-field">xs={12} sm={4} lg={3}</p>
</div>
</div>
</div>
</body>

</html>
8 changes: 8 additions & 0 deletions agnosticui-react/copystyles.js
View file
Expand Up @@ -46,3 +46,11 @@ fs.writeFileSync('./src/stories/header.css', css, 'utf8');
*/
css = fs.readFileSync('../agnosticui-css/headernav.css', 'utf8');
fs.writeFileSync('./src/stories/headernav.css', css, 'utf8');


/**
* FlexGrid
*/
css = fs.readFileSync('../agnosticui-css/flexboxgrid-custom.css', 'utf8');
fs.writeFileSync('./src/stories/FlexGrid/FlexBoxGrid2Custom.css', css, 'utf8');

219 changes: 219 additions & 0 deletions agnosticui-react/src/__snapshots__/storybook.test.js.snap
View file
Expand Up @@ -656,6 +656,225 @@ Array [
]
`;

exports[`Storyshots Grid Usage Examples 1`] = `
Array [
<section>
<h1>
Basic Grid
</h1>
<p>
<i>
xs
</i>
= Extra Small.
<i>
sm
</i>
= Small.
<i>
lg
</i>
= Large.
</p>
<p>
The following breakpoints can be overriden by redefining in your stylesheet and omitting the
<i>
-default
</i>
part:
</p>
<pre>
--agnosticui-default-sm-min: 576px; --agnosticui-default-md-min: 768px; --agnosticui-default-lg-min: 992px; --agnosticui-default-xl-min: 1200px;
</pre>
<div
className="flexgrid-container"
>
<div
className="DemoCol row"
>
<div
className="col-xs-12 col-sm-4 col-lg-6"
>
<p
className="Field"
>
xs={12} sm={4} lg={6}
</p>
</div>
<div
className="col-xs-12 col-sm-4 col-lg-6"
>
<p
className="Field"
>
xs={12} sm={4} lg={6}
</p>
</div>
<div
className="col-xs-12 col-sm-4 col-lg-3"
>
<p
className="Field"
>
xs={12} sm={4} lg={3}
</p>
</div>
<div
className="col-xs-12 col-sm-4 col-lg-3"
>
<p
className="Field"
>
xs={12} sm={4} lg={3}
</p>
</div>
<div
className="col-xs-12 col-sm-4 col-lg-3"
>
<p
className="Field"
>
xs={12} sm={4} lg={3}
</p>
</div>
<div
className="col-xs-12 col-sm-4 col-lg-3"
>
<p
className="Field"
>
xs={12} sm={4} lg={3}
</p>
</div>
</div>
</div>
</section>,
<section>
<h1>
Complex
</h1>
<p>
Not that you'd want this level of complexity, but it is available:
</p>
<div
className="flexgrid-container"
>
<div
className="DemoCol row"
>
<div
className="col-xs-12 col-sm-8 col-md-4 col-lg-3 col-xl-2"
>
<p
className="Field"
>
xs={12} sm={8} md={4} lg={3} xl={2}
</p>
</div>
<div
className="col-xs-12 col-sm-8 col-md-4 col-lg-3 col-xl-2"
>
<p
className="Field"
>
xs={12} sm={8} md={4} lg={3} xl={2}
</p>
</div>
<div
className="col-xs-12 col-sm-8 col-md-4 col-lg-3 col-xl-2"
>
<p
className="Field"
>
xs={12} sm={8} md={4} lg={3} xl={2}
</p>
</div>
</div>
</div>
</section>,
<section>
<h1>
Offsets
</h1>
<div
className="flexgrid-container"
>
<div
className="DemoCol row"
>
<div
className="col-sm-2"
style={
Object {
"border": "1px solid #f7cac9",
}
}
>
<p>
sm=
2
</p>
</div>
<div
className="col-sm-2 col-sm-offset-1"
style={
Object {
"border": "1px solid #39cccc",
}
}
>
<p>
sm=
2
smOffset=
1
</p>
</div>
<div
className="col-sm-2 col-sm-offset-1"
style={
Object {
"border": "1px solid #7fdbff",
}
}
>
<p>
sm=
2
smOffset=
1
</p>
</div>
<div
className="col-sm-2 col-sm-offset-1"
style={
Object {
"border": "1px solid #ff6f61",
}
}
>
<p>
sm=
2
smOffset=
1
</p>
</div>
</div>
</div>
<p>
See
<a
href="https://evgenyrodionov.github.io/flexboxgrid2/"
>
flexboxgrid2
</a>
for more examples.
</p>
</section>,
]
`;

exports[`Storyshots Header Header And Nav 1`] = `
Array [
<header
Expand Down
87 changes: 87 additions & 0 deletions agnosticui-react/src/stories/FlexGrid.stories.js
View file
@@ -0,0 +1,87 @@

import React from 'react';
import FlexGrid from './FlexGrid/FlexGrid.js'
import FlexRow from './FlexGrid/FlexRow.js'
import FlexCol from './FlexGrid/FlexCol.js'
import styles from './FlexGrid/FlexGridExample.module.css'
const Field = ({ label = "Field" }) => <p className={styles.Field}>{label}</p>

export default {
title: 'Grid',
component: FlexGrid,
};

export const UsageExamples = () => (
<>
<section>
<h1>Basic Grid</h1>
<p><i>xs</i> = Extra Small. <i>sm</i> = Small. <i>lg</i> = Large.</p>
<p>The following breakpoints can be overriden by redefining in your stylesheet and omitting the <i>-default</i> part:</p>
<pre>
--agnosticui-default-sm-min: 576px;
--agnosticui-default-md-min: 768px;
--agnosticui-default-lg-min: 992px;
--agnosticui-default-xl-min: 1200px;
</pre>
<FlexGrid>
<FlexRow className={styles.DemoCol}>
<FlexCol xs={12} sm={4} lg={6}>
<Field label="xs={12} sm={4} lg={6}" />
</FlexCol>
<FlexCol xs={12} sm={4} lg={6}>
<Field label="xs={12} sm={4} lg={6}" />
</FlexCol>
<FlexCol xs={12} sm={4} lg={3}>
<Field label="xs={12} sm={4} lg={3}" />
</FlexCol>
<FlexCol xs={12} sm={4} lg={3}>
<Field label="xs={12} sm={4} lg={3}" />
</FlexCol>
<FlexCol xs={12} sm={4} lg={3}>
<Field label="xs={12} sm={4} lg={3}" />
</FlexCol>
<FlexCol xs={12} sm={4} lg={3}>
<Field label="xs={12} sm={4} lg={3}" />
</FlexCol>
</FlexRow>
</FlexGrid>
</section>
<section>
<h1>Complex</h1>
<p>Not that you'd want this level of complexity, but it is available:</p>
<FlexGrid>
<FlexRow className={styles.DemoCol}>
<FlexCol xs={12} sm={8} md={4} lg={3} xl={2}>
<Field label="xs={12} sm={8} md={4} lg={3} xl={2}" />
</FlexCol>
<FlexCol xs={12} sm={8} md={4} lg={3} xl={2}>
<Field label="xs={12} sm={8} md={4} lg={3} xl={2}" />
</FlexCol>
<FlexCol xs={12} sm={8} md={4} lg={3} xl={2}>
<Field label="xs={12} sm={8} md={4} lg={3} xl={2}" />
</FlexCol>
</FlexRow>
</FlexGrid>
</section>
<section>
<h1>Offsets</h1>
<FlexGrid>
<FlexRow className={styles.DemoCol}>
<FlexCol sm={2} style={{ border: '1px solid #f7cac9' }}>
<p>sm={2}</p>
</FlexCol>
<FlexCol sm={2} smOffset={1} style={{ border: '1px solid #39cccc' }}>
<p>sm={2} smOffset={1}</p>
</FlexCol>
<FlexCol sm={2} smOffset={1} style={{ border: '1px solid #7fdbff' }}>
<p>sm={2} smOffset={1}</p>
</FlexCol>
<FlexCol sm={2} smOffset={1} style={{ border: '1px solid #ff6f61' }}>
<p>sm={2} smOffset={1}</p>
</FlexCol>
</FlexRow>
</FlexGrid>
<p>See <a href="https://evgenyrodionov.github.io/flexboxgrid2/">flexboxgrid2</a> for more examples.</p>
</section>
</>
)

0 comments on commit 86f479d

Please sign in to comment.