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

refactoring

master
HerrHase 6 years ago
parent
56368d3d1e
commit
80715f2317
31 changed files with 597 additions and 297 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +14
    -1
      README.md
  2. +14
    -0
      demo/index.html
  3. +2
    -1
      package.json
  4. +0
    -36
      scss/components/_body.scss
  5. +0
    -34
      scss/components/_button.scss
  6. +0
    -14
      scss/components/_clearfix.scss
  7. +0
    -42
      scss/components/_heading.scss
  8. +0
    -47
      scss/components/_normalize.scss
  9. +0
    -26
      scss/components/_text-colors.scss
  10. +0
    -32
      scss/example.scss
  11. +68
    -0
      src/scss/_base.scss
  12. +23
    -0
      src/scss/_config.scss
  13. +0
    -0
      src/scss/_mixins.scss
  14. +49
    -0
      src/scss/components/_button.scss
  15. +43
    -0
      src/scss/components/_heading.scss
  16. +20
    -25
      src/scss/components/_icon.scss
  17. +2
    -5
      src/scss/components/_list.scss
  18. +55
    -0
      src/scss/components/_table.scss
  19. +0
    -0
      src/scss/crispy.scss
  20. +2
    -0
      src/scss/example.scss
  21. +2
    -3
      src/scss/functions/_units.scss
  22. +0
    -14
      src/scss/functions/_zIndex.scss
  23. +6
    -5
      src/scss/helper/_align.scss
  24. +19
    -0
      src/scss/helper/_background-color.scss
  25. +0
    -0
      src/scss/helper/_helper.scss
  26. +11
    -12
      src/scss/helper/_margin.scss
  27. +1
    -0
      src/scss/helper/_media.scss
  28. +19
    -0
      src/scss/helper/_text-color.scss
  29. +5
    -0
      src/scss/helper/_typography.scss
  30. +7
    -0
      src/scss/helper/_visibilty.scss
  31. +235
    -0
      src/scss/helper/_visible.scss

+ 14
- 1
README.md View File

@ -1,7 +1,20 @@
# cripsy-boilerplate # cripsy-boilerplate
Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions. Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions.
This Boilerplate uses hover.css and normalize.css
This Boilerplate uses
* normalize.css /
* reflex-grid /
# media queries
The queries are only
```
@include crispy__media-xs() {
}
```
``` ```
npm install crispy-boilerplate --save npm install crispy-boilerplate --save


+ 14
- 0
demo/index.html View File

@ -0,0 +1,14 @@
<!doctype html>
<html class="no-js" lang="en_EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/../crispy.css">
</head>
<body>
</body>
</html>

+ 2
- 1
package.json View File

@ -9,6 +9,7 @@
"author": "Björn Hase", "author": "Björn Hase",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"normalize.css": "^7.0.0"
"normalize.css": "^7.0.0",
"reflex-grid": "^2.0.1"
} }
} }

+ 0
- 36
scss/components/_body.scss View File

@ -1,36 +0,0 @@
/**
* body
*
*
*
* @author Björn Hase
*
*/
// text
$body__font-size: 12px !default;
$body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$body__line-height: 1.5 !default;
$body__direction: ltr !default;
// colors
$body__color: black !default;
$body__background-color: white !default;
@mixin crispy-boilerplate-body {
body {
font-family: $body__font-family;
font-weight: normal;
line-height: $body__line-height;
color: $body__color;
background-color: $body__background-color;
direction: $body__direction;
@include font-size($body__font-size);
@content;
}
}

+ 0
- 34
scss/components/_button.scss View File

@ -1,34 +0,0 @@
/**
* button
*
*
*
* @author Björn Hase
*
*/
@mixin crispy-boilerplate-button() {
.button {
position: relative;
display: inline-block;
vertical-align: middle;
appearance: none;
&--wide {
width: 100%;
}
&:hover {
cursor: pointer;
text-decoration: none;
}
&:focus {
outline: none;
}
@content;
}
}

+ 0
- 14
scss/components/_clearfix.scss View File

@ -1,14 +0,0 @@
/**
* clearfix
*
*
* @author Björn Hase
*
*/
@mixin crispy-boilerplate-clearfix() {
.clearfix {
@include clearfix();
}
}

+ 0
- 42
scss/components/_heading.scss View File

