From e6363e179d9fdd0e430891fc42d0b3859f33cf51 Mon Sep 17 00:00:00 2001 From: simongehrig Date: Thu, 12 Jan 2017 10:24:32 +0100 Subject: [PATCH] Initial Import --- _01-mixins-layout.scss | 32 ++++++++++++++++++++ _01-mixins-media-queries.scss | 46 ++++++++++++++++++++++++++++ _02-reset.scss | 56 +++++++++++++++++++++++++++++++++++ 3 files changed, 134 insertions(+) create mode 100644 _01-mixins-layout.scss create mode 100644 _01-mixins-media-queries.scss create mode 100644 _02-reset.scss diff --git a/_01-mixins-layout.scss b/_01-mixins-layout.scss new file mode 100644 index 0000000..d3bce1d --- /dev/null +++ b/_01-mixins-layout.scss @@ -0,0 +1,32 @@ +@mixin cols($columns, $gutter) { + /* Wrapper inside Element needed + because of gutter >* */ + + /* Positioning */ + position: relative; + display: inline-block; + /* Sizing */ + box-sizing: border-box; + //width: (100%/$columns) - (0.3 + ($columns * 0.3)); + width: (100%/$columns); + margin: 0 -4px 0 0 !important; + padding: 0 !important; + border: none !important; + + letter-spacing: 0; + /* Gutter */ + padding-right: $gutter !important; + padding-bottom: $gutter !important; + &:before { + } + &:after { + } + &:nth-of-type(#{$columns}) { + border-right: none; + } + + > * { + width: 100%; + box-sizing: border-box; + } +} \ No newline at end of file diff --git a/_01-mixins-media-queries.scss b/_01-mixins-media-queries.scss new file mode 100644 index 0000000..f453f43 --- /dev/null +++ b/_01-mixins-media-queries.scss @@ -0,0 +1,46 @@ +/* + +Widths + +*/ + +$phone-width: 480px; +$tablet-width: 768px; +$notebook-width: 1024px; +$desktop-width: 1280px; + +/* + +Queries + +*/ +@mixin phone { + @media(max-width: $tablet-width) { + @content + } +} + +@mixin tablet { + @media /*(min-width: $tablet-width) and*/ + (max-width: $notebook-width) { + @content + } +} + +@mixin notebook { + @media(min-width: $notebook-width) and (max-width: $desktop-width) { + @content + } +} + +@mixin desktop { + @media(min-width: $desktop-width) { + @content + } +} + +@mixin print { + @media print { + @content + } +} \ No newline at end of file diff --git a/_02-reset.scss b/_02-reset.scss new file mode 100644 index 0000000..5cf8e7e --- /dev/null +++ b/_02-reset.scss @@ -0,0 +1,56 @@ +@CHARSET "ISO-8859-1"; + +/* RESET + + SOURCE: + http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) + +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +ol, ul { + list-style: none; +} + +blockquote, q { + quotes: none; +} + +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0 !important; +} \ No newline at end of file