tentakelfabrik
/
crispy-css
1
0
Fork 0
Code Issues 1 Pull Requests 0 Releases 1 Wiki Activity
Browse Source

adding new icon 

adding texts for reflex grid
adding new colors
master
HerrHase 6 years ago
parent
785ccd87a0
commit
8d7a9ffc10
9 changed files with 462 additions and 218 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +198
    -60
      demo/index.html
  2. +159
    -135
      dest/css/crispy.css
  3. +1
    -1
      dest/css/crispy.min.css
  4. +65
    -0
      dest/svg/chip.svg
  5. +9
    -5
      src/scss/_config.scss
  6. +18
    -8
      src/scss/components/_button.scss
  7. +1
    -1
      src/scss/components/_table.scss
  8. +4
    -2
      src/scss/components/_typography.scss
  9. +7
    -6
      src/scss/crispy.scss

+ 198
- 60
demo/index.html View File

@ -20,6 +20,28 @@
background-color: #efefef; background-color: #efefef;
border: 1px dotted #cecece; border: 1px dotted #cecece;
} }
.header {
padding: 8px 0 0;
background-color: #e9e9e9;
border-bottom: 1px dotted #959595;
margin: 0 0 50px;
}
.header__logo {
width: 50px;
line-height: 0;
position: relative;
top: 3px;
margin: 0 10px;
}
.footer {
padding: 8px 0 0;
background-color: #e9e9e9;
border-top: 1px dotted #959595;
margin: 50px 0 0 0;
}
</style> </style>
</head> </head>
<body> <body>
@ -27,16 +49,29 @@
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-12"> <div class="col-12">
<h1 class="text-center">Crispy Boilerplate - pure CSS</h1>
<div class="text-center">
<h1 class="header__title">
<img class="header__logo" src="../dest/svg/chip.svg" alt="chip" /> Crispy Boilerplate - small, simple, pure CSS
</h1>
</div>
</div> </div>
</div> </div>
</div> </div>
</header> </header>
<button class="button button--up">b</button>
<div class="container"> <div class="container">
<div class="grid"> <div class="grid">
<div class="col-2"> <div class="col-2">
<nav> <nav>
<a href="#heading">Heading</a>
<ul class="margin-top-0x">
<li><a href="#typography">Typography</a></li>
<li><a href="#icon">Icon</a></li>
<li><a href="#buttons">Buttons</a></li>
<li><a href="#table">Table</a></li>
<li><a href="#helpers">Helpers</a></li>
<li><a href="#functions">Functions</a></li>
<li><a href="#reflex-grid">Reflex Grid</a></li>
</ul>
</nav> </nav>
</div> </div>
<div class="col-10"> <div class="col-10">
@ -61,72 +96,175 @@
</p> </p>
<h2 id="typography">Typography</h2> <h2 id="typography">Typography</h2>
<div class="panel">
<h1>Heading h1</h1>
<h2>Heading h1</h2>
<h3>Heading h1</h3>
<h4>Heading h1</h4>
<h5>Heading h1</h5>
<h6>Heading h1</h6>
</div>
<p>
<code class="code">&lt;h2&gt;&lt;/h2&gt;
<!-- blockquote -->
<h3 class="h4 margin-top-1x">Heading</h3>
<h4 class="h6">Html:</h4>
<code>&lt;h2&gt;&lt;/h2&gt;
&lt;h2 class="h3"&gt;&lt;/h2&gt;</code> &lt;h2 class="h3"&gt;&lt;/h2&gt;</code>
<h4 class="h6">Sass:</h4>
<code>$crispy__heading__font-sizes: (
'h1': 40px,
'h2': 36px,
'h3': 32px,
'h4': 28px,
'h5': 24px,
'h6': 20px
) !default;</code>
<h1>Heading h1</h1>
<h2>Heading h1</h2>
<h3>Heading h1</h3>
<h4>Heading h1</h4>
<h5>Heading h1</h5>
<h6>Heading h1</h6>
<strong>Strong</strong>
<!-- blockquote -->
<h3 class="h4 margin-top-1x">blockquote</h3>
<h4 class="h6">Html:</h4>
<code class="code">&lt;blockquote&gt;&lt;/blockquote&gt;</code>
<blockquote>
Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
</blockquote>
<!-- abbr -->
<h3 class="h4 margin-top-1x">abbr</h3>
<p>
Glossier viral occupy mixtape pok pok cornhole, <abbr title="vape affogato hella">vape affogato hella</abbr> knausgaard thundercats
</p> </p>
<div class="panel">
<strong>Strong</strong> <span class="background-warning">&lt;strong&gt;</span>
<code></code>
<blockquote>
Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
</blockquote>
</div>
<div class="panel">
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
<dl>
<dt>defined title 1</dt><dd>defined item 1</dd>
</dl>
</div>
<code class="code">&lt;abbr title=&quot;&quot;&gt;&lt;/abbr&gt;</code>
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
<ol>
<li>item 1</li>
<li>item 2</li>
</ol>
<dl>
<dt>defined title 1</dt><dd>defined item 1</dd>
</dl>
<hr>
<h2 id="buttons" class="margin-top-1x">Buttons</h2> <h2 id="buttons" class="margin-top-1x">Buttons</h2>
<div class="panel">
<button class="button">Button</button>
<button class="button button--danger">Button</button>
</div>
<button class="button">Default</button>
<button class="button button--secondary">Default</button>
<button class="button button--success">Success</button>
<button class="button button--warning">Warning</button>
<button class="button button--danger">Danger</button>
<button class="button button--info">Info</button>
<button class="button button--info button--wide margin-top-1x">Info</button>
<code class="margin-top-1x margin-bottom-1x">&lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button button--success&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button button--warning&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button button--danger&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button button--up&quot;&gt;&lt;/button&gt;
&lt;button class=&quot;button button--down&quot;&gt;&lt;/button&gt;</code>
<hr>
<h2 id="table" class="margin-top-1x">Table</h2> <h2 id="table" class="margin-top-1x">Table</h2>
<div class="panel">
<table class="table table--striped">
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Shawshank Redemption</td>
<td>12</td>
</tr>
<tr>
<td>The Shawshank Redemption</td>
<td>12</td>
</tr>
<tr>
<td>The Shawshank Redemption</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
<code>&lt;table class=&quot;table table--striped&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</code>
<table class="table table--striped margin-bottom-2x">
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr. Brown</td>
<td>43</td>
</tr>
<tr>
<td>Mr. Magenta</td>
<td>32</td>
</tr>
<tr>
<td>Mr. White</td>
<td>45</td>
</tr>
</tbody>
</table>
<!-- Reflex Grid -->
<hr />
<h2 id="reflex-grid" class="margin-top-1x">
Reflex Grid
</h2>
<p>
The <strong>Reflex Grid</strong> is from <a target="_blank" href="http://lendmeyourear.net">Lee Jordan</a>. I have
build a few helper for media-queries. <strong>Reflex Grid </strong> is lightweight, simple and uses a flexbox grid with
cross browser support, an inline-block fallback.
</p>
<p>
Documentation: <a target="_blank" href="http://reflexgrid.com/docs/">http://reflexgrid.com/docs/</a><br />
Github: <a target="_blank" href="https://github.com/leejordan/reflex">https://github.com/leejordan/reflex</a>
</p>
<!-- Reflex Grid / media queries -->
<h3 class="h4 margin-top-1x">
Media Queries
</h3>
<p>
For Media Queries uses the Breakpoints from the <strong>Reflex Grid</strong>.
</p>
<ul>
<li>xs: 576px</li>
<li>sm: 768px</li>
<li>md: 992px</li>
<li>lg: 1200px</li>
<li>xlg: 1600px</li>
</ul>
<p>
You can uses a Mixin to add styles to an Breakpoint.If you want
that a style only belong to one Breakpoints "-only", otherwise it is
Mobile First.
</p>
<h4 class="h6">
Sass:
</h4>
<code class="margin-bottom-1x">@include crispy__media-md() {
&lt;!-- your code --&gt;
}
@include crispy__media-md-only() {
&lt;!-- your code --&gt;
}</code>
</div> </div>
</div> </div>
</div> </div>
<footer class="footer">
<div class="container">
<div class="grid">
<div class="col-12">
<div class="text-center">
<p>
<a target="_blank" href="https://thenounproject.com/wxchee/">W. X. Chee</a>
</p>
</div>
</div>
</div>
</div>
</footer>
</body> </body>
</html> </html>