@ -1,42 +0,0 @@
/**
* heading
*
* loop to create for all heading styles
* creating css-classes with same naming
*
*
* @author Björn Hase
*
*/
// text
$heading__font-sizes: (
'h1': 36px,
'h2': 30px,
'h3': 24px,
'h4': 18px,
'h5': 14px,
'h6': 12px
) !default;
$heading__font-weight: bold !default;
$heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$heading__line-height: 1.5 !default;
$heading__margin: pxToEm(20px) 0 pxToEm(5px) !default;
@mixin crispy-boilerplate-heading {
@each $h, $font-size in $heading__font-sizes {
#{$h}, .#{$h} {
font-family: $heading__font-family;
font-weight: $heading__font-weight;
line-height: $heading__line-height;
margin: $heading__margin;
@include font-size($font-size);
@content;
}
}
}

+ 0
- 47
scss/components/_normalize.scss View File

@ -1,47 +0,0 @@
/**
* normalize
*
*
* @author Björn Hase
*
*/
$normalize__margin: 0 0 pxToEm(20px) !default;
@mixin crispy-boilerplate-normalize {
html {
font-size: 100%;
}
body,
html {
height: 100%;
}
html,
legend {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
p {
margin: $normalize__margin;
}
ul, ol, dl {
margin: $normalize__margin;
}
@content;
}

+ 0
- 26
scss/components/_text-colors.scss View File

@ -1,26 +0,0 @@
/**
* text-colors
*
* modificators for text-color
*
*
* @author Björn Hase
*
*/
$text-colors: (
'success': green,
'warning': yellow,
'danger': red,
'white': white,
'black': black
) !default;
@mixin crispy-boilerplate-text-colors() {
@each $name, $color in $text-colors {
.text-#{$name} {
color: $color;
}
}
}

+ 0
- 32
scss/example.scss View File

@ -1,32 +0,0 @@
@import
'crispyBoilerplate';
@include crispy-boilerplate-align();
@include crispy-boilerplate-clearfix();
@include crispy-boilerplate-list();
@include crispy-boilerplate-text-colors();
@include crispy-boilerplate-animation();
@include crispy-boilerplate-normalize() {
// adding styles
};
@include crispy-boilerplate-body() {
// adding styles
};
@include crispy-boilerplate-button() {
// adding styles
};
@include crispy-boilerplate-heading() {
// adding styles
};
@include crispy-boilerplate-icon() {
// adding styles
};
.clearfix {
@include crispy-boilerplate-clearfix();
};

+ 68
- 0
src/scss/_base.scss View File

@ -0,0 +1,68 @@
/**
* base
*
*
* @author Björn Hase
*
*/
html {
font-size: 100%;
}
body,
html {
height: 100%;
}
html,
legend {
box-sizing: border-box;
}
*,
*::after,
*::before {
box-sizing: inherit;
}
img {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
p {
margin: 0 0 $crispy__margin 0;
}
ul, ol, dl {
margin: 0 0 $crispy__margin 0;
}
ul {
list-style-position: outside;
}
a {
color: $crispy__color-primary;
&:focus {
outline: none;
}
}
body {
font-family: $crispy__body__font-family;
font-weight: normal;
font-size: 100%;
line-height: $crispy__body__line-height;
color: $crispy__body__color-text;
background-color: $crispy__body__background-color;
direction: $crispy__body__direction;
@include font-size($crispy__body__font-size);
}

+ 23
- 0
src/scss/_config.scss View File

@ -0,0 +1,23 @@
/**
* default
*
*
*/
$crispy__font-size: 16px !default;
$crispy__golden-ratio: 1.618 !default;
$crispy__margin: pxToEm(20px) !default;
$cripsy__color-primary: #5ca4a9 !default;
$cripsy__color-success: #6a8d73 !default;
$cripsy__color-warning: #f4f1bb !default;
$cripsy__color-danger: #ed6a5a !default;
$cripsy__color-text: #969696 !default;
$crispy__color-background: #e6ebe0 !default;
$crispy__body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$crispy__body__line-height: $base__golden-ratio !default;
$crispy__body__direction: ltr !default;
$crispy__body__color: $cripsy__color-text !default;
$crispy__body__background-color: $crispy__color-background !default;

scss/_mixins.scss → src/scss/_mixins.scss View File


+ 49
- 0
src/scss/components/_button.scss View File

@ -0,0 +1,49 @@
/**
* button
*
*
* @author Björn Hase
*
*/
$crispy__button__up-margin: pxToEm(20px) !default;
$crispy__button__up-padding: pxToEm(5px) !default;
@mixin crispy__button() {
.button {
position: relative;
display: inline-block;
vertical-align: middle;
appearance: none;
&--wide {
width: 100%;
}
// button for scroll up and down
&--up, &--down {
position: absolute;
bottom: 0;
margin: $crispy__button__up-margin;
padding: $crispy__button__up-padding;
}
&--down {
bottom: 0;
}
&--up {
bottom: 0;
}
&:hover {
cursor: pointer;
text-decoration: none;
}
&:focus {
outline: none;
}
}
}

+ 43
- 0
src/scss/components/_heading.scss View File

@ -0,0 +1,43 @@
/**
* heading
*
* create classes for heading similar to there name
*
*
* @author Björn Hase
*
*/
$crispy__heading__font-sizes: (
'h1': 36px,
'h2': 30px,
'h3': 24px,
'h4': 18px,
'h5': 14px,
'h6': 12px
) !default;
$crispy__heading__font-weight: bold !default;
$crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$crispy__heading__line-height: $crispy__golden-ratio !default;
$crispy__heading__margin: 0 0 pxToEm(20px) !default;
@mixin crispy__heading {
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-family: $heading__font-family;
font-weight: $heading__font-weight;
line-height: $heading__line-height;
margin: $heading__margin;
}
@each $h, $font-size in $heading__font-sizes {
#{$h}, .#{$h} {
@include font-size($font-size);
}
}
}

