summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorWilly Micieli <micieli@laposte.net>2020-02-01 16:45:03 +0100
committerWilly Micieli <micieli@laposte.net>2020-02-01 16:45:03 +0100
commit3faf0a5dc7ce331184a3f5a1591039424ca95032 (patch)
treee975d0ff7905592cf1551e2a13877b7a61a6ecae
downloadwanted-3faf0a5dc7ce331184a3f5a1591039424ca95032.zip
wanted-3faf0a5dc7ce331184a3f5a1591039424ca95032.tar.gz
start projectHEADmaster
-rw-r--r--.gitignore3
-rw-r--r--config.rb25
-rw-r--r--sass/_grid.scss118
-rw-r--r--sass/_variables.scss52
4 files changed, 198 insertions, 0 deletions
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..2a42b38
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,3 @@
+.sass-cache
+css
+.idea \ No newline at end of file
diff --git a/config.rb b/config.rb
new file mode 100644
index 0000000..5136c51
--- /dev/null
+++ b/config.rb
@@ -0,0 +1,25 @@
+require 'compass/import-once/activate'
+# Require any additional compass plugins here.
+
+# Set this to the root of your project when deployed:
+http_path = "/"
+css_dir = "css"
+sass_dir = "sass"
+images_dir = "images"
+javascripts_dir = "javascripts"
+
+# You can select your preferred output style here (can be overridden via the command line):
+# output_style = :expanded or :nested or :compact or :compressed
+
+# To enable relative paths to assets via compass helper functions. Uncomment:
+# relative_assets = true
+
+# To disable debugging comments that display the original location of your selectors. Uncomment:
+# line_comments = false
+
+
+# If you prefer the indented syntax, you might want to regenerate this
+# project again passing --syntax sass, or you can uncomment this:
+# preferred_syntax = :sass
+# and then run:
+# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
diff --git a/sass/_grid.scss b/sass/_grid.scss
new file mode 100644
index 0000000..6d53190
--- /dev/null
+++ b/sass/_grid.scss
@@ -0,0 +1,118 @@
+@import "variables";
+
+@mixin hide($suffix)
+{
+ .hide-#{$suffix} { display: none; }
+}
+
+@mixin show($suffix)
+{
+ .show-for-#{$suffix} { display: block; }
+}
+
+
+@mixin columns($suffix)
+{
+ @for $i from 1 through $grid-columns
+ {
+ .#{$suffix}-#{$i}
+ {
+
+ width: $i / $grid-columns * 100%;
+ float: left;
+ grid-gap: $grid-gap;
+ padding: 0 $grid-gap *0.5;
+ position: relative;
+ min-height: 1px;
+ }
+ }
+
+}
+.row{
+
+ margin: 0 $grid-gap * -0.5;
+ @include clearfix;
+}
+
+.wrapper {
+ display: grid;
+ grid-gap: $grid-gap;
+ grid-template-columns: 1fr;
+}
+
+
+.show-for-#{$phone-class} { display: none; }
+.show-for-#{$tablet-class} { display: none; }
+.show-for-#{$laptop-class} { display: none; }
+.show-for-#{$desktop-class} { display: none; }
+
+// PHONE
+
+@media only screen and (min-width: $phone){
+ @include columns($phone-class);
+
+ .show-for-#{$phone-class} { display: block; }
+ .show-for-#{$tablet-class} { display: none; }
+ .show-for-#{$laptop-class} { display: none; }
+ .show-for-#{$desktop-class} { display: none; }
+
+ .wrapper {
+
+ grid-template-columns: repeat(1,1fr);
+ }
+
+}
+
+// TABLET
+
+@media only screen and (max-width: $laptop) {
+
+ @include columns($tablet-class);
+
+ .show-for-#{$phone-class} { display: none; }
+ .show-for-#{$tablet-class} { display: block; }
+ .show-for-#{$laptop-class} { display: none; }
+ .show-for-#{$desktop-class} { display: none; }
+
+ @include hide($tablet-class);
+
+ .wrapper {
+
+ grid-template-columns: repeat(1,1fr);
+ }
+}
+@media only screen and (min-width: $laptop)
+{
+
+
+
+ @include columns($laptop-class);
+ @include hide($phone-class);
+ .show-for-#{$phone-class} { display: none; }
+ .show-for-#{$tablet-class} { display: none; }
+ .show-for-#{$laptop-class} { display: block; }
+ .show-for-#{$desktop-class} { display: none; }
+
+ .wrapper {
+
+ grid-template-columns: repeat(2,1fr);
+ }
+}
+// medium
+@media only screen and (min-width: $desktop)
+{
+
+
+ @include columns($desktop-class);
+ .show-for-#{$phone-class} { display: none; }
+ .show-for-#{$tablet-class} { display: none; }
+ .show-for-#{$laptop-class} { display:none ; }
+ .show-for-#{$desktop-class} { display: block; }
+ @include hide($desktop-class);
+
+ .wrapper {
+
+ grid-template-columns: repeat(3,1fr);
+ }
+}
+
diff --git a/sass/_variables.scss b/sass/_variables.scss
new file mode 100644
index 0000000..ffaa548
--- /dev/null
+++ b/sass/_variables.scss
@@ -0,0 +1,52 @@
+@import "compass";
+
+
+
+$white: #fff !default;
+$gray-100: #f6f6f6 !default;
+$gray-200: #f0f0f0 !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #999 !default;
+$gray-700: #555 !default;
+$gray-800: #333 !default;
+$gray-900: #222 !default;
+$black: #000 !default;
+
+$blue: #158CBA !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #FF4136 !default;
+$orange: #fd7e14 !default;
+$yellow: #FF851B !default;
+$green: #28B62C !default;
+$teal: lighten(teal,15%) !default;
+$cyan: #75CAEB !default;
+
+$primary: $blue !default;
+$secondary: $gray-200 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-700 !default;
+
+
+
+$phone-class: 'phone';
+$tablet-class: 'tablet';
+$laptop-class: 'laptop';
+$desktop-class: 'desktop';
+
+$phone: 500px;
+$tablet: 768px;
+$laptop: 1024px;
+$desktop: 1200px;
+
+$grid-gap: 2rem;
+$grid-columns : 12;
+
+@import "grid"; \ No newline at end of file