+ 159
- 135
dest/css/crispy.css
File diff suppressed because it is too large
View File


+ 1
- 1
dest/css/crispy.min.css
File diff suppressed because it is too large
View File


+ 65
- 0
dest/svg/chip.svg View File

@ -0,0 +1,65 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
id="Layer_4"
version="1.1"
viewBox="0 0 98.003868 65.68988"
xml:space="preserve"
inkscape:version="0.91 r13725"
sodipodi:docname="chip.svg"
width="98.003868"
height="65.68988"><metadata
id="metadata15"><rdf:RDF><cc:Work
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs
id="defs13" /><sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1"
objecttolerance="10"
gridtolerance="10"
guidetolerance="10"
inkscape:pageopacity="0"
inkscape:pageshadow="2"
inkscape:window-width="1920"
inkscape:window-height="1006"
id="namedview11"
showgrid="false"
fit-margin-top="0"
fit-margin-left="0"
fit-margin-right="0"
fit-margin-bottom="0"
inkscape:zoom="1.84375"
inkscape:cx="50.12564"
inkscape:cy="32.905524"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1"
inkscape:current-layer="Layer_4" /><style
type="text/css"
id="style3">
.st0{fill:#C9B53A;}
.st1{fill:#231F20;}
.st2{fill:#FFF066;}
</style><path
class="st0"
d="m 7.6408941,25.584353 c -4.6,7.4 -0.5,15.5 8.2999999,15.6 7.5,0.1 14.3,-5.5 19.4,-10.3 2.2,-2 4.1,-4.3 5.9,-6.7 -4.1,-4.5 -9.1,-8 -15.5,-8.1 -6.9,0 -14.4,3.6 -18.0999999,9.5 z"
id="path5"
inkscape:connector-curvature="0"
style="fill:#c9b53a" /><path
class="st1"
d="m 82.440894,1.7843527 c -8.4,-3 -18,-2.39999996 -25.2,3.2 -5.1,4 -8.9,9.5000003 -12.7,14.9000003 -5.9,-6.2 -13.6,-10.0000003 -22.5,-8.8 -9.2,1.3 -18.3999999,7.4 -21.29999986,16.5 -1,3.3 -1.1,7.4 0.39999996,10.5 9.1999999,18 29.6999999,28.8 49.5999999,27.5 16.7,-1.1 35.1,-8.3 43.5,-23.7 7.499996,-13.6 3.9,-34.5000003 -11.8,-40.1000003 z M 7.6408941,25.584353 c 3.6999999,-6 11.1999999,-9.5 18.1999999,-9.5 6.4,0.1 11.4,3.6 15.5,8.1 -1.8,2.4 -3.7,4.7 -5.9,6.7 -5.2,4.8 -12,10.4 -19.4,10.3 -8.8999999,0 -12.9999999,-8.2 -8.3999999,-15.6 z m 62.8999999,29.8 c -18.8,8.2 -42,5.3 -56.4,-8.8 9.6,1 18.4,-5.6 25.1,-11.8 4.1,-3.8 7.5,-8.1 10.7,-12.6 3.3,-4.7 6.5,-10.3 11.4,-13.7000003 8.5,-5.9 22.3,-3.7 27.9,5.2000003 10.6,17.2 -3.2,35 -18.7,41.7 z"
id="path7"
inkscape:connector-curvature="0"
style="fill:#231f20" /><path
class="st2"
d="m 70.540894,55.384353 c 15.5,-6.8 29.3,-24.6 18.7,-41.6 -5.5,-8.9000003 -19.4,-11.1000003 -27.9,-5.2000003 -4.9,3.4000003 -8,8.9000003 -11.4,13.7000003 -3.2,4.5 -6.7,8.7 -10.7,12.5 -6.6,6.2 -15.5,12.8 -25.1,11.8 14.4,14.1 37.6,17.1 56.4,8.8 z m -28.9,-1.7 c -0.2,0 -0.4,0 -0.7,0 0.2,-0.2 0.5,-0.3 0.7,-0.4 0.1,0.1 0,0.3 0,0.4 z"
id="path9"
inkscape:connector-curvature="0"
style="fill:#fff066" /></svg>

+ 9
- 5
src/scss/_config.scss View File

@ -14,18 +14,22 @@ $crispy__golden-ratio: 1.618 !default;
$crispy__margin: pxToEm(20px) !default; $crispy__margin: pxToEm(20px) !default;
// colors // colors
$crispy__color-primary: #5ca4a9 !default;
$crispy__color-success: #6a8d73 !default;
$crispy__color-warning: #f4f1bb !default;
$crispy__color-danger: #ed6a5a !default;
$crispy__color-primary: #f0c209 !default;
$crispy__color-secondary: #b3b2af !default;
$crispy__color-success: #5cb85c !default;
$crispy__color-warning: #f0ad4e !default;
$crispy__color-danger: #d9534f !default;
$crispy__color-info: #0090d4 !default;
$crispy__color-text: #363636 !default; $crispy__color-text: #363636 !default;
$crispy__color-background: #ffffff !default; $crispy__color-background: #ffffff !default;
$crispy__colors: ( $crispy__colors: (
'primary': $crispy__color-primary, 'primary': $crispy__color-primary,
'secondary': $crispy__color-secondary,
'success': $crispy__color-success, 'success': $crispy__color-success,
'warning': $crispy__color-warning, 'warning': $crispy__color-warning,
'danger': $crispy__color-danger
'danger': $crispy__color-danger,
'info': $crispy__color-info
) !default; ) !default;
// body // body


+ 18
- 8
src/scss/components/_button.scss View File

@ -6,33 +6,42 @@
* *
*/ */
$crispy__button__padding: pxToEm(5px) pxToEm(10px) !default;
$crispy__button__padding: pxToEm(10px) pxToEm(25px) !default;
$crispy__button__border: 0 !default;
$crispy__button__up-margin: pxToEm(20px) !default; $crispy__button__up-margin: pxToEm(20px) !default;
$crispy__button__up-padding: pxToEm(5px) !default; $crispy__button__up-padding: pxToEm(5px) !default;
$crispy__button__font-sizes: ( $crispy__button__font-sizes: (
'default': 18px,
'default': $crispy__body__font-size,
'small': 14px, 'small': 14px,
'large': 28px 'large': 28px
) !default; ) !default;
$crispy__button__colors: ( $crispy__button__colors: (
'default': ( 'default': (
'color': $crispy__color-text,
'color': #ffffff,
'background-color': $crispy__color-primary 'background-color': $crispy__color-primary
), ),
'secondary': (
'color': #ffffff,
'background-color': $crispy__color-secondary
),
'success': ( 'success': (
'color': $crispy__color-text,
'color': #ffffff,
'background-color': $crispy__color-success 'background-color': $crispy__color-success
), ),
'warning': ( 'warning': (
'color': $crispy__color-text,
'color': #ffffff,
'background-color': $crispy__color-warning 'background-color': $crispy__color-warning
), ),
'danger': ( 'danger': (
'color': $crispy__color-text,
'color': #ffffff,
'background-color': $crispy__color-danger 'background-color': $crispy__color-danger
),
'info': (
'color': #ffffff,
'background-color': $crispy__color-info
) )
) !default; ) !default;
@ -43,16 +52,17 @@ $crispy__button__colors: (
vertical-align: middle; vertical-align: middle;
appearance: none; appearance: none;
padding: $crispy__button__padding; padding: $crispy__button__padding;
border: $crispy__button__border;
&--wide { &--wide {
width: 100%; width: 100%;
} }
// button for scroll up and down // button for scroll up and down
&--up, &--down { &--up, &--down {
position: absolute;
position:fixed;
bottom: 0; bottom: 0;
margin: $crispy__button__up-margin; margin: $crispy__button__up-margin;
padding: $crispy__button__up-padding; padding: $crispy__button__up-padding;


+ 1
- 1
src/scss/components/_table.scss View File

@ -26,7 +26,7 @@ $crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default
$crispy__table__th__border-width: 2px !default; $crispy__table__th__border-width: 2px !default;
$crispy__table__color: $crispy__color-text !default; $crispy__table__color: $crispy__color-text !default;
$crispy__table__striped__background-color: lighten($crispy__color-text, 4%) !default;
$crispy__table__striped__background-color: lighten($crispy__color-text, 75%) !default;
@mixin crispy__table() { @mixin crispy__table() {
.table { .table {


+ 4
- 2
src/scss/components/_typography.scss View File

@ -1,13 +1,13 @@
/** /**
* *
* *
* @author Björn Hase
* @author Björn Hase
* *
*/ */
@mixin crispy__typography() { @mixin crispy__typography() {
.code {
code {
font-family: monospace, monospace; font-family: monospace, monospace;
font-size: 1em; font-size: 1em;
white-space: pre; white-space: pre;
@ -18,5 +18,7 @@
padding: 10px 20px; padding: 10px 20px;
border: 1px solid #d4d4d4; border: 1px solid #d4d4d4;
background-color: #f9f9f9; background-color: #f9f9f9;
margin: 0 0 $crispy__margin;
} }
} }

+ 7
- 6
src/scss/crispy.scss View File

@ -5,18 +5,19 @@
'config', 'config',
'base', 'base',
'helpers/helpers',
'components/button', 'components/button',
'components/typography',
'components/heading', 'components/heading',
'components/icon', 'components/icon',
'components/table';
'components/table',
@include crispy__align();
@include crispy__margin();
@include crispy__background-color();
'helpers/helpers';
@include crispy__button(); @include crispy__button();
@include crispy__heading(); @include crispy__heading();
@include crispy__table(); @include crispy__table();
@include crispy__typography(); @include crispy__typography();
@include crispy__align();
@include crispy__margin();
@include crispy__background-color();

Write Preview
Loading…
Cancel
Save