From 8c6799ab8dcd573a4ccfebce78d41081f46957e8 Mon Sep 17 00:00:00 2001 From: simongehrig Date: Fri, 17 Feb 2017 12:37:33 +0100 Subject: [PATCH] Structuring --- .idea/misc.xml | 4 - .idea/vagrant.xml | 7 ++ .idea/vcs.xml | 6 ++ Gemfile | 3 + Rakefile | 0 examples/example.scss | 1 + framework.scss | 14 ++- mixins/css/filters.scss | 0 mixins/css/{_02-reset.scss => reset.scss} | 0 mixins/fx/camera.scss | 28 ++++++ .../{_01-mixins-layout.scss => layout.scss} | 2 +- mixins/queries/_01-mixins-media-queries.scss | 46 ---------- mixins/queries/media-queries.scss | 91 +++++++++++++++++++ 13 files changed, 150 insertions(+), 52 deletions(-) create mode 100644 .idea/vagrant.xml create mode 100644 .idea/vcs.xml create mode 100644 Gemfile create mode 100644 Rakefile create mode 100644 examples/example.scss create mode 100644 mixins/css/filters.scss rename mixins/css/{_02-reset.scss => reset.scss} (100%) create mode 100644 mixins/fx/camera.scss rename mixins/layout/{_01-mixins-layout.scss => layout.scss} (96%) delete mode 100644 mixins/queries/_01-mixins-media-queries.scss create mode 100644 mixins/queries/media-queries.scss diff --git a/.idea/misc.xml b/.idea/misc.xml index 998d1f9..0ff5cf6 100644 --- a/.idea/misc.xml +++ b/.idea/misc.xml @@ -13,8 +13,4 @@ - - \ No newline at end of file diff --git a/.idea/vagrant.xml b/.idea/vagrant.xml new file mode 100644 index 0000000..a5aa786 --- /dev/null +++ b/.idea/vagrant.xml @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..80c8620 --- /dev/null +++ b/Gemfile @@ -0,0 +1,3 @@ +source :rubygems + +gem "autoprefixer-rails" \ No newline at end of file diff --git a/Rakefile b/Rakefile new file mode 100644 index 0000000..e69de29 diff --git a/examples/example.scss b/examples/example.scss new file mode 100644 index 0000000..e782d14 --- /dev/null +++ b/examples/example.scss @@ -0,0 +1 @@ +@import "../framework"; \ No newline at end of file diff --git a/framework.scss b/framework.scss index f3afc43..61c9306 100644 --- a/framework.scss +++ b/framework.scss @@ -1 +1,13 @@ -/* Simons SCSS Framework */ \ No newline at end of file +/* Simons SCSS Framework */ + +/* Basic CSS Functions */ +@import "mixins/css/reset"; + +/* Layout */ +@import "mixins/layout/layout"; + +/* Queries */ +@import "mixins/queries/media-queries"; + +/* FX / Effects */ +@import "mixins/fx/camera"; \ No newline at end of file diff --git a/mixins/css/filters.scss b/mixins/css/filters.scss new file mode 100644 index 0000000..e69de29 diff --git a/mixins/css/_02-reset.scss b/mixins/css/reset.scss similarity index 100% rename from mixins/css/_02-reset.scss rename to mixins/css/reset.scss diff --git a/mixins/fx/camera.scss b/mixins/fx/camera.scss new file mode 100644 index 0000000..8c3e72b --- /dev/null +++ b/mixins/fx/camera.scss @@ -0,0 +1,28 @@ +/* CONSTANTS */ + +$ZOOM-IN: 0; +$ZOOM-OUT: 1; + +$FOCUS-IN: 0; +$FOCUS-OUT: 1; + +$LINEAR:0; +$EASE:1; +$EASEINOUT:2; +$BACKWARD:3; + +/* MIXINS */ + +/// Gives the Element a focusing Effect +/// @param {int} $direction +/// @param {int} $direction +/// @param {int} $direction + +@mixin camera-focus($direction,$seconds:0.5,$pixels,$performance:0) { + /* Camera Focus Effect */ + filter: blur($pixels); + +} +@mixin camera-shake (){} + +@mixin camera-zoom (){} \ No newline at end of file diff --git a/mixins/layout/_01-mixins-layout.scss b/mixins/layout/layout.scss similarity index 96% rename from mixins/layout/_01-mixins-layout.scss rename to mixins/layout/layout.scss index d3bce1d..5d033d8 100644 --- a/mixins/layout/_01-mixins-layout.scss +++ b/mixins/layout/layout.scss @@ -4,7 +4,7 @@ /* Positioning */ position: relative; - display: inline-block; + display: inline-table; /* Sizing */ box-sizing: border-box; //width: (100%/$columns) - (0.3 + ($columns * 0.3)); diff --git a/mixins/queries/_01-mixins-media-queries.scss b/mixins/queries/_01-mixins-media-queries.scss deleted file mode 100644 index f453f43..0000000 --- a/mixins/queries/_01-mixins-media-queries.scss +++ /dev/null @@ -1,46 +0,0 @@ -/* - -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/mixins/queries/media-queries.scss b/mixins/queries/media-queries.scss new file mode 100644 index 0000000..a56f28e --- /dev/null +++ b/mixins/queries/media-queries.scss @@ -0,0 +1,91 @@ +/* + +CONSTANTS + +*/ + +$UPWARDS-OPEN: 2; +$DOWNWARDS-OPEN: 1; +$LIMITED: 0; + +/* + +Widths + +*/ + +$phone-width: 480px; +$tablet-width: 768px; +$notebook-width: 980px; +$desktop-width: 1280px; + +/* + +Queries + +*/ + +@mixin small-phone($direction:0) { + @include querybuilder(0, $phone-width, $direction) { + @content + } +} + +@mixin phone($direction:0) { + @include querybuilder($phone-width, $tablet-width, $direction) { + @content + } +} + +@mixin tablet($direction:0) { + @include querybuilder($tablet-width, $notebook-width, $direction) { + @content + } +} + +@mixin notebook($direction:0) { + @include querybuilder($notebook-width, $desktop-width, $direction) { + @content + } +} + +@mixin desktop($direction:0) { + @include querybuilder($desktop-width, 99999, $direction) { + @content + } +} + +@mixin print { + @media print { + @content + } +} + +/* + +QUERY-BUILDER + +*/ + +@mixin querybuilder($low-px, $high-px, $direction) { + @if $direction == $LIMITED { + @media (min-width: $low-px) and (max-width: $high-px - 1) { + @content + } + } @else if ($direction == $DOWNWARDS-OPEN) { + @media (max-width: $high-px - 1) { + @content + } + } @else if ($direction == $UPWARDS-OPEN) { + @media (min-width: $low-px) { + @content + } + } @else { + + /* + * ERROR @ querybuilder mixin: + * No such direction! + */ + + } +} \ No newline at end of file