From 5b11c23cd8f15ce62a803cf9b39ba20ac7c5201d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Sun, 17 May 2020 16:29:13 +0200 Subject: [PATCH] adding --- README.md | 3 +- dist/crispy-all.css | 1 + dist/crispy-minimal.css | 1 + dist/crispy_all.css | 1 - dist/crispy_minimal.css | 1 - dist/example/getstarted.html | 938 ++++ dist/example/index.html | 960 +--- dist/example/styles.css | 2 +- mix-manifest.json | 4 +- package-lock.json | 3903 ++++++++--------- package.json | 11 +- src/_core.scss | 220 +- src/_modifiers.scss | 54 +- src/_normalize.scss | 341 ++ src/_variables.scss | 96 +- src/components/_button.scss | 18 +- src/components/_code.scss | 28 +- src/components/_field.scss | 10 +- src/components/_group.scss | 20 +- src/components/_hero.scss | 14 +- src/components/_icon.scss | 26 +- src/components/_media.scss | 13 +- src/components/_modal.scss | 20 +- src/components/_overlay.scss | 13 +- src/components/_panel.scss | 21 +- src/components/_progress.scss | 24 +- src/components/_table.scss | 43 +- src/{crispy_all.scss => crispy-all.scss} | 1 - ...rispy_minimal.scss => crispy-minimal.scss} | 1 - src/crispy.scss | 7 +- src/example/components/_button.scss | 16 - src/example/site/_footer.scss | 14 - src/example/site/_header.scss | 18 +- src/example/styles.scss | 10 +- webpack.mix.js | 27 +- 35 files changed, 3683 insertions(+), 3197 deletions(-) create mode 100644 dist/crispy-all.css create mode 100644 dist/crispy-minimal.css delete mode 100644 dist/crispy_all.css delete mode 100644 dist/crispy_minimal.css create mode 100644 dist/example/getstarted.html create mode 100644 src/_normalize.scss rename src/{crispy_all.scss => crispy-all.scss} (93%) rename src/{crispy_minimal.scss => crispy-minimal.scss} (67%) delete mode 100644 src/example/components/_button.scss delete mode 100644 src/example/site/_footer.scss diff --git a/README.md b/README.md index b3464e7..5a74fe5 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# Crispy - Lightweight CSS / SCSS Framework +# Lightweight CSS Framework for Building Apps and Websites ## Installation @@ -26,7 +26,6 @@ Now include Mixins you need. Components and Modifiziers only works if you includ @include crispy__code(); @include crispy__field(); @include crispy__group(); -@include crispy__heading(); @include crispy__hero(); @include crispy__icon(); @include crispy__media(); diff --git a/dist/crispy-all.css b/dist/crispy-all.css new file mode 100644 index 0000000..e0d58ef --- /dev/null +++ b/dist/crispy-all.css @@ -0,0 +1 @@ +html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 1em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.8em 1.2em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1em}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 1em}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:.9rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5{line-height:1.4}h6{line-height:1.618}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.5rem}}@media only screen and (min-width:1600px){.h1,h1{font-size:2.75rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2rem}}@media only screen and (min-width:1600px){.h2,h2{font-size:2.2rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:1.75rem}}@media only screen and (min-width:1600px){.h3,h3{font-size:1.925rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.5rem}}@media only screen and (min-width:1600px){.h4,h4{font-size:1.65rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.25rem}}@media only screen and (min-width:1600px){.h5,h5{font-size:1.375rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1rem}}@media only screen and (min-width:1600px){.h6,h6{font-size:1.1rem}}body,button,input,optgroup,select,textarea{font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400}button,input,optgroup,select,textarea{font-size:.9em;line-height:1.4}body{color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{font-size:1rem}}@media only screen and (min-width:1600px){body{font-size:1.1rem}}@media only screen and (min-width:992px){body{line-height:1.618}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem!important}}@media only screen and (min-width:1600px){.text-size-default{font-size:1.1rem!important}}.text-size-small{font-size:.72rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8rem!important}}@media only screen and (min-width:1600px){.text-size-small{font-size:.88rem!important}}.text-size-medium{font-size:.99rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.1rem!important}}@media only screen and (min-width:1600px){.text-size-medium{font-size:1.21rem!important}}.text-size-large{font-size:1.17rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.3rem!important}}@media only screen and (min-width:1600px){.text-size-large{font-size:1.43rem!important}}.text-size-big{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.5rem!important}}@media only screen and (min-width:1600px){.text-size-big{font-size:1.65rem!important}}.text-size-mega{font-size:1.62rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:1.8rem!important}}@media only screen and (min-width:1600px){.text-size-mega{font-size:1.98rem!important}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:.75em!important}.margin-left-1{margin-left:.75em!important}.margin-bottom-1{margin-bottom:.75em!important}.margin-right-1{margin-right:.75em!important}.padding-top-1{padding-top:.75em!important}.padding-left-1{padding-left:.75em!important}.padding-bottom-1{padding-bottom:.75em!important}.padding-right-1{padding-right:.75em!important}.margin-top-2{margin-top:1.5em!important}.margin-left-2{margin-left:1.5em!important}.margin-bottom-2{margin-bottom:1.5em!important}.margin-right-2{margin-right:1.5em!important}.padding-top-2{padding-top:1.5em!important}.padding-left-2{padding-left:1.5em!important}.padding-bottom-2{padding-bottom:1.5em!important}.padding-right-2{padding-right:1.5em!important}.margin-top-3{margin-top:2.25em!important}.margin-left-3{margin-left:2.25em!important}.margin-bottom-3{margin-bottom:2.25em!important}.margin-right-3{margin-right:2.25em!important}.padding-top-3{padding-top:2.25em!important}.padding-left-3{padding-left:2.25em!important}.padding-bottom-3{padding-bottom:2.25em!important}.padding-right-3{padding-right:2.25em!important}.margin-top-4{margin-top:3em!important}.margin-left-4{margin-left:3em!important}.margin-bottom-4{margin-bottom:3em!important}.margin-right-4{margin-right:3em!important}.padding-top-4{padding-top:3em!important}.padding-left-4{padding-left:3em!important}.padding-bottom-4{padding-bottom:3em!important}.padding-right-4{padding-right:3em!important}.margin-top-5{margin-top:3.75em!important}.margin-left-5{margin-left:3.75em!important}.margin-bottom-5{margin-bottom:3.75em!important}.margin-right-5{margin-right:3.75em!important}.padding-top-5{padding-top:3.75em!important}.padding-left-5{padding-left:3.75em!important}.padding-bottom-5{padding-bottom:3.75em!important}.padding-right-5{padding-right:3.75em!important}.margin-top-6{margin-top:4.5em!important}.margin-left-6{margin-left:4.5em!important}.margin-bottom-6{margin-bottom:4.5em!important}.margin-right-6{margin-right:4.5em!important}.padding-top-6{padding-top:4.5em!important}.padding-left-6{padding-left:4.5em!important}.padding-bottom-6{padding-bottom:4.5em!important}.padding-right-6{padding-right:4.5em!important}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;padding:.25em 1em .3em}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;padding:.8em 1.2em;background-color:#f7f7f7;margin:0 0 1em}.code,.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 1em}.field__select,.field__text{display:block;width:100%;line-height:1.618;padding:6px 8px;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1rem;font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.25em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.25em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none}.group,.group li{margin:0;padding:0}.group--horizontal .group__item{display:inline-block}.group--separate .group__item:after{margin:0 .3em;content:"/"}.group--separate .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.1em;height:1.1em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}@media only screen and (min-width:992px){.icon{line-height:1.618}}.button .icon,a .icon{margin:-.2em 0 0}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;max-width:50%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:1em;transform:translate(0)}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.8em 1.2em}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{padding:.8em 1.2em;text-align:left;border-bottom:1px solid #dfdfdf}.table th{border-bottom-width:2px} \ No newline at end of file diff --git a/dist/crispy-minimal.css b/dist/crispy-minimal.css new file mode 100644 index 0000000..0ef8f36 --- /dev/null +++ b/dist/crispy-minimal.css @@ -0,0 +1 @@ +html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 1em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.8em 1.2em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1em}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 1em}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:.9rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5{line-height:1.4}h6{line-height:1.618}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.5rem}}@media only screen and (min-width:1600px){.h1,h1{font-size:2.75rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2rem}}@media only screen and (min-width:1600px){.h2,h2{font-size:2.2rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:1.75rem}}@media only screen and (min-width:1600px){.h3,h3{font-size:1.925rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.5rem}}@media only screen and (min-width:1600px){.h4,h4{font-size:1.65rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.25rem}}@media only screen and (min-width:1600px){.h5,h5{font-size:1.375rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1rem}}@media only screen and (min-width:1600px){.h6,h6{font-size:1.1rem}}body,button,input,optgroup,select,textarea{font-family:BlinkMacSystemFont,-apple-system,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400}button,input,optgroup,select,textarea{font-size:.9em;line-height:1.4}body{color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{font-size:1rem}}@media only screen and (min-width:1600px){body{font-size:1.1rem}}@media only screen and (min-width:992px){body{line-height:1.618}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem!important}}@media only screen and (min-width:1600px){.text-size-default{font-size:1.1rem!important}}.text-size-small{font-size:.72rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8rem!important}}@media only screen and (min-width:1600px){.text-size-small{font-size:.88rem!important}}.text-size-medium{font-size:.99rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.1rem!important}}@media only screen and (min-width:1600px){.text-size-medium{font-size:1.21rem!important}}.text-size-large{font-size:1.17rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.3rem!important}}@media only screen and (min-width:1600px){.text-size-large{font-size:1.43rem!important}}.text-size-big{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.5rem!important}}@media only screen and (min-width:1600px){.text-size-big{font-size:1.65rem!important}}.text-size-mega{font-size:1.62rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:1.8rem!important}}@media only screen and (min-width:1600px){.text-size-mega{font-size:1.98rem!important}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:.75em!important}.margin-left-1{margin-left:.75em!important}.margin-bottom-1{margin-bottom:.75em!important}.margin-right-1{margin-right:.75em!important}.padding-top-1{padding-top:.75em!important}.padding-left-1{padding-left:.75em!important}.padding-bottom-1{padding-bottom:.75em!important}.padding-right-1{padding-right:.75em!important}.margin-top-2{margin-top:1.5em!important}.margin-left-2{margin-left:1.5em!important}.margin-bottom-2{margin-bottom:1.5em!important}.margin-right-2{margin-right:1.5em!important}.padding-top-2{padding-top:1.5em!important}.padding-left-2{padding-left:1.5em!important}.padding-bottom-2{padding-bottom:1.5em!important}.padding-right-2{padding-right:1.5em!important}.margin-top-3{margin-top:2.25em!important}.margin-left-3{margin-left:2.25em!important}.margin-bottom-3{margin-bottom:2.25em!important}.margin-right-3{margin-right:2.25em!important}.padding-top-3{padding-top:2.25em!important}.padding-left-3{padding-left:2.25em!important}.padding-bottom-3{padding-bottom:2.25em!important}.padding-right-3{padding-right:2.25em!important}.margin-top-4{margin-top:3em!important}.margin-left-4{margin-left:3em!important}.margin-bottom-4{margin-bottom:3em!important}.margin-right-4{margin-right:3em!important}.padding-top-4{padding-top:3em!important}.padding-left-4{padding-left:3em!important}.padding-bottom-4{padding-bottom:3em!important}.padding-right-4{padding-right:3em!important}.margin-top-5{margin-top:3.75em!important}.margin-left-5{margin-left:3.75em!important}.margin-bottom-5{margin-bottom:3.75em!important}.margin-right-5{margin-right:3.75em!important}.padding-top-5{padding-top:3.75em!important}.padding-left-5{padding-left:3.75em!important}.padding-bottom-5{padding-bottom:3.75em!important}.padding-right-5{padding-right:3.75em!important}.margin-top-6{margin-top:4.5em!important}.margin-left-6{margin-left:4.5em!important}.margin-bottom-6{margin-bottom:4.5em!important}.margin-right-6{margin-right:4.5em!important}.padding-top-6{padding-top:4.5em!important}.padding-left-6{padding-left:4.5em!important}.padding-bottom-6{padding-bottom:4.5em!important}.padding-right-6{padding-right:4.5em!important} \ No newline at end of file diff --git a/dist/crispy_all.css b/dist/crispy_all.css deleted file mode 100644 index 9d19fec..0000000 --- a/dist/crispy_all.css +++ /dev/null @@ -1 +0,0 @@ -html{font-size:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:.375em 0 1.25em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.125em .5em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1.25em 2.5em}ol ol,ul ul{margin-top:.15625em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 1.25em}figcaption{margin:1.25em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:1.25em 0}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .5em}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.5rem}}@media only screen and (min-width:1600px){.h1,h1{font-size:3rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2rem}}@media only screen and (min-width:1600px){.h2,h2{font-size:2.4rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:1.75rem}}@media only screen and (min-width:1600px){.h3,h3{font-size:2.1rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.5rem}}@media only screen and (min-width:1600px){.h4,h4{font-size:1.8rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.25rem}}@media only screen and (min-width:1600px){.h5,h5{font-size:1.5rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1rem}}@media only screen and (min-width:1600px){.h6,h6{font-size:1.2rem}}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;font-size:.9rem;line-height:1.4;color:#363636;background-color:#fff;direction:ltr}@media only screen and (min-width:992px){body{font-size:1rem}}@media only screen and (min-width:1600px){body{font-size:1.1rem}}@media only screen and (min-width:992px){body{line-height:1.618}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-weight-light{font-weight:lighter!important}.text-weight-normal{font-weight:400!important}.text-weight-medium{font-weight:medium!important}.text-weight-bold{font-weight:bolder!important}.text-smaller{font-size:80%!important}.text-size-default{font-size:.9rem}@media only screen and (min-width:992px){.text-size-default{font-size:1rem}}@media only screen and (min-width:1600px){.text-size-default{font-size:1.1rem}}.text-size-small{font-size:.7875rem}@media only screen and (min-width:992px){.text-size-small{font-size:.875rem}}@media only screen and (min-width:1600px){.text-size-small{font-size:.9625rem}}.text-size-medium{font-size:1.125rem}@media only screen and (min-width:992px){.text-size-medium{font-size:1.25rem}}@media only screen and (min-width:1600px){.text-size-medium{font-size:1.375rem}}.text-size-large{font-size:1.35rem}@media only screen and (min-width:992px){.text-size-large{font-size:1.5rem}}@media only screen and (min-width:1600px){.text-size-large{font-size:1.65rem}}.text-size-big{font-size:1.575rem}@media only screen and (min-width:992px){.text-size-big{font-size:1.75rem}}@media only screen and (min-width:1600px){.text-size-big{font-size:1.925rem}}.text-size-mega{font-size:1.8rem}@media only screen and (min-width:992px){.text-size-mega{font-size:2rem}}@media only screen and (min-width:1600px){.text-size-mega{font-size:2.2rem}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:.625em!important}.margin-left-1{margin-left:.625em!important}.margin-bottom-1{margin-bottom:.625em!important}.margin-right-1{margin-right:.625em!important}.padding-top-1{padding-top:.625em!important}.padding-left-1{padding-left:.625em!important}.padding-bottom-1{padding-bottom:.625em!important}.padding-right-1{padding-right:.625em!important}.margin-top-2{margin-top:1.25em!important}.margin-left-2{margin-left:1.25em!important}.margin-bottom-2{margin-bottom:1.25em!important}.margin-right-2{margin-right:1.25em!important}.padding-top-2{padding-top:1.25em!important}.padding-left-2{padding-left:1.25em!important}.padding-bottom-2{padding-bottom:1.25em!important}.padding-right-2{padding-right:1.25em!important}.margin-top-3{margin-top:1.875em!important}.margin-left-3{margin-left:1.875em!important}.margin-bottom-3{margin-bottom:1.875em!important}.margin-right-3{margin-right:1.875em!important}.padding-top-3{padding-top:1.875em!important}.padding-left-3{padding-left:1.875em!important}.padding-bottom-3{padding-bottom:1.875em!important}.padding-right-3{padding-right:1.875em!important}.margin-top-4{margin-top:2.5em!important}.margin-left-4{margin-left:2.5em!important}.margin-bottom-4{margin-bottom:2.5em!important}.margin-right-4{margin-right:2.5em!important}.padding-top-4{padding-top:2.5em!important}.padding-left-4{padding-left:2.5em!important}.padding-bottom-4{padding-bottom:2.5em!important}.padding-right-4{padding-right:2.5em!important}.margin-top-5{margin-top:3.125em!important}.margin-left-5{margin-left:3.125em!important}.margin-bottom-5{margin-bottom:3.125em!important}.margin-right-5{margin-right:3.125em!important}.padding-top-5{padding-top:3.125em!important}.padding-left-5{padding-left:3.125em!important}.padding-bottom-5{padding-bottom:3.125em!important}.padding-right-5{padding-right:3.125em!important}.button{position:relative;display:inline-block;text-decoration:none;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.625em 1.25em}.button--wide{width:100%}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{font-family:monospace,monospace;white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;padding:.625em 1.25em;background-color:#f9f9f9;margin:0 0 1.25em}.code,.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 1.25em}.field__select,.field__text{display:block;width:100%;line-height:1.618;padding:toEm(6px 8px);color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:1rem;font-family:Arial,Helvetica,Neue Helvetica,sans-serif}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #b3b2af}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.25em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:1.25em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.25em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none}.group,.group li{margin:0;padding:0}.group--horizontal .group__item{display:inline-block}.group--separate .group__item:after{margin:0 1.25em;content:"/"}.group--separate .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.125em;height:1.125em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}@media only screen and (min-width:992px){.icon{line-height:1.618}}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.img-wide{width:100%}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;max-width:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:1em;transform:translate(0)}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f9f9f9}.panel__inner{padding:.625em 1.25em}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f5f5f5}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{padding:.625em .9375em;text-align:left;border-bottom:1px solid #9c9c9c}.table th{border-bottom-width:2px} \ No newline at end of file diff --git a/dist/crispy_minimal.css b/dist/crispy_minimal.css deleted file mode 100644 index 8784538..0000000 --- a/dist/crispy_minimal.css +++ /dev/null @@ -1 +0,0 @@ -html{font-size:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:.375em 0 1.25em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.125em .5em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1.25em 2.5em}ol ol,ul ul{margin-top:.15625em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 1.25em}figcaption{margin:1.25em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:1.25em 0}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .5em}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.5rem}}@media only screen and (min-width:1600px){.h1,h1{font-size:3rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2rem}}@media only screen and (min-width:1600px){.h2,h2{font-size:2.4rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:1.75rem}}@media only screen and (min-width:1600px){.h3,h3{font-size:2.1rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.5rem}}@media only screen and (min-width:1600px){.h4,h4{font-size:1.8rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.25rem}}@media only screen and (min-width:1600px){.h5,h5{font-size:1.5rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1rem}}@media only screen and (min-width:1600px){.h6,h6{font-size:1.2rem}}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;font-size:.9rem;line-height:1.4;color:#363636;background-color:#fff;direction:ltr}@media only screen and (min-width:992px){body{font-size:1rem}}@media only screen and (min-width:1600px){body{font-size:1.1rem}}@media only screen and (min-width:992px){body{line-height:1.618}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-weight-light{font-weight:lighter!important}.text-weight-normal{font-weight:400!important}.text-weight-medium{font-weight:medium!important}.text-weight-bold{font-weight:bolder!important}.text-smaller{font-size:80%!important}.text-size-default{font-size:.9rem}@media only screen and (min-width:992px){.text-size-default{font-size:1rem}}@media only screen and (min-width:1600px){.text-size-default{font-size:1.1rem}}.text-size-small{font-size:.7875rem}@media only screen and (min-width:992px){.text-size-small{font-size:.875rem}}@media only screen and (min-width:1600px){.text-size-small{font-size:.9625rem}}.text-size-medium{font-size:1.125rem}@media only screen and (min-width:992px){.text-size-medium{font-size:1.25rem}}@media only screen and (min-width:1600px){.text-size-medium{font-size:1.375rem}}.text-size-large{font-size:1.35rem}@media only screen and (min-width:992px){.text-size-large{font-size:1.5rem}}@media only screen and (min-width:1600px){.text-size-large{font-size:1.65rem}}.text-size-big{font-size:1.575rem}@media only screen and (min-width:992px){.text-size-big{font-size:1.75rem}}@media only screen and (min-width:1600px){.text-size-big{font-size:1.925rem}}.text-size-mega{font-size:1.8rem}@media only screen and (min-width:992px){.text-size-mega{font-size:2rem}}@media only screen and (min-width:1600px){.text-size-mega{font-size:2.2rem}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-left-0{margin-left:0!important}.margin-bottom-0{margin-bottom:0!important}.margin-right-0{margin-right:0!important}.padding-top-0{padding-top:0!important}.padding-left-0{padding-left:0!important}.padding-bottom-0{padding-bottom:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:.625em!important}.margin-left-1{margin-left:.625em!important}.margin-bottom-1{margin-bottom:.625em!important}.margin-right-1{margin-right:.625em!important}.padding-top-1{padding-top:.625em!important}.padding-left-1{padding-left:.625em!important}.padding-bottom-1{padding-bottom:.625em!important}.padding-right-1{padding-right:.625em!important}.margin-top-2{margin-top:1.25em!important}.margin-left-2{margin-left:1.25em!important}.margin-bottom-2{margin-bottom:1.25em!important}.margin-right-2{margin-right:1.25em!important}.padding-top-2{padding-top:1.25em!important}.padding-left-2{padding-left:1.25em!important}.padding-bottom-2{padding-bottom:1.25em!important}.padding-right-2{padding-right:1.25em!important}.margin-top-3{margin-top:1.875em!important}.margin-left-3{margin-left:1.875em!important}.margin-bottom-3{margin-bottom:1.875em!important}.margin-right-3{margin-right:1.875em!important}.padding-top-3{padding-top:1.875em!important}.padding-left-3{padding-left:1.875em!important}.padding-bottom-3{padding-bottom:1.875em!important}.padding-right-3{padding-right:1.875em!important}.margin-top-4{margin-top:2.5em!important}.margin-left-4{margin-left:2.5em!important}.margin-bottom-4{margin-bottom:2.5em!important}.margin-right-4{margin-right:2.5em!important}.padding-top-4{padding-top:2.5em!important}.padding-left-4{padding-left:2.5em!important}.padding-bottom-4{padding-bottom:2.5em!important}.padding-right-4{padding-right:2.5em!important}.margin-top-5{margin-top:3.125em!important}.margin-left-5{margin-left:3.125em!important}.margin-bottom-5{margin-bottom:3.125em!important}.margin-right-5{margin-right:3.125em!important}.padding-top-5{padding-top:3.125em!important}.padding-left-5{padding-left:3.125em!important}.padding-bottom-5{padding-bottom:3.125em!important}.padding-right-5{padding-right:3.125em!important} \ No newline at end of file diff --git a/dist/example/getstarted.html b/dist/example/getstarted.html new file mode 100644 index 0000000..e5e88f9 --- /dev/null +++ b/dist/example/getstarted.html @@ -0,0 +1,938 @@ + + + + + + + Get Started | Crispy CSS + + + + + + +
+
+
+
+ +
+
+
+
+
+
+
+ +

