The projectzeppelin from mattzk

projectzeppelin's Introduction

Quick start

Clone and run the MattZK/ProjectZeppelin repository:

git clone https://github.com/MattZK/ProjectZeppelin.git
cd ProjectZeppelin
npm install
gulp

To start a development server:

gulp

To build the project:

gulp build

Requirements

NodeJS v9.x
SASS Compiler
Gulp

NodeJS

Download NodeJS

SASS

Download Ruby (Windows Only)

gem install sass

Gulp

npm install gulp-cli -g

More info follows

NOTE: This repo is still in testing phase, there is no guarantee that code is correct.

projectzeppelin's People

Contributors

Stargazers

Watchers

projectzeppelin's Issues

CSS Grid

suggestie voor CSS Grid:
Werken met grid-template-areas :

       .container{
            display:grid;
           grid-gap: 20px;
             grid-template-columns: 1fr 1fr;
            grid-template-rows:1fr 2fr 2fr;
          grid-template-areas: 
              "hoofding hoofding"
                "sectie1 sectie2"
              "sectie3 sectie4";
        }
        .container .hoofding{
            grid-area: hoofding;
        }
        .container .sectie1{
           grid-area: sectie1;
        }
        .container .sectie2{
            grid-area: sectie2;
        }
        .container .sectie3{
            grid-area: sectie3;
        }
        .container .sectie4{
            grid-area: sectie4;
        }

=> werken met verschillende schermen wordt dan zeer eenvoudig:

@media (min-width:1000px){
.container{
grid-gap: 20px;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows:1fr 2fr;
grid-template-areas:
"hoofding hoofding hoofding hoofding"
"sectie1 sectie2 sectie3 sectie4";