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
Split 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="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>
<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>
</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",
"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": {
"dest_dir": "dest/",
"src_dir": "src/"
},
"scripts": {
"preinstall": "npm install -g node-sass clean-css-cli postcss-cli autoprefixer",
"build": "npm run css:build",
"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: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: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
'../../normalize.css/normalize',
'../../reflex-grid/scss/reflex';
'../../node_modules/normalize.css/normalize',
'../../node_modules/reflex-grid/scss/reflex';
/**
* base
@ -110,7 +110,7 @@ body {
font-weight: normal;
font-size: 100%;
line-height: $crispy__body__line-height;
color: $crispy__body__color-text;
color: $crispy__body__color;
background-color: $crispy__body__background-color;
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;
// 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
$crispy__body__font-size: 16px !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__color: $cripsy__color-text !default;
$crispy__body__color: $crispy__color-text !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-padding: pxToEm(5px) !default;
$crispy__button__sizes: (
$crispy__button__font-sizes: (
'default': 18px,
'small': 14px,
'large': 28px
@ -19,20 +19,20 @@ $crispy__button__sizes: (
$crispy__button__colors: (
'default': (
'color': $cripsy__color-text,
'color': $crispy__color-text,
'background-color': $crispy__color-primary
),
'success': (
'color': $cripsy__color-text,
'background-color': $crispy__color-primary
'color': $crispy__color-text,
'background-color': $crispy__color-success
),
'warning': (
'color': $cripsy__color-text,
'background-color': $crispy__color-primary
'color': $crispy__color-text,
'background-color': $crispy__color-warning
),
'danger': (
'color': $cripsy__color-text,
'background-color': $crispy__color-primary
'color': $crispy__color-text,
'background-color': $crispy__color-danger
)
) !default;
@ -77,8 +77,8 @@ $crispy__button__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 {
// default has no modification
@ -110,7 +110,7 @@ $crispy__button__colors: (
}
}
@mixin cripsy__button__colors($color) {
@mixin crispy__button__color($color) {
$background-color: false;
$text-color: false;


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

@ -10,18 +10,18 @@
*/
$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;
$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;
$crispy__heading__margin: 0 0 pxToEm(5px) !default;
@mixin crispy__heading {
h1, .h1,
@ -30,13 +30,13 @@ $crispy__heading__margin: 0 0 pxToEm(20px) !default;
h4, .h4,
h5, .h5,
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} {
@include font-size($font-size);
}


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

@ -23,10 +23,10 @@ $crispy__icon__sizes: (
) !default;
$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;
@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__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() {
.table {


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

@ -11,3 +11,9 @@
'components/heading',
'components/icon',
'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-align: left;
}
@ -42,6 +42,6 @@
}
.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',
'media',
'text-color',
'typography',
'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: $margin-top;
margin-top: $crispy__margin-top;
}
.margin-top-2x {
margin-top: $margin-top * 2;
margin-top: $crispy__margin-top * 2;
}
.margin-top-3x {
margin-top: $margin-top * 3;
margin-top: $crispy__margin-top * 3;
}
.margin-bottom-0x {
@ -33,14 +33,14 @@ $crispy__margin-bottom: $crispy__margin !default;
}
.margin-bottom-1x {
margin-bottom: $margin-bottom;
margin-bottom: $crispy__margin-bottom;
}
.margin-bottom-2x {
margin-bottom: $margin-bottom * 2;
margin-bottom: $crispy__margin-bottom * 2;
}
.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;
@mixin crispy-text-colors() {
@mixin crispy__text-colors() {
@each $name, $color in $crispy__text-colors {
.text-#{$name} {
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() {
@media only screen and (min-width: $reflex-xs) {
$content;
@content;
}
}
@mixin crispy__media-sm() {
@media only screen and (min-width: $reflex-sm) {
$content;
@content;
}
}
@mixin crispy__media-md() {
@media only screen and (min-width: $reflex-md) {
$content;
@content;
}
}
@mixin crispy__media-lg() {
@media only screen and (min-width: $reflex-lg) {
$content;
@content;
}
}
@mixin crispy__media-xlg() {
@media only screen and (min-width: $reflex-xlg) {
$content;
@content;
}
}
// only
@mixin crispy__media-xs-only() {
@media only screen and (min-width: $reflex-xs) and (max-width: $reflex-xs - 1) {
$content;
@content;
}
}
@mixin crispy__media-sm-only() {
@media only screen and (min-width: $reflex-sm) and (max-width: $reflex-md - 1) {
$content;
@content;
}
}
@mixin crispy__media-md-only() {
@media only screen and (min-width: $reflex-md) and (max-width: $reflex-md - 1) {
$content;
@content;
}
}
@mixin crispy__media-lg-only() {
@media only screen and (min-width: $reflex-lg) and (max-width: $reflex-lg - 1) {
$content;
@content;
}
}
@mixin crispy__media-xlg-only() {
@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
'fonts',
'font',
'media-queries';
/**


Write Preview
Loading…
Cancel
Save