+ Get started! +

+ +

Installation

+ 
npm install crispy-css
+ +

How it works

+ +

SCSS

+ 
@import
+    "crispy";
+

Now include Mixins you need. Components and Modifiziers only works if you include them,

+ 
@include crispy__core();
+@include crispy__modifiers();
+
+// components
+@include crispy__button();
+@include crispy__code();
+@include crispy__field();
+@include crispy__group();
+@include crispy__hero();
+@include crispy__icon();
+@include crispy__media();
+@include crispy__modal();
+@include crispy__overlay();
+@include crispy__panel();
+@include crispy__progress();
+@include crispy__table();
+

For Custom Variables add a File before importing Crispy,

+ 
@import
+    "config",
+    "crispy";
+ +

If you need all, mixins will be included,

+ 
@import
+    "crispy-all";
+ +

Only need Core and Modifiziers?

+ 
@import
+    "crispy-minimal";
+ +

CSS

+

For using CSS you can use crispy-all.css for all Styles or crispy-mininmal.css without Components.

+ +

Example

+

+ You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you. +

+

Site

+

+ Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand. +

+

Templates

+

+ Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components. +

+ + +
+

+ Typography +

+ + +

a

+

Html:

+ 
<a href=""></a>
+

+ Color of Text is set by $crispy__color-primary. Hover is set by + $crispy__color-text +