scss/components/_icon.scss → src/scss/components/_icon.scss View File

@ -3,7 +3,7 @@
* *
* use svg as icon * use svg as icon
* *
* <svg class="icon">
* <svg class="icon" viewBox="0 0 100 100">
* <use src="#"></use> * <use src="#"></use>
* </svg> * </svg>
* *
@ -13,33 +13,29 @@
*/ */
$icon__vertical-align: middle !default;
$icon__margin: 0 2px !default;
$crispy__icon__vertical-align: middle !default;
$crispy__icon__margin: 0 2px !default;
// width & height
$icon__sizes: (
$crispy__icon__sizes: (
'default': 18px, 'default': 18px,
'small': 14px, 'small': 14px,
'large': 28px 'large': 28px
) !default; ) !default;
// colors
$icon__colors: (
'default' : black,
'secondary' : grey,
$crispy__icon__colors: (
'default': black,
'secondary': grey,
) !default; ) !default;
@mixin crispy-boilerplate-icon() {
@mixin crispy__icon() {
.icon { .icon {
display: inline-block; display: inline-block;
position: relative; position: relative;
vertical-align: $icon__vertical-align;
margin: $icon__margin;
vertical-align: $crispy__icon__vertical-align;
margin: $crispy__icon__margin;
@include crispy-boilerplate-icon-colors($icon__colors);
@include crispy-boilerplate-icon-sizes($icon__sizes);
@content;
@include crispy__icon-colors($crispy__icon__colors);
@include crispy__icon-sizes($crispy__icon__sizes);
} }
} }
@ -50,13 +46,13 @@ $icon__colors: (
* @param {map} $colors * @param {map} $colors
* *
*/ */
@mixin crispy-boilerplate-icon-colors($colors) {
@mixin crispy__icon-colors($colors) {
@each $name, $color in $colors { @each $name, $color in $colors {
@if ($name == 'default') { @if ($name == 'default') {
@include crispy-boilerplate-icon-color($color);
@include crispy__icon-color($color);
} @else { } @else {
&--#{$name} { &--#{$name} {
@include crispy-boilerplate-icon-color($color);
@include crispy__icon-color($color);
} }
} }
} }
@ -69,7 +65,7 @@ $icon__colors: (
* @param {color} $color * @param {color} $color
* *
*/ */
@mixin crispy-boilerplate-icon-color($color) {
@mixin crispy__icon-color($color) {
fill: $color; fill: $color;
} }
@ -80,13 +76,13 @@ $icon__colors: (
* @param {map} $sizes * @param {map} $sizes
* *
*/ */
@mixin crispy-boilerplate-icon-sizes($sizes) {
@mixin crispy__icon-sizes($sizes) {
@each $name, $size in $sizes { @each $name, $size in $sizes {
@if ($name == 'default') { @if ($name == 'default') {
@include crispy-boilerplate-icon-size($size);
@include crispy__icon-size($size);
} @else { } @else {
&--#{$name} { &--#{$name} {
@include crispy-boilerplate-icon-size($size);
@include crispy__icon-size($size);
} }
} }
} }
@ -99,7 +95,6 @@ $icon__colors: (
* @param {px} $size * @param {px} $size
* *
*/ */
@mixin crispy-boilerplate-icon-size($size) {
@mixin crispy__icon-size($size) {
width: $size; width: $size;
height: $size;
} }

scss/components/_list.scss → src/scss/components/_list.scss View File

@ -8,11 +8,8 @@
* *
*/ */
@mixin crispy-boilerplate-list {
@mixin crispy__list {
.list { .list {
list-style-position: outside;
&--horizontal { &--horizontal {
li { li {
float: left; float: left;
@ -20,7 +17,7 @@
} }
&--clear { &--clear {
@include crispy-boilerplate-list-clear();
@include crispy__list-clear();
} }
} }

+ 55
- 0
src/scss/components/_table.scss View File

@ -0,0 +1,55 @@
/**
* table
*
* <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>
* </tbody>
* </table>
*
* @author Björn Hase
*
*/
$crispy__table__padding: pxToEm(10px) pxToEm(8px) !default;
$crispy__table__color: $crispy__color-text !default;
$crispy__table__border-color: lighten($crispy__color-text, 40%) !default;
$crispy__table__striped__background-color: lighten($table__border-color, 4%) !default;
@mixin crispy__table() {
.table {
width: 100%;
&--strippd {
tr {
&:nth-child(even) {
background-color: $crispy__table__striped__background-color;
}
}
}
td {
color: $crispy__table__color;
}
th, td {
padding: $crispy__table__padding;
text-align: left;
border-bottom: 1px solid $crispy__table__border-color;
}
th {
border-bottom-width: 2px;
}
}
}

scss/crispyBoilerplate.scss → src/scss/crispy.scss View File


+ 2
- 0
src/scss/example.scss View File

@ -0,0 +1,2 @@
@import
'crispyBoilerplate';

scss/functions/_units.scss → src/scss/functions/_units.scss View File

@ -6,7 +6,6 @@
* *
*/ */
$base__font-size: 16px !default;
/** /**
* calculate pixel value to em * calculate pixel value to em
@ -15,7 +14,7 @@ $base__font-size: 16px !default;
* @return {em} * @return {em}
*/ */
@function pxToEm($font-size) { @function pxToEm($font-size) {
@return ($font-size / $base__font-size) * 1em;
@return ($font-size / $crispy__font-size) * 1em;
} }
/** /**
@ -26,5 +25,5 @@ $base__font-size: 16px !default;
* @return {em} * @return {em}
*/ */
@function pxToRem($font-size) { @function pxToRem($font-size) {
@return ($font-size / $base__font-size) * 1rem;
@return ($font-size / $crispy__font-size) * 1rem;
} }

scss/functions/_zIndex.scss → src/scss/functions/_zIndex.scss View File

@ -8,20 +8,6 @@
* *
*/ */
$z-indexes: (
'site-header': 100,
'modal': 1000
) !default;
/**
* z-index
*
*
*
*
* @return
*
*/
@function zIndex($name) { @function zIndex($name) {
@if index($z-indexes, $name) { @if index($z-indexes, $name) {
@return map($z-indexes, $name); @return map($z-indexes, $name);

scss/components/_align.scss → src/scss/helper/_align.scss View File

@ -1,16 +1,13 @@
/** /**
* align * align
* *
* - text
* - floating for elements
* - centering with margin
*
* *
* @author Björn Hase * @author Björn Hase
* *
*/ */
@mixin crispy-boilerplate-align() {
@mixin crispy-align() {
.text-left { .text-left {
text-align: left; text-align: left;
} }
@ -43,4 +40,8 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
.clearfix {
@include $crispy__clearfix();
}
} }

+ 19
- 0
src/scss/helper/_background-color.scss View File

@ -0,0 +1,19 @@
/**
* background-color
*
* modificators for text-color
*
*
* @author Björn Hase
*
*/
$crispy__background-colors: $crispy__colors !default;
@mixin crispy__background-color() {
@each $name, $color in $crispy__background-color {
.background-#{$name} {
background-color: $color;
}
}
}

+ 0
- 0
src/scss/helper/_helper.scss View File


scss/components/_margin.scss → src/scss/helper/_margin.scss View File

@ -1,47 +1,46 @@
/** /**
* margin * margin
* *
* modificators for margin
*
* *
* *
* @author Björn Hase * @author Björn Hase
* *
*/ */
$margin-top: pxToEm(5px) !default;
$margin-bottom: pxToEm(20px) !default;
$margin-top: $crispy__margin !default;
$margin-bottom: $crispy__margin !default;
@mixin crispy-boilerplate-margin() { @mixin crispy-boilerplate-margin() {
.margin-top-y0 {
.margin-top-0x {
margin-top: 0; margin-top: 0;
} }
.margin-top-y1 {
.margin-top-1x {
margin-top: $margin-top; margin-top: $margin-top;
} }
.margin-top-y2 {
.margin-top-2x {
margin-top: $margin-top * 2; margin-top: $margin-top * 2;
} }
.margin-top-y3 {
.margin-top-3x {
margin-top: $margin-top * 3; margin-top: $margin-top * 3;
} }
.margin-bottom-y0 {
.margin-bottom-0x {
margin-bottom: 0; margin-bottom: 0;
} }
.margin-bottom-y1 {
.margin-bottom-1x {
margin-bottom: $margin-bottom; margin-bottom: $margin-bottom;
} }
.margin-bottom-y2 {
.margin-bottom-2x {
margin-bottom: $margin-bottom * 2; margin-bottom: $margin-bottom * 2;
} }
.margin-bottom-y3 {
.margin-bottom-3x {
margin-bottom: $margin-bottom * 3; margin-bottom: $margin-bottom * 3;
} }
} }

+ 1
- 0
src/scss/helper/_media.scss View File

@ -0,0 +1 @@
// reflex grid commands for reflex grid

+ 19
- 0
src/scss/helper/_text-color.scss View File

@ -0,0 +1,19 @@
/**
* text-colors
*
* modificators for text-color
*
*
* @author Björn Hase
*
*/
$crispy__text-colors: $crispy__colors !default;
@mixin crispy-text-colors() {
@each $name, $color in $crispy__text-colors {
.text-#{$name} {
color: $color;
}
}
}

+ 5
- 0
src/scss/helper/_typography.scss View File

@ -0,0 +1,5 @@
/**
*
*
*
*/

+ 7
- 0
src/scss/helper/_visibilty.scss View File

@ -0,0 +1,7 @@
.hide {
display: none;
}
.show {
}

+ 235
- 0
src/scss/helper/_visible.scss View File

@ -0,0 +1,235 @@
/**
*
*
*
*
*/
.show {
display: block;
}
.hide {
display: none;
&--xs {
@include media-xs {
display: none;
}
}
&--sm {
}
&--md {
}
&--lg {
}
}
.lg-visible,
.md-visible,
.sm-visible,
.xs-visible {
display: none !important;
}
.lg-visible-block,
.lg-visible-inline,
.lg-visible-inline-block,
.md-visible-block,
.md-visible-inline,
.md-visible-inline-block,
.sm-visible-block,
.sm-visible-inline,
.sm-visible-inline-block,
.xs-visible-block,
.xs-visible-inline,
.xs-visible-inline-block {
display: none !important;
}
/**
* show
*
*
*/
@media (max-width: 767px) {
.xs-visible {
display: block !important;
}
table.xs-visible {
display: table !important;
}
tr.xs-visible {
display: table-row !important;
}
td.xs-visible,
th.xs-visible {
display: table-cell !important;
}
}
@media (max-width: 767px) {
.xs-visible-block {
display: block !important;
}
}
@media (max-width: 767px) {
.xs-visible-inline {
display: inline !important;
}
}
@media (max-width: 767px) {
.xs-visible-inline-block {
display: inline-block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.sm-visible {
display: block !important;
}
table.sm-visible {
display: table !important;
}
tr.sm-visible {
display: table-row !important;
}
td.sm-visible,
th.sm-visible {
display: table-cell !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.sm-visible-block {
display: block !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.sm-visible-inline {
display: inline !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.sm-visible-inline-block {
display: inline-block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.md-visible {
display: block !important;
}
table.md-visible {
display: table !important;
}
tr.md-visible {
display: table-row !important;
}
td.md-visible,
th.md-visible {
display: table-cell !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.md-visible-block {
display: block !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.md-visible-inline {
display: inline !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.md-visible-inline-block {
display: inline-block !important;
}
}
@media (min-width: 1200px) {
.lg-visible {
display: block !important;
}
table.lg-visible {
display: table !important;
}
tr.lg-visible {
display: table-row !important;
}
td.lg-visible,
th.lg-visible {
display: table-cell !important;
}
}
@media (min-width: 1200px) {
.lg-visible-block {
display: block !important;
}
}
@media (min-width: 1200px) {
.lg-visible-inline {
display: inline !important;
}
}
@media (min-width: 1200px) {
.lg-visible-inline-block {
display: inline-block !important;
}
}
/**
* hidden
*
*
*/
@media (max-width: 767px) {
.xs-hidden {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.sm-hidden {
display: none !important;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.md-hidden {
display: none !important;
}
}
@media (min-width: 1200px) {
.lg-hidden {
display: none !important;
}
}

Write Preview
Loading…
Cancel
Save