From af562c13115c7afc6054b24417cf512c32dbb9fc Mon Sep 17 00:00:00 2001 From: nirgendswo Date: Wed, 16 Aug 2017 14:23:02 +0200 Subject: [PATCH] adding body --- .gitignore | 6 +++++ LICENSE | 2 +- package.json | 14 +++++++++++ scss/CrispyBoilerplate.scss | 15 +++++++++++ scss/components/body.scss | 34 +++++++++++++++++++++++++ scss/components/button.scss | 33 ++++++++++++++++++++++++ scss/components/heading.scss | 42 +++++++++++++++++++++++++++++++ scss/components/icon.scss | 27 ++++++++++++++++++++ scss/components/list.scss | 33 ++++++++++++++++++++++++ scss/components/normalize.scss | 46 ++++++++++++++++++++++++++++++++++ scss/example.scss | 8 ++++++ scss/functions/units.scss | 45 +++++++++++++++++++++++++++++++++ scss/functions/z-index.scss | 22 ++++++++++++++++ scss/mixins/clearfix.scss | 19 ++++++++++++++ scss/mixins/fontSize.scss | 10 ++++++++ 15 files changed, 355 insertions(+), 1 deletion(-) create mode 100644 .gitignore create mode 100644 package.json create mode 100644 scss/CrispyBoilerplate.scss create mode 100644 scss/components/body.scss create mode 100644 scss/components/button.scss create mode 100644 scss/components/heading.scss create mode 100644 scss/components/icon.scss create mode 100644 scss/components/list.scss create mode 100644 scss/components/normalize.scss create mode 100644 scss/example.scss create mode 100644 scss/functions/units.scss create mode 100644 scss/functions/z-index.scss create mode 100644 scss/mixins/clearfix.scss create mode 100644 scss/mixins/fontSize.scss diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7d7fbec --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +node_modules +build +*.DS_Store +Thumbs.db +.idea +*.log diff --git a/LICENSE b/LICENSE index 28b32b5..816519a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,6 @@ MIT License -Copyright (c) 2017 Nirgendswo +Copyright (c) 2017 Björn Hase Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal diff --git a/package.json b/package.json new file mode 100644 index 0000000..9b0d36a --- /dev/null +++ b/package.json @@ -0,0 +1,14 @@ +{ + "name": "crispy-boilerplate", + "version": "0.1.0", + "description": "Flat Sass Framework, to give you a amount of Basic Settings, Mixins and Functions", + "repository": { + "type": "git", + "url": "git@github.com:nirgendswo/crispy-boilerplate.git" + }, + "author": "Björn Hase", + "license": "MIT", + "dependencies": { + "normalize.css": "^7.0.0", + } +} diff --git a/scss/CrispyBoilerplate.scss b/scss/CrispyBoilerplate.scss new file mode 100644 index 0000000..e0f6283 --- /dev/null +++ b/scss/CrispyBoilerplate.scss @@ -0,0 +1,15 @@ +@import + '../../node_modules/normalize.css/normalize.css' + + 'functions/units', + 'functions/z-index', + + 'mixins/clearfix', + 'mixins/fontSize', + + 'components/button', + 'components/body', + 'components/icon', + 'components/heading', + 'components/normalize', + 'components/list'; diff --git a/scss/components/body.scss b/scss/components/body.scss new file mode 100644 index 0000000..358225e --- /dev/null +++ b/scss/components/body.scss @@ -0,0 +1,34 @@ +/** + * body + * + * + * + * @author Björn Hase + * + */ + +$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; + +$body__color: black !default; +$body__backgroun-color: white !default; + +@mixin cripsy-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; + } +} diff --git a/scss/components/button.scss b/scss/components/button.scss new file mode 100644 index 0000000..abbd2b5 --- /dev/null +++ b/scss/components/button.scss @@ -0,0 +1,33 @@ +/** + * Buttons + * + * mixin for basic styles of buttons + * + * @author Björn Hase + * + */ + +@mixin cripsy-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; + } +} diff --git a/scss/components/heading.scss b/scss/components/heading.scss new file mode 100644 index 0000000..9005a8e --- /dev/null +++ b/scss/components/heading.scss @@ -0,0 +1,42 @@ +@import + '../mixins/units', + '../mixins/fontSize'; + +/** + * heading + * + * basic styles for heading + * + * @author Björn Hase + * + */ + +$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: 0 0 pxToEm(20px) !default; + +@mixin cripsy-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; + } + } +} diff --git a/scss/components/icon.scss b/scss/components/icon.scss new file mode 100644 index 0000000..778c5d0 --- /dev/null +++ b/scss/components/icon.scss @@ -0,0 +1,27 @@ +/** + * icon + * + * basic styles for icon + * + * + * + * + * + * + * @author Björn Hase + * + */ + +$icon__vertical-align: middle !default; +$icon__margin: 0 2px !default; + +@mixin cripsy-boilerplate-icon() { + .icon { + display: inline-block; + position: relative; + vertical-align: $icon__vertical-align; + margin: $icon__margin; + + @content; + } +} diff --git a/scss/components/list.scss b/scss/components/list.scss new file mode 100644 index 0000000..7d013c9 --- /dev/null +++ b/scss/components/list.scss @@ -0,0 +1,33 @@ +/** + * list + * + * styles and mixins for ul-element + * + * + * @author Björn Hase + * + */ + +@mixin cripsy-boilerplate-list { + .list { + list-style-position: outside; + + &--horizontal { + .list__item { + float: left; + } + } + } + + .d-list { + &--horizontal { + .d-list__title, .d-list__content { + float: left; + } + + .d-list__content { + clear: left; + } + } + } +} diff --git a/scss/components/normalize.scss b/scss/components/normalize.scss new file mode 100644 index 0000000..4d1692b --- /dev/null +++ b/scss/components/normalize.scss @@ -0,0 +1,46 @@ +/** + * normalize + * + * + * @author Björn Hase + * + */ + +$normalize__margin: 0 0 pxToEm(20px) !default; + +@mixin cripsy-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; +} diff --git a/scss/example.scss b/scss/example.scss new file mode 100644 index 0000000..41c43e4 --- /dev/null +++ b/scss/example.scss @@ -0,0 +1,8 @@ +@import + 'CrispyBoilerplate'; + +@include cripsy-boilerplate-normalize(); +@include cripsy-boilerplate-body(); +@include crispy-boilerplate-heading(); +@include cripsy-boilerplate-icon(); +@include cripsy-boilerplate-list(); diff --git a/scss/functions/units.scss b/scss/functions/units.scss new file mode 100644 index 0000000..0d37927 --- /dev/null +++ b/scss/functions/units.scss @@ -0,0 +1,45 @@ +$base__font-size: 16px !default; +$base__line-height: 1.5 !default; + +/** + * calculate pixel value to em + * + * @param {px} $font-size + * @return {em} + */ +@function pxToEm($font-size) { + @return ($font-size / $base__font-size) * 1em; +} + +/** + * calculate px value to rem + * + * @param {px} $px + * @param {px} $font-size + * @return {em} + */ +@function pxToRem($font-size) { + @return ($font-size / $base__font-size) * 1rem; +} + +/** + * calculate em value to rem + * + * @param {em} $value + * @param {px} $font-size + * @return {px} + */ +@function emToPx($value, $font-size: $base__font-size) { + @return ($value * $font-size) * 1px; +} + +/** + * calculate line-height with font-size + * + * @param {px} $font-size + * @param {unitless} $base-line-height + * @return {unitless} + */ +@function lineHeight($font-size, $line-height: $base-line-height) { + @return unitless(emToPx($line-height * 1em) / $font-size); +} diff --git a/scss/functions/z-index.scss b/scss/functions/z-index.scss new file mode 100644 index 0000000..6cf804c --- /dev/null +++ b/scss/functions/z-index.scss @@ -0,0 +1,22 @@ +/** + * + * + * + * + * @author Björn Hase + * + */ + +$z-indexes: ( + 'site-header': 100, + 'modal': 1000 +) !default; + +@function z-index($name) { + @if index($z-indexes, $name) { + @return map($z-indexes, $name); + } @else { + @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}'; + @return null; + } +} diff --git a/scss/mixins/clearfix.scss b/scss/mixins/clearfix.scss new file mode 100644 index 0000000..bf1317e --- /dev/null +++ b/scss/mixins/clearfix.scss @@ -0,0 +1,19 @@ +/** + * clearfix + * + * + * @author Björn Hase + * + */ + +@mixin clearfix() { + &::before, + &::after { + display: table; + content: ' '; + } + + &::after { + clear: both; + } +} diff --git a/scss/mixins/fontSize.scss b/scss/mixins/fontSize.scss new file mode 100644 index 0000000..712d1f8 --- /dev/null +++ b/scss/mixins/fontSize.scss @@ -0,0 +1,10 @@ +/** + * add font-size with fallback + * + * @param {px} $font-size + * + */ +@mixin fontSize($font-size) { + font-size: $font-size; + font-size: pxToRem($font-size); +}