+ + +

abbr

+

Html:

+ 
<abbr title=""></abbr>
+

+ Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats +

+ + +

blockquote

+

Html:

+ 
<blockquote></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. +
+ + +

hr

+

Html:

+ 
<hr>
+

+

+

+ + +

paragraph

+

Html:

+ 
<p></p>
+

+ Glossier viral occupy mixtape pok pok. +

+ + +

mark

+

Html:

+ 
<mark></mark>
+

+ Pug before they four loko Deep v bespoke +

+ + +

list

+

Html:

+ 
<ul>
+    <li>item 1</li>
+    <li>item 2
+        <ul>
+            <li>child item 1</li>
+            <li>child item 2</li>
+        </ul>
+    </li>
+</ul>
+<ol>
+    <li>item 1</li>
+    <li>item 2</li>
+</ol>
+<dl>
+    <dt>defined title 1</dt>
+    <dd>defined item 1</dd>
+</dl>
+
    +
  • item 1
    • +
  • + item 2 +
      +
    • child item 1
      • +
    • child item 2
      • +
    +
    • +
+
    +
  1. item 1
    2. +
  2. item 2
    3. +
+
+
defined title 1
+
defined item 1
+
+ + +

+ Heading +

+

Html:

+ 
<h2></h2>
+    <h2 class="h3"></h2>
+

