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 --------------------------- |

20 wrz 2018

Mini sass grid

// nowy sass use math
@use 'sass:math';

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

$columns: 12;

@for $i from 1 through $columns {
    .col-#{$i} {
        // flex: 0 0 100% / $columns * $i;
        // nowy sass
        flex: 0 0 math.div(100%, $columns) * $i;
    }
    .col-offset-#{$i} {
        // margin-left: 100% / $columns * $i;
        // nowy sass
        margin-left: math.div(100%, $columns) * $i;
    }
}

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