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

adding new styles 

adding elements to demo
master
HerrHase 6 years ago
parent
4e4b0a6a9c
commit
09a4a62644
21 changed files with 5507 additions and 64 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +66
    -1
      demo/index.html
  2. +1745
    -0
      dest/css/crispy.css
  3. +1
    -0
      dest/css/crispy.min.css
  4. +3613
    -0
      package-lock.json
  5. +8
    -2
      package.json
  6. +3
    -3
      src/scss/_base.scss
  7. +16
    -8
      src/scss/_config.scss
  8. +12
    -12
      src/scss/components/_button.scss
  9. +12
    -12
      src/scss/components/_heading.scss
  10. +4
    -4
      src/scss/components/_icon.scss
  11. +1
    -1
      src/scss/components/_table.scss
  12. +6
    -0
      src/scss/crispy.scss
  13. +2
    -2
      src/scss/helpers/_align.scss
  14. +0
    -0
      src/scss/helpers/_background-color.scss
  15. +0
    -1
      src/scss/helpers/_helpers.scss
  16. +6
    -6
      src/scss/helpers/_margin.scss
  17. +0
    -0
      src/scss/helpers/_media.scss
  18. +1
    -1
      src/scss/helpers/_text-color.scss
  19. +0
    -0
      src/scss/helpers/_visibilty.scss
  20. +10
    -10
      src/scss/mixins/_media-queries.scss
  21. +1
    -1
      src/scss/mixins/_mixins.scss

+ 66
- 1
demo/index.html View File

@ -7,8 +7,73 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="dist/../crispy.css">
<link rel="stylesheet" href="../dest/css/crispy.css">
<style>
.container {
max-width: 992px;
width: 100%;
margin: 0 auto;
}
.panel {
padding: 10px;
background-color: #efefef;
border: 1px dotted #cecece;
}
</style>
</head> </head>
<body> <body>
<div class="container">
<div class="grid">
<div class="col-2">
<nav>
<a href="#heading">Heading</a>
</nav>
</div>
<div class="col-10">
<h2>Heading</h2>
<div class="panel">
<h1>Heading h1</h1>
<h2>Heading h1</h2>
<h3>Heading h1</h3>
<h4>Heading h1</h4>
<h5>Heading h1</h5>
<h6>Heading h1</h6>
</div>
<h2 id="buttons" class="margin-top-1x">Buttons</h2>
<div class="panel">
<button class="button">Button</button>
<button class="button button--danger">Button</button>
</div>
<h2 id="table" class="margin-top-1x">Table</h2>
<div class="panel">
<table class="table table--striped">
<thead>
<tr>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>The Shawshank Redemption</td>
<td>12</td>
</tr>
<tr>
<td>The Shawshank Redemption</td>
<td>12</td>
</tr>
<tr>
<td>The Shawshank Redemption</td>
<td>12</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body> </body>
</html> </html>

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


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


+ 3613
- 0
package-lock.json
File diff suppressed because it is too large
View File


+ 8
- 2
package.json View File

@ -12,17 +12,23 @@
"normalize.css": "^7.0.0", "normalize.css": "^7.0.0",
"reflex-grid": "^2.0.1" "reflex-grid": "^2.0.1"
}, },
"devDependencies": {
"autoprefixer": "^7.2.5",
"clean-css-cli": "^4.1.10",
"node-sass": "^4.7.2",
"postcss-cli": "^4.1.1",
"rimraf": "^2.6.1"
},
"config": { "config": {
"dest_dir": "dest/", "dest_dir": "dest/",
"src_dir": "src/" "src_dir": "src/"
}, },
"scripts": { "scripts": {
"preinstall": "npm install -g node-sass clean-css-cli postcss-cli autoprefixer",
"build": "npm run css:build", "build": "npm run css:build",
"css:build": "npm run css:clean && npm run css:scss && npm run css:postcss && npm run css:minify", "css:build": "npm run css:clean && npm run css:scss && npm run css:postcss && npm run css:minify",
"css:clean": "rimraf $npm_package_config_dist_dir/css/*", "css:clean": "rimraf $npm_package_config_dist_dir/css/*",
"css:scss": "node-sass $npm_package_config_src_dir/scss/crispy.scss $npm_package_config_dest_dir/css/crispy.css", "css:scss": "node-sass $npm_package_config_src_dir/scss/crispy.scss $npm_package_config_dest_dir/css/crispy.css",
"css:postcss": "postcss $npm_package_config_dest_dir/css/*.css --use autoprefixer -d $npm_package_config_dest_dir/css/", "css:postcss": "postcss $npm_package_config_dest_dir/css/*.css --use autoprefixer -d $npm_package_config_dest_dir/css/",
"css:minify": "cleancss $npm_package_config_dest_dir/css/landingPage.css > $npm_package_config_dest_dir/css/landingPage.min.css"
"css:minify": "cleancss $npm_package_config_dest_dir/css/crispy.css > $npm_package_config_dest_dir/css/crispy.min.css"
} }
} }