Sass:

+ 
$crispy__heading__font-sizes: (
+        'h1': 40px,
+        'h2': 36px,
+        'h3': 32px,
+        'h4': 28px,
+        'h5': 24px,
+        'h6': 20px
+    ) !default;
+ +

Heading h1

+

Heading h2

+

Heading h3

+

Heading h4

+
Heading h5
+
Heading h6
+ + +
+

+ Components +

+ + +

+ Button +

+

Html:

+ 
<button class="button"></button>
+<button class="button width-100"></button>
+ + + + +

+ Code +

+

Html:

+ 
<pre class="code"><code></code></pre>
+ + +

+ Group +

+

Html:

+ 
<nav>
+    <ul class="group">
+        <li class="group__item">first item</li>
+        <li class="group__item">second item</li>
+        <li class="group__item">third item</li>
+    </ul>
+</nav>
+
+ +
+

Html:

+ 
<nav>
+    <ul class="group group--horizontal group--separate">
+        <li class="group__item">first item</li>
+        <li class="group__item">second item</li>
+        <li class="group__item">third item</li>
+    </ul>
+</nav>
+
+ +
+ + +

+ Hero +

+

Html:

+ 
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
+
+ 
<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
+
+ 
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
+
+ + +

+ Icon +

+

+ To change Size you can use "text-size-*" that you find in the modifiers. +

