Removing lost grid and introducing simple self made grid

AljanScholtens · Jan 25, 2017 · bfbc705 · bfbc705
1 parent b98263b
commit bfbc705
Show file tree

Hide file tree

Showing 6 changed files with 25 additions and 18 deletions.
diff --git a/gulpfile.js b/gulpfile.js
@@ -3,12 +3,10 @@ var sourcemaps = require('gulp-sourcemaps')
 var postcss = require('gulp-postcss')
 var cssnano = require('gulp-cssnano')
 var atImport = require('postcss-import')
-var lost = require('lost')
 var cssnext = require('postcss-cssnext')
 var nunjucks = require('gulp-nunjucks')
 var browserSync = require('browser-sync').create()
 var modRewrite  = require('connect-modrewrite')
-var smushit = require('gulp-smushit');
 var del = require('del');
 
 gulp.task('default', ['clean', 'serve'])
@@ -55,10 +53,6 @@ gulp.task('images', () =>
 
 gulp.task('media', () =>
   gulp.src('src/assets/media/**/*')
-    // .pipe(smushit())
-    // .pipe(imagemin({
-    //     progressive: true,
-    // }))
     .pipe(gulp.dest('dist/assets/media'))
 )
 
@@ -71,7 +65,6 @@ gulp.task("css", function() {
   var processors = [
     atImport,
     cssnext(),
-    lost()
   ]
   gulp.src(['src/assets/stylesheets/styles.css', 'src/assets/stylesheets/styleguide.css'])
     .pipe(sourcemaps.init())

diff --git a/package.json b/package.json
@@ -11,9 +11,7 @@
     "gulp-cssnano": "latest",
     "gulp-nunjucks": "latest",
     "gulp-postcss": "latest",
-    "gulp-smushit": "latest",
     "gulp-sourcemaps": "latest",
-    "lost": "latest",
     "postcss-cssnext": "latest",
     "postcss-import": "latest"
   },

diff --git a/src/assets/stylesheets/settings.global.css b/src/assets/stylesheets/settings.global.css
@@ -57,7 +57,6 @@
   /*
    * Grid gutter used in tools.grid, 12 columns is standard
    */
-  @lost gutter 32px;
   --gutter: 32px;
 
 

diff --git a/src/components/Container/Container.css b/src/components/Container/Container.css
@@ -16,4 +16,10 @@
     padding: calc(var(--spacing) * 2);
     padding-bottom: var(--spacing);
   }
+
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
 }
diff --git a/src/components/Grid/Grid.css b/src/components/Grid/Grid.css
@@ -7,44 +7,55 @@
  */
 .c-grid {
 
+  @media (--breakpoint-10) {
+    float: left;
+    min-height: 1px;
+    padding-right: var(--gutter);
+
+    &:last-of-type {
+      padding-right: 0;
+    }
+  }
 }
 
+
 /* Columns */
 .c-grid--3 {
 
   @media (--breakpoint-10) {
-    lost-column: 3/12;
+    width: 25%;
   }
 }
 
 .c-grid--4 {
 
   @media (--breakpoint-10) {
-    lost-column: 4/12;
+    width: 33.33333%;
   }
 }
 
 .c-grid--6 {
 
   @media (--breakpoint-10) {
-    lost-column: 6/12;
+    width: 50%;
   }
 }
 
 .c-grid--8 {
 
   @media (--breakpoint-10) {
-    lost-column: 8/12;
+    width: 66.66666%;
   }
 }
 
 .c-grid--9 {
 
   @media (--breakpoint-10) {
-    lost-column: 9/12;
+    width: 75%;
   }
 }
 
+
 /* Types */
 .c-grid--single {
   max-width: 36rem;

diff --git a/src/layout/base.html b/src/layout/base.html
@@ -8,9 +8,9 @@
   <title>{{page_title}} - Project</title>
   <meta name="description" content="">
 
-  <link rel="stylesheet" href="/assets/stylesheets/styles.css" crossorigin="anonymous">
-  <link rel="shortcut icon" href="/assets/images/favicon-32.ico">
-  <link rel="apple-touch-icon-precomposed" href="/assets/images/favicon-152.png">
+  <link crossorigin="anonymous" href="/assets/stylesheets/styles.css" rel="stylesheet">
+  <link href="/assets/images/favicon-32.ico" rel="shortcut icon">
+  <link href="/assets/images/favicon-152.png" rel="apple-touch-icon-precomposed">
 </head>
 
 <body>