+ 3
- 3
src/scss/_base.scss View File

@ -1,6 +1,6 @@
@import @import
'../../normalize.css/normalize',
'../../reflex-grid/scss/reflex';
'../../node_modules/normalize.css/normalize',
'../../node_modules/reflex-grid/scss/reflex';
/** /**
* base * base
@ -110,7 +110,7 @@ body {
font-weight: normal; font-weight: normal;
font-size: 100%; font-size: 100%;
line-height: $crispy__body__line-height; line-height: $crispy__body__line-height;
color: $crispy__body__color-text;
color: $crispy__body__color;
background-color: $crispy__body__background-color; background-color: $crispy__body__background-color;
direction: $crispy__body__direction; direction: $crispy__body__direction;


+ 16
- 8
src/scss/_config.scss View File

@ -14,16 +14,24 @@ $crispy__golden-ratio: 1.618 !default;
$crispy__margin: pxToEm(20px) !default; $crispy__margin: pxToEm(20px) !default;
// colors // colors
$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__color-primary: #5ca4a9 !default;
$crispy__color-success: #6a8d73 !default;
$crispy__color-warning: #f4f1bb !default;
$crispy__color-danger: #ed6a5a !default;
$crispy__color-text: #363636 !default;
$crispy__color-background: #ffffff !default;
$crispy__colors: (
'primary': $crispy__color-primary,
'success': $crispy__color-success,
'warning': $crispy__color-warning,
'danger': $crispy__color-danger
) !default;
// body // body
$crispy__body__font-size: 16px !default;
$crispy__body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; $crispy__body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$crispy__body__line-height: $base__golden-ratio !default;
$crispy__body__line-height: $crispy__golden-ratio !default;
$crispy__body__direction: ltr !default; $crispy__body__direction: ltr !default;
$crispy__body__color: $cripsy__color-text !default;
$crispy__body__color: $crispy__color-text !default;
$crispy__body__background-color: $crispy__color-background !default; $crispy__body__background-color: $crispy__color-background !default;

+ 12
- 12
src/scss/components/_button.scss View File

@ -11,7 +11,7 @@ $crispy__button__padding: pxToEm(5px) pxToEm(10px) !default;
$crispy__button__up-margin: pxToEm(20px) !default; $crispy__button__up-margin: pxToEm(20px) !default;
$crispy__button__up-padding: pxToEm(5px) !default; $crispy__button__up-padding: pxToEm(5px) !default;
$crispy__button__sizes: (
$crispy__button__font-sizes: (
'default': 18px, 'default': 18px,
'small': 14px, 'small': 14px,
'large': 28px 'large': 28px
@ -19,20 +19,20 @@ $crispy__button__sizes: (
$crispy__button__colors: ( $crispy__button__colors: (
'default': ( 'default': (
'color': $cripsy__color-text,
'color': $crispy__color-text,
'background-color': $crispy__color-primary 'background-color': $crispy__color-primary
), ),
'success': ( 'success': (
'color': $cripsy__color-text,
'background-color': $crispy__color-primary
'color': $crispy__color-text,
'background-color': $crispy__color-success
), ),
'warning': ( 'warning': (
'color': $cripsy__color-text,
'background-color': $crispy__color-primary
'color': $crispy__color-text,
'background-color': $crispy__color-warning
), ),
'danger': ( 'danger': (
'color': $cripsy__color-text,
'background-color': $crispy__color-primary
'color': $crispy__color-text,
'background-color': $crispy__color-danger
) )
) !default; ) !default;
@ -77,8 +77,8 @@ $crispy__button__colors: (
} }
// font-sizes & colors // font-sizes & colors
@include font-sizes($button__font-sizes);
@include crispy__button__colors($button__colors);
@include font-sizes($crispy__button__font-sizes);
@include crispy__button__colors($crispy__button__colors);
} }
/** /**
@ -95,7 +95,7 @@ $crispy__button__colors: (
} }
} }
@mixin cripsy__button__colors($colors) {
@mixin crispy__button__colors($colors) {
@each $name, $color in $colors { @each $name, $color in $colors {
// default has no modification // default has no modification
@ -110,7 +110,7 @@ $crispy__button__colors: (
} }
} }
@mixin cripsy__button__colors($color) {
@mixin crispy__button__color($color) {
$background-color: false; $background-color: false;
$text-color: false; $text-color: false;


+ 12
- 12
src/scss/components/_heading.scss View File

@ -10,18 +10,18 @@
*/ */
$crispy__heading__font-sizes: ( $crispy__heading__font-sizes: (
'h1': 36px,
'h2': 30px,
'h3': 24px,
'h4': 18px,
'h5': 14px,
'h6': 12px
'h1': 40px,
'h2': 36px,
'h3': 32px,
'h4': 28px,
'h5': 24px,
'h6': 20px
) !default; ) !default;
$crispy__heading__font-weight: bold !default; $crispy__heading__font-weight: bold !default;
$crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; $crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
$crispy__heading__line-height: $crispy__golden-ratio !default; $crispy__heading__line-height: $crispy__golden-ratio !default;
$crispy__heading__margin: 0 0 pxToEm(20px) !default;
$crispy__heading__margin: 0 0 pxToEm(5px) !default;
@mixin crispy__heading { @mixin crispy__heading {
h1, .h1, h1, .h1,
@ -30,13 +30,13 @@ $crispy__heading__margin: 0 0 pxToEm(20px) !default;
h4, .h4, h4, .h4,
h5, .h5, h5, .h5,
h6, .h6 { h6, .h6 {
font-family: $heading__font-family;
font-weight: $heading__font-weight;
line-height: $heading__line-height;
margin: $heading__margin;
font-family: $crispy__heading__font-family;
font-weight: $crispy__heading__font-weight;
line-height: $crispy__heading__line-height;
margin: $crispy__heading__margin;
} }
@each $h, $font-size in $heading__font-sizes {
@each $h, $font-size in $crispy__heading__font-sizes {
#{$h}, .#{$h} { #{$h}, .#{$h} {
@include font-size($font-size); @include font-size($font-size);
} }


+ 4
- 4
src/scss/components/_icon.scss View File

@ -23,10 +23,10 @@ $crispy__icon__sizes: (
) !default; ) !default;
$crispy__icon__colors: ( $crispy__icon__colors: (
'default': $cripsy__color-text,
'success': $cripsy__color-success,
'warning': $cripsy__color-warning,
'danger': $cripsy__color-danger
'default': $crispy__color-text,
'success': $crispy__color-success,
'warning': $crispy__color-warning,
'danger': $crispy__color-danger
) !default; ) !default;
@mixin crispy__icon() { @mixin crispy__icon() {


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

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


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

@ -11,3 +11,9 @@
'components/heading', 'components/heading',
'components/icon', 'components/icon',
'components/table'; 'components/table';
@include crispy__margin();
@include crispy__button();
@include crispy__heading();
@include crispy__table();

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

@ -7,7 +7,7 @@
* *
*/ */
@mixin crispy-align() {
@mixin crispy__align() {
.text-left { .text-left {
text-align: left; text-align: left;
} }
@ -42,6 +42,6 @@
} }
.clearfix { .clearfix {
@include $crispy__clearfix();
@include crispy__clearfix();
} }
} }

src/scss/helper/_background-color.scss → src/scss/helpers/_background-color.scss View File


src/scss/helper/_helpers.scss → src/scss/helpers/_helpers.scss View File

@ -4,5 +4,4 @@
'margin', 'margin',
'media', 'media',
'text-color', 'text-color',
'typography',
'visibilty'; 'visibilty';

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

@ -17,15 +17,15 @@ $crispy__margin-bottom: $crispy__margin !default;
} }
.margin-top-1x { .margin-top-1x {
margin-top: $margin-top;
margin-top: $crispy__margin-top;
} }
.margin-top-2x { .margin-top-2x {
margin-top: $margin-top * 2;
margin-top: $crispy__margin-top * 2;
} }
.margin-top-3x { .margin-top-3x {
margin-top: $margin-top * 3;
margin-top: $crispy__margin-top * 3;
} }
.margin-bottom-0x { .margin-bottom-0x {
@ -33,14 +33,14 @@ $crispy__margin-bottom: $crispy__margin !default;
} }
.margin-bottom-1x { .margin-bottom-1x {
margin-bottom: $margin-bottom;
margin-bottom: $crispy__margin-bottom;
} }
.margin-bottom-2x { .margin-bottom-2x {
margin-bottom: $margin-bottom * 2;
margin-bottom: $crispy__margin-bottom * 2;
} }
.margin-bottom-3x { .margin-bottom-3x {
margin-bottom: $margin-bottom * 3;
margin-bottom: $crispy__margin-bottom * 3;
} }
} }