+

Html:

+ 
<svg class="icon text-size-small">
+    <use xlink:href="symbol-defs.svg#icon-minus"></use>
+</svg>
+
+
+ + + + + +
+
+
+
+ + +
+
+

+ To change Color you can use "icon-color-*". +

+

Html:

+ 
<svg class="icon icon-color-danger">
+    <use xlink:href="symbol-defs.svg#icon-minus"></use>
+</svg>
+
+
+ +
+
+ + +

+ Panel +

+

Html:

+ 
<div class="panel">
+    <div class="panel__inner">
+        Lorem Ipsum
+    </div>
+</div>
+
+
+ Lorem Ipsum +
+
+ + +

+ Progress +

+

Html:

+ 
<div class="progress">
+    <div class="progress__inner" style="width: 80%">
+    </div>
+</div>
+
+
+
+
+ + +

+ Modal +

+

Html:

+ 
<div class="modal modal--bottom width-100">
+    <div class="panel">
+        <div class="panel__inner">
+            Lorem Ipsum
+        </div>
+    </div>
+</div>
+
+
+
+
+ .modal--top-left +
+
+
+
+
+
+ .modal--top-right +
+
+
+
+
+
+ .modal +
+
+
+
+
+
+ .modal--bottom-left +
+
+
+
+
+
+ .modal--bottom-right +
+
+
+
+ + +

+ Table +

+

Html:

+ 
<table class="table table--striped">
+    <thead>
+        <tr>
+            <th></th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td></td>
+        </tr>
+    </tbody>
+</table>
+ + + + + + + + + + + + + + + + + + + + + + +
nameage
Mr. Brown43
Mr. Magenta32
Mr. White45
+ + +

+ Checkbox +

+
+ + + + +
+
+ + +
+ error item 1 +
+
+ + +

+ Radio +

+
+ +
+ + +
+ + +
+ +
+ + +
+ error item 1 +
+
+ + +

+ Select +

+
+ +
+
+ +
+ + +

+ Input / Textarea +

+
+ +
+
+ +
+ error item 1 +
+
+
+ +
+ error item 1 +
+
+
+ +
+
+ +
+ error item 1 +
+
+ + +
+

+ Functions +

+ + +

+ stripUnit() +

+

Sass:

+ 
stripUnit(10px);
+

