27 Lip 2019

Tworzymy layout strony głównej za pomocą Grid

Nasz layout zostanie oparty o GRID. Bardzo dobrze sprawdza się do zarządzania wyglądem. Niestety jak zwykle wszystko rozbija się o to czy nasza storna ma być wspierana przez starsze przeglądarki jak opera mini czy ie 11, tzn. ie 10 i 11 wspiera grid ale w okrojonym zakresie.
Jeżeli tak to niestety grid nie jest dla nas, ale olejmy stare przeglądarki więcej na caniuse🙂

Założenia

Strona ma składać się z nagłówka w którym z prawej strony znajdzie się reklama, poniżej z lewej strony nawigacja a z prawej główny element strony z artykułem. Na dole strony stopka na całą szerokość.

Header                    Ads
Nav      Article 
Footer

Do rozdzielczości 575px wygląd elementów ma być następujący. Wszystkie elementy w jednej kolumnie.

Header
Article
Nav
Ads
Footer

Najpierw podstawowe style

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  margin: 0;
}

body {
  font-family: Proxima Nova Regular, Segoe UI, Roboto, Droid Sans, Helvetica Neue, Arial, sans-serif;
  font-size: 20px;
}
20 Wrz 2018

Mini sass grid

.row {
    display: flex;
    flex-wrap: wrap;
}

$columns: 12;

@for $i from 1 through $columns {
    .col-#{$i} {
        flex: 0 0 100% / $columns * $i;
    }
    .col-offset-#{$i} {
        margin-left: 100% / $columns * $i;
    }
}

// Responsive Breakpoints
[class^="col-"] {
    // Tablets
    @media (max-width: 768px) {
        flex-basis: 50%;
    }
    // Mobiles
    @media (max-width: 480px) {
        flex-basis: 100%;
    }
}