From 8c8fafe86397c772f51c78ee09399f1a4b8de8af Mon Sep 17 00:00:00 2001 From: bjoern Date: Tue, 15 Jan 2019 17:41:51 +0100 Subject: [PATCH] adding #11 adding #10 --- CHANGELOG.md | 0 README.md | 2 +- dist/crispy.min.css | 1 + docs/index.rst | 2 - docs/typography.rst | 0 example/_components.scss | 3 + example/_config.scss | 0 example/_site.scss | 3 + example/_templates.scss | 2 + example/components/_button.scss | 7 +- example/components/_nav.scss | 5 +- example/example.scss | 23 ++- example/site/_footer.scss | 3 +- example/site/_header.scss | 4 +- example/templates/_home.scss | 4 +- mix-manifest.json | 3 + package-lock.json | 61 +++++++- package.json | 42 ++++-- src/scss/_components.scss | 10 ++ src/scss/_config.scss | 8 +- src/scss/_core.scss | 140 ++++++++++++++++++ src/scss/_functions.scss | 3 + src/scss/_helpers.scss | 7 + src/scss/{mixins/mixins.scss => _mixins.scss} | 4 +- src/scss/_normalize.scss | 139 ----------------- src/scss/components/_button.scss | 3 +- src/scss/components/_code.scss | 3 +- .../{field/field.scss => _field.scss} | 21 ++- src/scss/components/_group.scss | 3 +- src/scss/components/_heading.scss | 1 - src/scss/components/_hero.scss | 1 - src/scss/components/_icon.scss | 62 -------- src/scss/components/_modal.scss | 2 +- src/scss/components/_panel.scss | 3 +- src/scss/components/_table.scss | 1 - src/scss/components/components.scss | 36 ----- src/scss/components/field/_panel.scss | 2 +- src/scss/components/field/_radio.scss | 12 +- src/scss/crispy.scss | 30 +++- src/scss/example.scss | 2 + src/scss/functions/_zIndex.scss | 1 + src/scss/functions/functions.scss | 3 - src/scss/helpers/_margin.scss | 61 -------- src/scss/helpers/_media.scss | 2 +- src/scss/helpers/_spacing.scss | 43 ++++++ src/scss/helpers/_text.scss | 1 - .../{_visiblity.scss => _visibility.scss} | 0 src/scss/helpers/helpers.scss | 20 --- webpack.mix.js | 6 +- 49 files changed, 381 insertions(+), 414 deletions(-) create mode 100644 CHANGELOG.md create mode 100644 dist/crispy.min.css create mode 100644 docs/typography.rst create mode 100644 example/_components.scss create mode 100644 example/_config.scss create mode 100644 example/_site.scss create mode 100644 example/_templates.scss create mode 100644 mix-manifest.json create mode 100644 src/scss/_components.scss create mode 100644 src/scss/_core.scss create mode 100644 src/scss/_functions.scss create mode 100644 src/scss/_helpers.scss rename src/scss/{mixins/mixins.scss => _mixins.scss} (89%) delete mode 100644 src/scss/_normalize.scss rename src/scss/components/{field/field.scss => _field.scss} (68%) delete mode 100644 src/scss/components/_icon.scss delete mode 100644 src/scss/components/components.scss create mode 100644 src/scss/example.scss delete mode 100644 src/scss/functions/functions.scss delete mode 100644 src/scss/helpers/_margin.scss create mode 100644 src/scss/helpers/_spacing.scss rename src/scss/helpers/{_visiblity.scss => _visibility.scss} (100%) delete mode 100644 src/scss/helpers/helpers.scss diff --git a/CHANGELOG.md b/CHANGELOG.md new file mode 100644 index 0000000..e69de29 diff --git a/README.md b/README.md index 1b43de7..1dbd38d 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,7 @@ Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions. The problem of most frameworks is they trying to hard adding a lot of styles, which has to be customized and documented -if you used it for a Project. Often these changes cause a loss of performance and raise the propability of errors. +if you used it for a Project. Often these changes cause a loss of performance and raise the probability of errors. [Documentation](https://crispy-boilerplate.readthedocs.io/en/latest/) diff --git a/dist/crispy.min.css b/dist/crispy.min.css new file mode 100644 index 0000000..8e2cb55 --- /dev/null +++ b/dist/crispy.min.css @@ -0,0 +1 @@ +html{font-size:100%}body,html{margin:0;height:100%}html,legend{-webkit-box-sizing:border-box;box-sizing:border-box}*,:after,:before{-webkit-box-sizing:inherit;box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}p{margin:0 0 .0390625em}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}a{color:#f0c209}a:hover{color:#fff}a:focus{outline:none}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.3125em}blockquote{border-left:1px solid #b3b2af;margin-left:0;padding:.625em 1.25em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 .0390625em .0390625em}ol ol,ul ul{margin-top:.01953125em}ol{list-style:decimal outside}ul{list-style:disc outside}dd,dt{margin:0}dt{font-weight:700}figure{margin:0 0 .0390625em}figcaption{margin:.0390625em 0 0}hr{border:0;border-top:1px solid #b3b2af;margin:.0390625em 0}body{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:400;line-height:1.618;color:#363636;background-color:#fff;direction:ltr;font-size:16px;font-size:1rem}.button{position:relative;display:inline-block;text-decoration:none;vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.625em 1.5625em}.button--wide{width:100%}.button--down,.button--up{position:fixed;z-index:100;margin:1.25em;padding:.5em .8125em}.button--down{top:0}.button--up{bottom:0}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.field{margin:0 0 .0390625em}.field__input{display:block;width:100%;line-height:1.618;padding:.375em .5em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px;font-size:1rem}.group--horizontal .group__item,.group--horizontal .group__section{display:inline-block}.group__section{list-style:none}.group__section,.group__section li{margin:0;padding:0}.group__section--separate .group__item:after{margin:0 .0390625em;content:"/"}.group__section--separate .group__item:last-child:after{display:none}.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.618;margin:0 0 .3125em}.h1,h1{font-size:40px;font-size:2.5rem}.h2,h2{font-size:36px;font-size:2.25rem}.h3,h3{font-size:32px;font-size:2rem}.h4,h4{font-size:28px;font-size:1.75rem}.h5,h5{font-size:24px;font-size:1.5rem}.h6,h6{font-size:20px;font-size:1.25rem}.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}.modal{position:absolute;z-index:100}.modal--fixed{position:fixed}.modal--left{left:0}.modal--top-center{left:50%}.modal--top{top:0}.modal--right{right:0}.modal--bottom{bottom:0}.modal .panel{margin:.078125em}.panel__inner{padding:.0390625em}.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 .5em;text-align:left;border-bottom:1px solid #9c9c9c}.table th{border-bottom-width:2px}.float-left{float:left}.float-right{float:right}.float-none{float:none}.center{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:50%}.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%}.margin-top-1x{margin-top:0}.margin-left-1x{margin-left:0}.margin-bottom-1x{margin-bottom:0}.margin-right-1x{margin-right:0}.padding-top-1x{padding-top:0}.padding-left-1x{padding-left:0}.padding-bottom-1x{padding-bottom:0}.padding-right-1x{padding-right:0}.margin-top-2x{margin-top:.625em}.margin-left-2x{margin-left:.625em}.margin-bottom-2x{margin-bottom:.625em}.margin-right-2x{margin-right:.625em}.padding-top-2x{padding-top:.625em}.padding-left-2x{padding-left:.625em}.padding-bottom-2x{padding-bottom:.625em}.padding-right-2x{padding-right:.625em}.margin-top-3x{margin-top:1.25em}.margin-left-3x{margin-left:1.25em}.margin-bottom-3x{margin-bottom:1.25em}.margin-right-3x{margin-right:1.25em}.padding-top-3x{padding-top:1.25em}.padding-left-3x{padding-left:1.25em}.padding-bottom-3x{padding-bottom:1.25em}.padding-right-3x{padding-right:1.25em}.margin-top-4x{margin-top:1.875em}.margin-left-4x{margin-left:1.875em}.margin-bottom-4x{margin-bottom:1.875em}.margin-right-4x{margin-right:1.875em}.padding-top-4x{padding-top:1.875em}.padding-left-4x{padding-left:1.875em}.padding-bottom-4x{padding-bottom:1.875em}.padding-right-4x{padding-right:1.875em}.margin-top-5x{margin-top:2.5em}.margin-left-5x{margin-left:2.5em}.margin-bottom-5x{margin-bottom:2.5em}.margin-right-5x{margin-right:2.5em}.padding-top-5x{padding-top:2.5em}.padding-left-5x{padding-left:2.5em}.padding-bottom-5x{padding-bottom:2.5em}.padding-right-5x{padding-right:2.5em}.margin-top-6x{margin-top:3.125em}.margin-left-6x{margin-left:3.125em}.margin-bottom-6x{margin-bottom:3.125em}.margin-right-6x{margin-right:3.125em}.padding-top-6x{padding-top:3.125em}.padding-left-6x{padding-left:3.125em}.padding-bottom-6x{padding-bottom:3.125em}.padding-right-6x{padding-right:3.125em}.text-left{text-align:left}.text-right{text-align:right}.text-center{text-align:center}.text-justify{text-align:justify}.text-italic{font-style:italic}.text-normal{font-style:normal}.text-bold{font-weight:700}.text-uppercase{text-transform:uppercase}.text-lowercase{text-transform:lowercase}.text-small{font-size:80%}.text-crossed{text-decoration:line-through}.text-default,.text-small{font-size:16px;font-size:1rem}.text-large{font-size:20px;font-size:1.25rem}.text-primary{color:#f0c209}.text-secondary{color:#b3b2af}.text-success{color:#5cb85c}.text-warning{color:#f0ad4e}.text-danger{color:#d9534f}.text-info{color:#0090d4}.background-primary{background-color:#f0c209}.background-secondary{background-color:#b3b2af}.background-success{background-color:#5cb85c}.background-warning{background-color:#f0ad4e}.background-danger{background-color:#d9534f}.background-info{background-color:#0090d4}.hide{display:none}.show{display:block}.show--inline{display:inline}.width-25{width:25%}.width-50{width:50%}.width-75{width:75%}.width-100{width:100%} \ No newline at end of file diff --git a/docs/index.rst b/docs/index.rst index 2437da9..1b43de7 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -41,5 +41,3 @@ To overwrite defaults simple add your own config-file after importing crispy: "crispy", "config"; ``` - -## Typography diff --git a/docs/typography.rst b/docs/typography.rst new file mode 100644 index 0000000..e69de29 diff --git a/example/_components.scss b/example/_components.scss new file mode 100644 index 0000000..6400d79 --- /dev/null +++ b/example/_components.scss @@ -0,0 +1,3 @@ +@import + 'components/button' + 'components/nav'; diff --git a/example/_config.scss b/example/_config.scss new file mode 100644 index 0000000..e69de29 diff --git a/example/_site.scss b/example/_site.scss new file mode 100644 index 0000000..4e7ff98 --- /dev/null +++ b/example/_site.scss @@ -0,0 +1,3 @@ +@import + 'site/header' + 'site/footer'; diff --git a/example/_templates.scss b/example/_templates.scss new file mode 100644 index 0000000..9fe4434 --- /dev/null +++ b/example/_templates.scss @@ -0,0 +1,2 @@ +@import + 'templates/home'; diff --git a/example/components/_button.scss b/example/components/_button.scss index f824ade..7ab3f35 100644 --- a/example/components/_button.scss +++ b/example/components/_button.scss @@ -6,12 +6,9 @@ * */ - -@mixin example__button() +@mixin components__button() { .button { - border: 1px solid darken($crispy__color-primary, 10%); - background-color: $crispy__color-primary; - color: white; + } } diff --git a/example/components/_nav.scss b/example/components/_nav.scss index daaa8e6..4637e90 100644 --- a/example/components/_nav.scss +++ b/example/components/_nav.scss @@ -6,10 +6,9 @@ * */ - -@mixin example__nav() +@mixin components__nav() { .nav { - + } } diff --git a/example/example.scss b/example/example.scss index b993ba6..9802744 100644 --- a/example/example.scss +++ b/example/example.scss @@ -1,9 +1,9 @@ @import - '../scss/crispy', - - 'site/container', - 'components/button', - 'templates/home'; + 'config', + 'crispy', + 'site', + 'components', + 'templates'; // components @include crispy__button(); @@ -12,15 +12,14 @@ // helpers @include crispy__float(); -@include crispy__margin(); +@include crispy__spacing(); @include crispy__media(); @include crispy__text(); @include crispy__width(); // example -@include example__container(); -@include example__header(); -@include example__footer(); -@include example__button(); -@include example__nav(); -@include example__home(); +@include site__header(); +@include site__footer(); +@include components__button(); +@include components__nav(); +@include templates__home(); diff --git a/example/site/_footer.scss b/example/site/_footer.scss index fbf8fb6..5bee2b3 100644 --- a/example/site/_footer.scss +++ b/example/site/_footer.scss @@ -6,8 +6,7 @@ * */ - -@mixin example__footer() +@mixin site__footer() { .footer { diff --git a/example/site/_header.scss b/example/site/_header.scss index 9ee524e..b6c502b 100644 --- a/example/site/_header.scss +++ b/example/site/_header.scss @@ -7,10 +7,10 @@ */ -@mixin example__header() { +@mixin site__header() { .header { &__title { - + } &__logo { diff --git a/example/templates/_home.scss b/example/templates/_home.scss index 3caddfd..9050d45 100644 --- a/example/templates/_home.scss +++ b/example/templates/_home.scss @@ -6,7 +6,7 @@ * */ -@mixin example__home() +@mixin templates__home() { - + } diff --git a/mix-manifest.json b/mix-manifest.json new file mode 100644 index 0000000..f08dbef --- /dev/null +++ b/mix-manifest.json @@ -0,0 +1,3 @@ +{ + "/dist/crispy.min.css": "/dist/crispy.min.css" +} diff --git a/package-lock.json b/package-lock.json index 684614d..a9b3ee2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "crispy-boilerplate", - "version": "1.0.1", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -1253,6 +1253,11 @@ "multicast-dns-service-types": "^1.1.0" } }, + "bootstrap": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.2.1.tgz", + "integrity": "sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q==" + }, "brace-expansion": { "version": "1.1.8", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz", @@ -1991,6 +1996,31 @@ "sha.js": "^2.4.8" } }, + "cross-env": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz", + "integrity": "sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==", + "dev": true, + "requires": { + "cross-spawn": "^6.0.5", + "is-windows": "^1.0.0" + }, + "dependencies": { + "cross-spawn": { + "version": "6.0.5", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz", + "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==", + "dev": true, + "requires": { + "nice-try": "^1.0.4", + "path-key": "^2.0.1", + "semver": "^5.5.0", + "shebang-command": "^1.2.0", + "which": "^1.2.9" + } + } + } + }, "cross-spawn": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz", @@ -5974,6 +6004,12 @@ "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=", "dev": true }, + "nice-try": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", + "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==", + "dev": true + }, "no-case": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", @@ -6799,6 +6835,17 @@ } } }, + "postcss-css-variables": { + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.11.0.tgz", + "integrity": "sha512-pjqWnJSy8zoentAhRIph/DiOX0EZmT/dpmVbpdSrCSdkdqstl2ViBlAfIIuHvHI+baTV8Gd+WzsVFjDZqVn4dg==", + "dev": true, + "requires": { + "escape-string-regexp": "^1.0.3", + "extend": "^3.0.1", + "postcss": "^6.0.8" + } + }, "postcss-discard-comments": { "version": "2.0.4", "resolved": "http://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz", @@ -10686,7 +10733,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -10792,7 +10840,8 @@ "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, @@ -11584,7 +11633,8 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", @@ -11609,7 +11659,8 @@ "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", diff --git a/package.json b/package.json index 2ba4590..cc18022 100644 --- a/package.json +++ b/package.json @@ -1,17 +1,29 @@ { - "name": "crispy-boilerplate", - "version": "1.1.0", - "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions", - "repository": { - "type": "git", - "url": "git@gitlab.tentakelfabrik.de:tentakelfabrik/crispy-boilerplate.git" - }, - "author": "Björn Hase", - "license": "MIT", - "devDependencies": { - "laravel-mix": "^2.1.14" - }, - "dependencies": { - "normalize-scss": "^7.0.1" - } + "name": "crispy-boilerplate", + "version": "1.2.0", + "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions", + "repository": { + "type": "git", + "url": "git@gitlab.tentakelfabrik.de:tentakelfabrik/crispy-boilerplate.git" + }, + "scripts": { + "dev": "npm run development", + "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", + "watch": "npm run development -- --watch", + "watch-poll": "npm run watch -- --watch-poll", + "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", + "prod": "npm run production", + "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" + }, + "author": "Björn Hase", + "license": "MIT", + "devDependencies": { + "cross-env": "^5.2.0", + "laravel-mix": "^2.1.14", + "postcss-css-variables": "^0.11.0" + }, + "dependencies": { + "bootstrap": "^4.2.1", + "normalize-scss": "^7.0.1" + } } diff --git a/src/scss/_components.scss b/src/scss/_components.scss new file mode 100644 index 0000000..5894e51 --- /dev/null +++ b/src/scss/_components.scss @@ -0,0 +1,10 @@ +@import + 'components/button', + 'components/code', + 'components/group', + 'components/heading', + 'components/hero', + 'components/modal', + 'components/panel', + 'components/table', + 'components/field'; diff --git a/src/scss/_config.scss b/src/scss/_config.scss index be23ac3..c96a368 100644 --- a/src/scss/_config.scss +++ b/src/scss/_config.scss @@ -6,16 +6,15 @@ * */ -// @TODO adding colors for link and hover - // font $crispy__font-size: 16px !default; $crispy__golden-ratio: 1.618 !default; $crispy__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default; $crispy__direction: ltr !default; -// margin -$crispy__margin: 10px !default; +// spacing +$crispy__spacing: toEm(10px) !default; +$crispy__spacing__steps: 5 !default; // colors $crispy__color-primary: #f0c209 !default; @@ -27,6 +26,7 @@ $crispy__color-info: #0090d4 !default; $crispy__color-text: #363636 !default; $crispy__color-border: #d0d0d0 !default; $crispy__color-background: #ffffff !default; +$crispy__color-hover: #ffffff !default; // breakpoints $crispy__xs: 576px !default; diff --git a/src/scss/_core.scss b/src/scss/_core.scss new file mode 100644 index 0000000..870a799 --- /dev/null +++ b/src/scss/_core.scss @@ -0,0 +1,140 @@ +/** + * normalize + * + * + * @author Björn Hase + * + */ + +@import 'normalize'; + +@mixin crispy__core() { + 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; + } + + // paragraphs + p { + margin: toEm(0 0 $crispy__spacing 0); + } + + // Semantic text elements + a, + ins, + u { + text-decoration-skip: ink edges; + } + + a { + color: $crispy__color-primary; + + &:hover { + color: $crispy__color-hover; + } + + &:focus { + outline: none; + } + } + + abbr[title] { + border-bottom: 1px dotted; + cursor: help; + text-decoration: none; + } + + mark { + padding: toEm(5px); + } + + // blockquote + blockquote { + border-left: 1px solid $crispy__color-secondary; + margin-left: 0; + padding: toEm(10px 20px); + + p:last-child { + margin-bottom: 0; + } + } + + // lists + dl, + ol, + ul { + padding: 0; + margin: toEm(0 0 $crispy__spacing $crispy__spacing); + } + + ol ol, + ul ul { + margin-top: toEm(($crispy__spacing / 2)); + } + + ol { + list-style: decimal outside; + } + + ul { + list-style: disc outside; + } + + dd, + dt { + margin: 0; + } + + dt { + font-weight: bold; + } + + // media + figure { + margin: toEm(0 0 $crispy__spacing); + } + + figcaption { + margin: toEm($crispy__spacing 0 0); + } + + // divider + hr { + border: 0; + border-top: 1px solid $crispy__color-secondary; + margin: toEm($crispy__spacing 0); + } + + // body + body { + font-family: $crispy__font-family; + font-weight: normal; + line-height: $crispy__golden-ratio; + color: $crispy__color-text; + background-color: $crispy__color-background; + direction: $crispy__direction; + + @include crispy__font-size($crispy__font-size); + } +} diff --git a/src/scss/_functions.scss b/src/scss/_functions.scss new file mode 100644 index 0000000..57fe93c --- /dev/null +++ b/src/scss/_functions.scss @@ -0,0 +1,3 @@ +@import + 'functions/units', + 'functions/zIndex'; diff --git a/src/scss/_helpers.scss b/src/scss/_helpers.scss new file mode 100644 index 0000000..0eb26ad --- /dev/null +++ b/src/scss/_helpers.scss @@ -0,0 +1,7 @@ +@import + 'helpers/float', + 'helpers/spacing', + 'helpers/media', + 'helpers/text', + 'helpers/visibility', + 'helpers/width'; diff --git a/src/scss/mixins/mixins.scss b/src/scss/_mixins.scss similarity index 89% rename from src/scss/mixins/mixins.scss rename to src/scss/_mixins.scss index 6407141..9dcba22 100644 --- a/src/scss/mixins/mixins.scss +++ b/src/scss/_mixins.scss @@ -1,6 +1,6 @@ @import - 'fonts', - 'media-queries'; + 'mixins/fonts', + 'mixins/media-queries'; /** * clearfix to end floating diff --git a/src/scss/_normalize.scss b/src/scss/_normalize.scss deleted file mode 100644 index b93a688..0000000 --- a/src/scss/_normalize.scss +++ /dev/null @@ -1,139 +0,0 @@ -/** - * normalize - * - * - * @author Björn Hase - * - */ - -@import - 'normalize'; - -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; -} - -// paragraphs -p { - margin: toEm(0 0 $crispy__margin 0); -} - -// Semantic text elements -a, -ins, -u { - text-decoration-skip: ink edges; -} - -a { - color: $crispy__color-primary; - - &:hover { - color: $crispy__color-hover; - } - - &:focus { - outline: none; - } -} - -abbr[title] { - border-bottom: 1px dotted; - cursor: help; - text-decoration: none; -} - -mark { - padding: toEm(5px); -} - -// blockquote -blockquote { - border-left: 1px solid $crispy__color-secondary; - margin-left: 0; - padding: toEm(10px 20px); - - p:last-child { - margin-bottom: 0; - } -} - -// lists -dl, -ol, -ul { - padding: 0; - margin: toEm(0 0 $crispy__margin $crispy__margin); -} - -ol ol, -ul ul { - margin-top: toEm(($crispy__margin / 2)); -} - -ol { - list-style: decimal outside; -} - -ul { - list-style: disc outside; -} - -dd, -dt { - margin: 0; -} - -dt { - font-weight: bold; -} - -// media -figure { - margin: toEm(0 0 $crispy__margin); -} - -figcaption { - margin: toEm($crispy__margin 0 0); -} - -// divider -hr { - border: 0; - border-top: 1px solid $crispy__color-secondary; - margin: toEm($crispy__margin 0); -} - -// body -body { - font-family: $crispy__font-family; - font-weight: normal; - line-height: $crispy__golden-ratio; - color: $crispy__color-text; - background-color: $crispy__color-background; - direction: $crispy__direction; - - @include crispy__font-size($crispy__font-size); -} diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 4c7a375..49f236b 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -1,12 +1,11 @@ /** - * component: button + * components: button * * * @author Björn Hase * */ - $crispy__button__padding: toEm(10px 25px) !default; $crispy__button__up__margin: toEm(20px) !default; diff --git a/src/scss/components/_code.scss b/src/scss/components/_code.scss index a981148..9f59243 100644 --- a/src/scss/components/_code.scss +++ b/src/scss/components/_code.scss @@ -11,11 +11,10 @@ * */ - $crispy__code__font-size: $crispy__font-size !default; $crispy__code__font-family: monospace, monospace !default; $crispy__code__padding: toEm(10px 20px) !default; -$crispy__code__margin: toEm(0 0 $crispy__margin) !default; +$crispy__code__margin: toEm(0 0 $crispy__spacing) !default; $crispy__code__border: 1px solid $crispy__color-border !default; $crispy__code__background-color: #f9f9f9 !default; diff --git a/src/scss/components/field/field.scss b/src/scss/components/_field.scss similarity index 68% rename from src/scss/components/field/field.scss rename to src/scss/components/_field.scss index e05ec39..8f12d9e 100644 --- a/src/scss/components/field/field.scss +++ b/src/scss/components/_field.scss @@ -1,22 +1,27 @@ @import - 'checkbox', - 'label', - 'panel', - 'text', - 'radio', - 'select'; + 'field/checkbox', + 'field/label', + 'field/panel', + 'field/text', + 'field/radio', + 'field/select'; /** * component: field * - * field is a wrapper for form elements + *
+ *
* * * @author Björn Hase * */ -$crispy__field__margin: toEm(0 0 $crispy__margin 0) !default; +$crispy__field__margin: toEm(0 0 $crispy__spacing 0) !default; $crispy__field__input__font-size: $crispy__font-size !default; $crispy__field__input__padding: toEm(6px 8px) !default; diff --git a/src/scss/components/_group.scss b/src/scss/components/_group.scss index 1b3c2a9..a90c15c 100644 --- a/src/scss/components/_group.scss +++ b/src/scss/components/_group.scss @@ -11,9 +11,8 @@ * */ - $crispy__group__character: '/' !default; -$crispy__group__character__margin: toEm(0 $crispy__margin 0) !default; +$crispy__group__character__margin: toEm(0 $crispy__spacing 0) !default; @mixin crispy__group() { .group { diff --git a/src/scss/components/_heading.scss b/src/scss/components/_heading.scss index 5957d95..3d46ed5 100644 --- a/src/scss/components/_heading.scss +++ b/src/scss/components/_heading.scss @@ -9,7 +9,6 @@ * */ - $crispy__heading__font-sizes: ( 'h1': 40px, 'h2': 36px, diff --git a/src/scss/components/_hero.scss b/src/scss/components/_hero.scss index 9add3ea..98330c4 100644 --- a/src/scss/components/_hero.scss +++ b/src/scss/components/_hero.scss @@ -2,7 +2,6 @@ * component: hero * * background-size is as default: cover - Resize the background image to cover the entire container - * *
* * diff --git a/src/scss/components/_icon.scss b/src/scss/components/_icon.scss deleted file mode 100644 index 49f5344..0000000 --- a/src/scss/components/_icon.scss +++ /dev/null @@ -1,62 +0,0 @@ -/** - * component: icon - * - * use svg as icon - * - * - * - * - * - * - * @author Björn Hase - * - */ - - -$crispy__icon__vertical-align: text-bottom !default; - -$crispy__icon__sizes: ( - 'default': $crispy__font-size, - 'small': 12px, - 'large': 28px -) !default; - -@mixin crispy__icon() { - .icon { - display: inline-block; - position: relative; - vertical-align: $crispy__icon__vertical-align; - - @include crispy__icon-sizes($crispy__icon__sizes); - } -} - -/** - * adding sizes for icons from map - * - * - * @param {map} $sizes - * - */ -@mixin crispy__icon-sizes($sizes) { - @each $name, $size in $sizes { - @if ($name == 'default') { - @include crispy__icon-size($size); - } @else { - &--#{$name} { - @include crispy__icon-size($size); - } - } - } -} - -/** - * add size for icon as width and height - * - * - * @param {px} $size - * - */ -@mixin crispy__icon-size($size) { - width: $size; -} diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 9a0532e..557e208 100644 --- a/src/scss/components/_modal.scss +++ b/src/scss/components/_modal.scss @@ -10,7 +10,7 @@ */ -$crispy__modal__margin: toEm($crispy__margin * 2) !default; +$crispy__modal__margin: toEm($crispy__spacing * 2) !default; $crispy__modal__z-index: zIndex('modal') !default; @mixin crispy__modal { diff --git a/src/scss/components/_panel.scss b/src/scss/components/_panel.scss index f64828c..a144f43 100644 --- a/src/scss/components/_panel.scss +++ b/src/scss/components/_panel.scss @@ -11,8 +11,7 @@ * */ - -$crispy__panel__padding: toEm($crispy__margin) !default; +$crispy__panel__padding: toEm($crispy__spacing) !default; @mixin crispy__panel { .panel { diff --git a/src/scss/components/_table.scss b/src/scss/components/_table.scss index 706d79a..affe109 100644 --- a/src/scss/components/_table.scss +++ b/src/scss/components/_table.scss @@ -20,7 +20,6 @@ * */ - $crispy__table__padding: toEm(10px 8px) !default; $crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default; diff --git a/src/scss/components/components.scss b/src/scss/components/components.scss deleted file mode 100644 index b525c08..0000000 --- a/src/scss/components/components.scss +++ /dev/null @@ -1,36 +0,0 @@ -@import - 'button', - 'code', - 'group', - 'heading', - 'hero', - 'icon', - 'modal', - 'panel', - 'table', - 'field/field'; - -/** - * shortcut to adding all components - * - * - */ -@mixin cripsy__components() -{ - @include crispy__button(); - @include crispy__code(); - @include crispy__group(); - @include crispy__heading(); - @include crispy__hero(); - @include crispy__icon(); - @include crispy__modal(); - @include crispy__panel(); - @include crispy__table(); - @include crispy__field(); - @include crispy__field__text(); - @include crispy__field__checkbox(); - @include crispy__field__radio(); - @include crispy__field__select(); - @include crispy__field__panel(); - @include crispy__field__label(); -} diff --git a/src/scss/components/field/_panel.scss b/src/scss/components/field/_panel.scss index 45c8eb5..549a5da 100644 --- a/src/scss/components/field/_panel.scss +++ b/src/scss/components/field/_panel.scss @@ -13,7 +13,7 @@ * */ -$crispy__field__panel__padding: toEm($crispy__margin) !default; +$crispy__field__panel__padding: toEm($crispy__spacing) !default; $crispy__field__panel__color: white !default; $crispy__field__panel__background-color--valid: $crispy__color-success !default; $crispy__field__panel__background-color--error: $crispy__color-danger !default; diff --git a/src/scss/components/field/_radio.scss b/src/scss/components/field/_radio.scss index d73efbe..0318273 100644 --- a/src/scss/components/field/_radio.scss +++ b/src/scss/components/field/_radio.scss @@ -4,12 +4,12 @@ *
* * *
* diff --git a/src/scss/crispy.scss b/src/scss/crispy.scss index 39b459d..89988af 100644 --- a/src/scss/crispy.scss +++ b/src/scss/crispy.scss @@ -1,8 +1,26 @@ @import - 'functions/functions', - 'mixins/mixins', - + 'functions', + 'mixins', 'config', - 'normalize', - 'components/components', - 'helpers/helpers'; + 'core', + 'components', + 'helpers'; + +// components +@include crispy__core(); +@include crispy__button(); +@include crispy__field(); +@include crispy__group(); +@include crispy__heading(); +@include crispy__hero(); +@include crispy__modal(); +@include crispy__panel(); +@include crispy__table(); + +// helpers +@include crispy__float(); +@include crispy__media(); +@include crispy__spacing(); +@include crispy__text(); +@include crispy__visibility(); +@include crispy__width(); diff --git a/src/scss/example.scss b/src/scss/example.scss new file mode 100644 index 0000000..2ef84d9 --- /dev/null +++ b/src/scss/example.scss @@ -0,0 +1,2 @@ +@import + 'crispy'; diff --git a/src/scss/functions/_zIndex.scss b/src/scss/functions/_zIndex.scss index 7a668ed..d405b7e 100644 --- a/src/scss/functions/_zIndex.scss +++ b/src/scss/functions/_zIndex.scss @@ -1,6 +1,7 @@ /** * function: z-index * + * uses map $crispy__z-index to get value by key * * @author Björn Hase * diff --git a/src/scss/functions/functions.scss b/src/scss/functions/functions.scss deleted file mode 100644 index fcd265d..0000000 --- a/src/scss/functions/functions.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import - 'units', - 'zIndex'; diff --git a/src/scss/helpers/_margin.scss b/src/scss/helpers/_margin.scss deleted file mode 100644 index 12ca85f..0000000 --- a/src/scss/helpers/_margin.scss +++ /dev/null @@ -1,61 +0,0 @@ -/** - * helper: margin - * - * - * - * @author Björn Hase - * - */ - -$crispy__margin-top: toEm($crispy__margin) !default; -$crispy__margin-bottom: toEm($crispy__margin) !default; - -@mixin crispy__margin() { - .margin-top-0x { - margin-top: 0; - } - - .margin-top-1x { - margin-top: $crispy__margin-top; - } - - .margin-top-2x { - margin-top: $crispy__margin-top * 2; - } - - .margin-top-3x { - margin-top: $crispy__margin-top * 3; - } - - .margin-top-4x { - margin-top: $crispy__margin-top * 4; - } - - .margin-top-5x { - margin-top: $crispy__margin-top * 5; - } - - .margin-bottom-0x { - margin-bottom: 0; - } - - .margin-bottom-1x { - margin-bottom: $crispy__margin-bottom; - } - - .margin-bottom-2x { - margin-bottom: $crispy__margin-bottom * 2; - } - - .margin-bottom-3x { - margin-bottom: $crispy__margin-bottom * 3; - } - - .margin-bottom-4x { - margin-bottom: $crispy__margin-bottom * 4; - } - - .margin-bottom-5x { - margin-bottom: $crispy__margin-bottom * 5; - } -} diff --git a/src/scss/helpers/_media.scss b/src/scss/helpers/_media.scss index c2fdee5..1624583 100644 --- a/src/scss/helpers/_media.scss +++ b/src/scss/helpers/_media.scss @@ -1,6 +1,6 @@ /** * helper: media - * + * * for img & video * * diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss new file mode 100644 index 0000000..aa13573 --- /dev/null +++ b/src/scss/helpers/_spacing.scss @@ -0,0 +1,43 @@ +/** + * helper: spacing + * + * + * @author Björn Hase + * + */ + +@mixin crispy__spacing() { + @for $i from 0 through $crispy__spacing__steps { + .margin-top-#{($i + 1)}x { + margin-top: ($crispy__spacing * $i); + } + + .margin-left-#{($i + 1)}x { + margin-left: ($crispy__spacing * $i); + } + + .margin-bottom-#{($i + 1)}x { + margin-bottom: ($crispy__spacing * $i); + } + + .margin-right-#{($i + 1)}x { + margin-right: ($crispy__spacing * ($i)); + } + + .padding-top-#{($i + 1)}x { + padding-top: ($crispy__spacing * $i); + } + + .padding-left-#{($i + 1)}x { + padding-left: ($crispy__spacing * $i); + } + + .padding-bottom-#{($i + 1)}x { + padding-bottom: ($crispy__spacing * $i); + } + + .padding-right-#{($i + 1)}x { + padding-right: ($crispy__spacing * $i); + } + } +} diff --git a/src/scss/helpers/_text.scss b/src/scss/helpers/_text.scss index db35e16..f3c25d5 100644 --- a/src/scss/helpers/_text.scss +++ b/src/scss/helpers/_text.scss @@ -8,7 +8,6 @@ * */ - $crispy__text-colors: $crispy__colors !default; $crispy__text-font-sizes: $crispy__font-sizes !default; diff --git a/src/scss/helpers/_visiblity.scss b/src/scss/helpers/_visibility.scss similarity index 100% rename from src/scss/helpers/_visiblity.scss rename to src/scss/helpers/_visibility.scss diff --git a/src/scss/helpers/helpers.scss b/src/scss/helpers/helpers.scss deleted file mode 100644 index ef398bb..0000000 --- a/src/scss/helpers/helpers.scss +++ /dev/null @@ -1,20 +0,0 @@ -@import - 'float', - 'margin', - 'media', - 'text', - 'width'; - -/** - * shortcut to include all helpers - * - * - */ -@mixin crispy__helpers() -{ - @include crispy__float(); - @include crispy__margin(); - @include crispy__media(); - @include crispy__text(); - @include crispy__width(); -} diff --git a/webpack.mix.js b/webpack.mix.js index 419bf4b..6b0b0d6 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -11,9 +11,9 @@ let mix = require('laravel-mix'); | */ -mix.sass([ - 'src/sass/crispy.scss', - ], 'dist/') + mix.sass('src/scss/example.scss', 'dist/crispy.min.css', { + includePaths: ["node_modules/normalize-scss/sass"] + }) .options({ postCss: [ require('postcss-css-variables')()