+ Returns value without unit. +

+ + +

+ zIndex(name) +

+

Sass:

+ 
zIndex('modal');
+

+ Returns value from $crispy__z-index. +

+

Sass:

+ 
$crispy__z-index: (
+    'overlay': 90,
+    'modal'  : 100
+);
+ + +
+

+ Modifiziers +

+ + +

+ Margin & Padding +

+

+ Adding margin-top, -left, -bottom and -right and the same for padding. +

+

Sass:

+ 
+$crispy__modifiers__spacing: 0.75em;
+$crispy__modifiers__spacing__steps: 6;
+
+ +

Html:

+ 
<div class="panel">margin-bottom-0</div>
+<div class="margin-bottom-1">margin-bottom-1</div>
+<div class="margin-bottom-2">margin-bottom-2</div>
+<div class="margin-bottom-3">margin-bottom-3</div>
+<div class="margin-bottom-4">margin-bottom-4</div>
+<div class="margin-bottom-5">margin-bottom-5</div>
+
margin-bottom-0
+
margin-bottom-1
+
margin-bottom-2
+
margin-bottom-3
+
margin-bottom-4
+
margin-bottom-5
+ +

+ Also set padding and margin to 0, +

+ + 
<div class="marginless"</div>
+<div class="paddingless"</div>
+ + +

+ Media +

+ 
<img class="img-responsive" src="https://picsum.photos/400" />
+<figure>
+    <img class="img-responsive" src="https://picsum.photos/400" />
+    <figcaption class="text-center">Lorem Ipsum</figcaption>
+</figure>
+<div class="video-responsive" style="height: 280px;">
+    <iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361"></iframe>
+</div>
+
+
+ +
+
+
+ +
Lorem Ipsum
+
+
+
+ + +

+ Typography +

+ 
<div class="text-left"></div>
+<div class="text-center"></div>
+<div class="text-right"></div>
+<div class="text-justify"></div>
+<div class="text-italic"></div>
+<div class="text-light"></div>
+<div class="text-normal"></div>
+<div class="text-medium"></div>
+<div class="text-bold"></div>
+<div class="text-capitalize"></div>
+<div class="text-uppercase"></div>
+<div class="text-lowercase"></div>
+<div class="text-smaller"></div>
+<div class="text-crossed"></div>
+<div class="text-underline"></div>
+ +

+ Also there are classes for, +

+
    +
  • text-size-* with $crispy__font-sizes for "font-size"
    • +
  • text-color-* with $crispy__colors for "color"
    • +
  • background-color-* with $crispy__font-sizes for "background-color"
    • +
+ + +

+ Float +

+ 
<div class="float-left"></div>
+<div class="float-right"></div>
+<div class="float-none"></div>
+<div class="centered"></div>
+<div class="clearfix"></div>
+ + +

+ Position +

+ 
<div class="relative"></div>
+<div class="absolute"></div>
+<div class="fixed"></div>
+ + +

+ Border +

+ 
<div class="bordered"></div>
+<div class="rounded"></div>
+<div class="borderless"></div>
+<div class="radiusless"></div>
+ + +

+ Visibility +

+ 
<div class="hidden"></div>
+<div class="visible"></div>
+<div class="visible visible--inline"></div>
+<div class="visible visible--inline-block"></div>
+ + +

+ Width +

+

Sass:

+ 
$crispy__width: (
+    '25' : 25%,
+    '50' : 50%,
+    '75' : 75%,
+    '100': 100%
+)
+ +

Html:

+ 
<div class="panel width-25">width-25</div>
+<div class="width-50">width-50</div>
+<div class="width-75">width-75</div>
+<div class="width-100">width-100</div>
+
width-25
+
width-50
+
width-75
+
width-100
+ + +
+

+ Mixins +

+ + +

+ Triangle +

+

Sass:

+ 
.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
+    display: block;
+}
+
+.triangle-left {
+    @include triangle('left', $crispy__color-primary);
+}
+
+.triangle-right {
+    @include triangle('right', $crispy__color-primary);
+}
+
+.triangle-top {
+    @include triangle('top', $crispy__color-primary);
+}
+
+.triangle-bottom {
+    @include triangle('bottom', $crispy__color-primary);
+}
+
+

+ + + + +

+ + +

+ Media Queries +

+

+ These @mixins were used with the Breakpoints from http://reflexgrid.com/docs/. + Reflex-Grid is also used as grid for this Site. +

+
    +
  • xs 576px
    • +
  • sm 768px
    • +
  • md 992px
    • +
  • lg 1200px
    • +
  • xlg 1600px
    • +
+

Html:

+ 
<div class="sm">sm</div>
+<div class="md">md</div>
+<div class="md-only">md-only</div>
+<div class="lg-only">lg-only</div>
+

Sass:

+ 
.sm, .md, .md-only, .lg-only {
+    display: none;
+}
+
+.sm {
+    @include crispy__media-sm() {
+        display: block;
+    }
+}
+
+.md {
+    @include crispy__media-md() {
+        display: block;
+    }
+}
+
+.md-only {
+    @include crispy__media-md-only() {
+        display: block;
+    }
+}
+
+.lg-only {
+    @include crispy__media-lg-only() {
+        display: block;
+    }
+}
+
+
+
sm
+
+
+
md
+
+
+
md-only
+
+
+
lg-only
+
+
+
+
+
+ + - Crispy CSS | Lightweight SCSS Framework - + Crispy CSS | Lightweight CSS Framework for Building Apps and Websites + @@ -18,15 +18,16 @@
-

-

+
- Crispy CSS 3.0.0 + Crispy CSS

-

- Lightweight SCSS Framework + v3.0.0 +

+ Lightweight CSS Framework for Building Apps and Websites

@@ -36,50 +37,49 @@
-
+

- +
Lightweight

-

+

Only what you need! Basic Settings and Styles to create UI-Elements for Websites and Apps. Less Code, less Size and that means Crispy CSS is simple and has less loading Time!

-
+

- + -
Mixins and Functions
+
Ugly