src/scss/helper/_media.scss → src/scss/helpers/_media.scss View File


src/scss/helper/_text-color.scss → src/scss/helpers/_text-color.scss View File

@ -10,7 +10,7 @@
$crispy__text-colors: $crispy__colors !default; $crispy__text-colors: $crispy__colors !default;
@mixin crispy-text-colors() {
@mixin crispy__text-colors() {
@each $name, $color in $crispy__text-colors { @each $name, $color in $crispy__text-colors {
.text-#{$name} { .text-#{$name} {
color: $color; color: $color;

src/scss/helper/_visibilty.scss → src/scss/helpers/_visibilty.scss View File


+ 10
- 10
src/scss/mixins/_media-queries.scss View File

@ -9,61 +9,61 @@
@mixin crispy__media-xs() { @mixin crispy__media-xs() {
@media only screen and (min-width: $reflex-xs) { @media only screen and (min-width: $reflex-xs) {
$content;
@content;
} }
} }
@mixin crispy__media-sm() { @mixin crispy__media-sm() {
@media only screen and (min-width: $reflex-sm) { @media only screen and (min-width: $reflex-sm) {
$content;
@content;
} }
} }
@mixin crispy__media-md() { @mixin crispy__media-md() {
@media only screen and (min-width: $reflex-md) { @media only screen and (min-width: $reflex-md) {
$content;
@content;
} }
} }
@mixin crispy__media-lg() { @mixin crispy__media-lg() {
@media only screen and (min-width: $reflex-lg) { @media only screen and (min-width: $reflex-lg) {
$content;
@content;
} }
} }
@mixin crispy__media-xlg() { @mixin crispy__media-xlg() {
@media only screen and (min-width: $reflex-xlg) { @media only screen and (min-width: $reflex-xlg) {
$content;
@content;
} }
} }
// only // only
@mixin crispy__media-xs-only() { @mixin crispy__media-xs-only() {
@media only screen and (min-width: $reflex-xs) and (max-width: $reflex-xs - 1) { @media only screen and (min-width: $reflex-xs) and (max-width: $reflex-xs - 1) {
$content;
@content;
} }
} }
@mixin crispy__media-sm-only() { @mixin crispy__media-sm-only() {
@media only screen and (min-width: $reflex-sm) and (max-width: $reflex-md - 1) { @media only screen and (min-width: $reflex-sm) and (max-width: $reflex-md - 1) {
$content;
@content;
} }
} }
@mixin crispy__media-md-only() { @mixin crispy__media-md-only() {
@media only screen and (min-width: $reflex-md) and (max-width: $reflex-md - 1) { @media only screen and (min-width: $reflex-md) and (max-width: $reflex-md - 1) {
$content;
@content;
} }
} }
@mixin crispy__media-lg-only() { @mixin crispy__media-lg-only() {
@media only screen and (min-width: $reflex-lg) and (max-width: $reflex-lg - 1) { @media only screen and (min-width: $reflex-lg) and (max-width: $reflex-lg - 1) {
$content;
@content;
} }
} }
@mixin crispy__media-xlg-only() { @mixin crispy__media-xlg-only() {
@media only screen and (min-width: $reflex-xlg) and (max-width: $reflex-xlg - 1) { @media only screen and (min-width: $reflex-xlg) and (max-width: $reflex-xlg - 1) {
$content;
@content;
} }
} }

+ 1
- 1
src/scss/mixins/_mixins.scss View File

@ -1,5 +1,5 @@
@import @import
'fonts',
'font',
'media-queries'; 'media-queries';
/** /**


Write Preview
Loading…
Cancel
Save