-

- A small amount of Usefull Mixins and Functions to support your Work. - That make it easer to create new Styles. +

+ Youre are right, these Elements are not

-
+

- +
Customizable

-

+

There are many Frameworks that really great, but if you want customize them, that can be a lot of work. Crispy CSS is great to build Styles for Layouts that are unusual.

-
+

@@ -88,7 +88,7 @@
Coding Style

-

+

Crispy CSS uses BEM for naming, but a simpler approach of it. BEM is good to show other Developers what classes are belong to a Component. @@ -96,912 +96,32 @@

-
-
- - -
-

Installation

- 
npm install crispy-css
- -

How it works

- -

SCSS

- 
@import
-    "crispy";
-

Now include Mixins you need. Components and Modifiziers only works if you include them,

- 
@include crispy__core();
-@include crispy__modifiers();
-
-// components
-@include crispy__button();
-@include crispy__code();
-@include crispy__field();
-@include crispy__group();
-@include crispy__hero();
-@include crispy__icon();
-@include crispy__media();
-@include crispy__modal();
-@include crispy__overlay();
-@include crispy__panel();
-@include crispy__progress();
-@include crispy__table();
-

For Custom Variables add a File before importing Crispy,

- 
@import
-    "variables",
-    "crispy";
- -

If you need all, mixins will be included,

- 
@import
-    "crispy_all";
- -

Only need Core and Modifiziers?

- 
@import
-    "crispy_minimal";
- -

CSS

-

For using CSS you can use crispy.css for all Styles or crispy_mininmal.css without Components.

- -

Example

-

- You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you. -

-

Site

-

- Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand. -

-

Templates

-

- Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components. -

- - -
-

- Typography -

- - -

a

-

Html:

- 
<a href=""></a>
-

- Color of Text is set by $crispy__color-primary. Hover is set by - $crispy__color-text -

- - -

abbr

-

Html:

- 
<abbr title=""></abbr>
-

- Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats -

- - -

blockquote

-

Html:

- 
<blockquote></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. -
- - -

hr

-

Html:

- 
<hr>
-

-

-

- - -

paragraph

-

Html:

- 
<p></p>
-

- Glossier viral occupy mixtape pok pok. -

- - -

mark

-

Html:

- 
<mark></mark>
-

- Pug before they four loko Deep v bespoke -

- - -

list

-

Html:

- 
<ul>
-    <li>item 1</li>
-    <li>item 2
-        <ul>
-            <li>child item 1</li>
-            <li>child item 2</li>
-        </ul>
-    </li>
-</ul>
-<ol>
-    <li>item 1</li>
-    <li>item 2</li>
-</ol>
-<dl>
-    <dt>defined title 1</dt>
-    <dd>defined item 1</dd>
-</dl>
-
    -
  • item 1
    • -
  • - item 2 -
      -
    • child item 1
      • -
    • child item 2
      • -
    -
    • -
-
    -
  1. item 1
    2. -
  2. item 2
    3. -
-
-
defined title 1
-
defined item 1
-
- - -
-

- Components -

- - -

- Button -

-

Html:

- 
<button class="button"></button>
-<button class="button button--wide"></button>
- - - - -

- Code -

-

Html:

- 
<pre class="code"><code></code></pre>
- - -

- Group -

-

Html:

- 
<nav>
-    <ul class="group">
-        <li class="group__item">first item</li>
-        <li class="group__item">second item</li>
-        <li class="group__item">third item</li>
-    </ul>
-</nav>
-
- -
-

Html:

- 
<nav>
-    <ul class="group group--horizontal group--separate">
-        <li class="group__item">first item</li>
-        <li class="group__item">second item</li>
-        <li class="group__item">third item</li>
-    </ul>
-</nav>
-
- -
- - -

- Heading -

-

Html:

- 
<h2></h2>
-<h2 class="h3"></h2>
-

Sass:

- 
$crispy__heading__font-sizes: (
-    'h1': 40px,
-    'h2': 36px,
-    'h3': 32px,
-    'h4': 28px,
-    'h5': 24px,
-    'h6': 20px
-) !default;
- -

Heading h1

-

Heading h2

-

Heading h3

-

Heading h4

-
Heading h5
-
Heading h6
- - -

- Hero -

-

Html:

- 
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
-
- 
<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
-
- 
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
-
- - -

- Icon -

-

- To change Size you can use "text-size-*" that you find in the modifiers. -

-

Html:

- 
<svg class="icon text-size-small">
-    <use xlink:href="symbol-defs.svg#icon-minus"></use>
-</svg>
-
-
- - - - - -
-
-
-
- - - -
-
-

- To change Color you can use "icon-color-*". -

-

Html:

- 
<svg class="icon icon-color-danger">
-    <use xlink:href="symbol-defs.svg#icon-minus"></use>
-</svg>
-
-
- -
-
- - -

- Panel -

-

Html:

- 
<div class="panel">
-    <div class="panel__inner">
-        Lorem Ipsum
-    </div>
-</div>
-
-
- Lorem Ipsum -
-
- - -

- Progress -

-

Html:

- 
<div class="progress">
-    <div class="progress__inner" style="width: 80%">
-    </div>
-</div>
-
-
-
-
- - -

- Modal -

-

Html:

- 
<div class="modal modal--bottom width-100">
-     <div class="panel">
-        <div class="panel__inner">
-            Lorem Ipsum
-        </div>
-    </div>
-</div>
-
-
-
-
- .modal--top-left -
-
-
-
-
-
- .modal--top-right -
-
-
-
-
-
- .modal -
-
-
-
-
-
- .modal--bottom-left -
-
-
-
-
-
- .modal--bottom-right -
-
-
-
- - -

- Table -

-

Html:

- 
<table class="table table--striped">
-    <thead>
-        <tr>
-            <th></th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <td></td>
-        </tr>
-    </tbody>
-</table>
- - - - - - - - - - - - - - - - - - - - - - -
nameage
Mr. Brown43
Mr. Magenta32
Mr. White45
- - -

- Checkbox -

-
- - - - -
-
- - -
- error item 1 -
-
- - -

- Radio -

-
- -
- - -
- - -
- -
- - -
- error item 1 -
-
- - -

- Select -

-
- -
-
- -
- - -

- Input / Textarea -

-
- -
-
- -
- error item 1 -
-
-
- -
- error item 1 -
-
-
- -
-
- -
- error item 1 -
-
- - -
-

- Functions -

- - -

- toEm()
- toRem() -

-

Sass:

- 
toEm(5px);
-toEm(10px 10px 0 0);
-toRem(10px 10px 0 0);
-
-

- Returns em and rem, accepts px and unitless values. -

- - -

- stripUnit() -

-

Sass:

- 
stripUnit(10px);
-

- Returns value without unit. -

- - -

- zIndex(name) -

-

Sass:

- 
zIndex('modal');
-

- Returns value from $crispy__z-index. -

-

Sass:

- 
$crispy__z-index: (
-    'overlay': 90,
-    'modal'  : 100
-);
- - -
-

- Modifiziers -

- - -

- Margin & Padding -

-

- Adding margin-top, -left, -bottom and -right and the same for padding. -

-

Sass:

- 
-$crispy__spacing: 15px;
-$crispy__spacing__steps: 7;
-
- -

Html:

- 
<div class="panel margin-bottom-0">margin-bottom-0</div>
-<div class="margin-bottom-1">margin-bottom-1</div>
-<div class="margin-bottom-2">margin-bottom-2</div>
-<div class="margin-bottom-3">margin-bottom-3</div>
-<div class="margin-bottom-4">margin-bottom-4</div>
-<div class="margin-bottom-5">margin-bottom-5</div>
-
margin-bottom-0
-
margin-bottom-1
-
margin-bottom-2
-
margin-bottom-3
-
margin-bottom-4
-
margin-bottom-5
- -

- Also set padding and margin to 0, -

- - 
<div class="marginless"</div>
-<div class="paddingless"</div>
- - -

- Media -

- 
<img class="img-responsive" src="https://picsum.photos/400" />
-<figure>
-    <img class="img-responsive" src="https://picsum.photos/400" />
-    <figcaption class="text-center">Lorem Ipsum</figcaption>
-</figure>
-<div class="video-responsive" style="height: 280px;">
-    <iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361"></iframe>
-</div>
-
-
- -
-
-
- -
Lorem Ipsum
-
-
-
- - -

- Typography -

- 
<div class="text-left"></div>
-<div class="text-center"></div>
-<div class="text-right"></div>
-<div class="text-justify"></div>
-<div class="text-italic"></div>
-<div class="text-weight-light"></div>
-<div class="text-weight-normal"></div>
-<div class="text-weight-medium"></div>
-<div class="text-weight-bold"></div>
-<div class="text-capitalize"></div>
-<div class="text-uppercase"></div>
-<div class="text-lowercase"></div>
-<div class="text-smaller"></div>
-<div class="text-crossed"></div>
-<div class="text-underline"></div>
- -

- Also there are classes for, -

-
    -
  • text-size-* with $crispy__font-sizes for "font-size"
    • -
  • text-color-* with $crispy__colors for "color"
    • -
  • background-color-* with $crispy__font-sizes for "background-color"
    • -
- - -

- Float -

- 
<div class="float-left"></div>
-<div class="float-right"></div>
-<div class="float-none"></div>
-<div class="centered"></div>
-<div class="clearfix"></div>
- - -

- Position -

- 
<div class="relative"></div>
-<div class="absolute"></div>
-<div class="fixed"></div>
- - -

- Border -

- 
<div class="bordered"></div>
-<div class="rounded"></div>
-<div class="borderless"></div>
-<div class="radiusless"></div>
- - -

- Visibility -

- 
<div class="hidden"></div>
-<div class="visible"></div>
-<div class="visible visible--inline"></div>
-<div class="visible visible--inline-block"></div>
- - -

- Width -

-

Sass:

- 
$crispy__width: (
-    '25' : 25%,
-    '50' : 50%,
-    '75' : 75%,
-    '100': 100%
-)
- -

Html:

- 
<div class="panel width-25">width-25</div>
-<div class="width-50">width-50</div>
-<div class="width-75">width-75</div>
-<div class="width-100">width-100</div>
-
width-25
-
width-50
-
width-75
-
width-100
- - -
-

- Mixins -

- - -

- Triangle -

-

Sass:

- 
.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
-    display: block;
-}
-
-.triangle-left {
-    @include triangle('left', $crispy__color-primary);
-}
-
-.triangle-right {
-    @include triangle('right', $crispy__color-primary);
-}
-
-.triangle-top {
-    @include triangle('top', $crispy__color-primary);
-}
-
-.triangle-bottom {
-    @include triangle('bottom', $crispy__color-primary);
-}
-
-

- - - - -

- - -

- Media Queries -

-

- These @mixins were used with the Breakpoints from http://reflexgrid.com/docs/. - Reflex-Grid is also used as grid for this Site. -

-
    -
  • xs 576px
    • -
  • sm 768px
    • -
  • md 992px
    • -
  • lg 1200px
    • -
  • xlg 1600px
    • -
-

Html:

- 
<div class="sm">sm</div>
-<div class="md">md</div>
-<div class="md-only">md-only</div>
-<div class="lg-only">lg-only</div>
-

Sass:

- 
.sm, .md, .md-only, .lg-only {
-    display: none;
-}
-
-.sm {
-    @include crispy__media-sm() {
-        display: block;
-    }
-}
-
-.md {
-    @include crispy__media-md() {
-        display: block;
-    }
-}
-
-.md-only {
-    @include crispy__media-md-only() {
-        display: block;
-    }
-}
-
-.lg-only {
-    @include crispy__media-lg-only() {
-        display: block;
-    }
-}
-
-
-
sm
-
-
-
md
-
-
-
md-only
-
-
-
lg-only
-
-
-
-
-
+
+ + Get started! + + + Visit on Github + +
+
-