New layout system #8

New issue

Closed

opened 2024-09-11 11:07:32 +02:00 by kazhnuz · 5 comments

kazhnuz commented

2024-09-11 11:07:32 +02:00

Owner

Kill or simplify the 12-column layout system
Better layout helpers
Add utilities to put footer at the end of a page
Responsive flexboxes
Add display classes
Responsive mixins

- [x] Kill or simplify the 12-column layout system - [x] Better layout helpers - [x] Add utilities to put footer at the end of a page - [x] Responsive flexboxes - [x] Add display classes - [x] Responsive mixins

kazhnuz commented

2024-09-12 10:43:18 +02:00

Author

Owner

Peut-être faire des stylesheet bonus avec les différent layout ? Genre mouette-blog, etc. Ou peut-être que la grille suffira ?

kazhnuz commented

2024-09-12 11:24:42 +02:00

Author

Owner

Some usefull stuff :

Some usefull stuff : - https://github.com/alexerlandsson/tiny-grid/blob/master/scss/tiny-grid.scss - https://evanminto.com/blog/intrinsically-responsive-css-grid-minmax-min/ - https://medium.com/@nitishkmrk/responsive-grid-design-ultimate-guide-7aa41ca7892 - https://stackoverflow.com/questions/47981690/fully-responsive-items-with-css-grid-and-auto-fit-minmax

kazhnuz commented

2024-09-12 13:27:27 +02:00

Author

Owner

CSS grid of Tiny Grid

// This file use code ported to css grid from Tiny Grid by Alexander Erlandsson
// Original code at https://github.com/alexerlandsson/tiny-grid
// Code under MIT Licence

// Settings

$grid-breakpoints: (
  sm: 600px,
  md: 900px,
  lg: 1200px,
  xl: 1800px
) !default;

// Display utils

.d-block {
  display:block
}

.d-flex,
.wrapper {
  display:flex;
}

.f-row,
.wrapper {
  flex-direction:row;
}

// 12-grid
.row {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(12, 1fr));
  margin:0;
  padding:0;
}

[class^="col-"],
[class*=" col-"] {
  width:100%;
  margin:0;
}

@for $i from 1 through 12 {
  .col-#{$i} {
    grid-column: span $i;
  }
  .col-offset-#{$i} {
    grid-column-start: $i;
  }
}

// Responsives utils
@each $breakpoint-name in map-keys($grid-breakpoints) {
  // Get each key's value
  $breakpoint-width: map-get($grid-breakpoints, $breakpoint-name);

  @media (min-width: 12) {
    @for $i from 1 through $grid-columns {
      .col-#{$breakpoint-name}-#{$i} {
        grid-column: span $i;
      }
      .col-#{$breakpoint-name}-offset-#{$i} {
        grid-column-start: $i;
      }
    }
  }
}

CSS grid of Tiny Grid ```scss // This file use code ported to css grid from Tiny Grid by Alexander Erlandsson // Original code at https://github.com/alexerlandsson/tiny-grid // Code under MIT Licence // Settings $grid-breakpoints: ( sm: 600px, md: 900px, lg: 1200px, xl: 1800px ) !default; // Display utils .d-block { display:block } .d-flex, .wrapper { display:flex; } .f-row, .wrapper { flex-direction:row; } // 12-grid .row { display: grid; grid-gap: 1rem; grid-template-columns: repeat(12, 1fr)); margin:0; padding:0; } [class^="col-"], [class*=" col-"] { width:100%; margin:0; } @for $i from 1 through 12 { .col-#{$i} { grid-column: span $i; } .col-offset-#{$i} { grid-column-start: $i; } } // Responsives utils @each $breakpoint-name in map-keys($grid-breakpoints) { // Get each key's value $breakpoint-width: map-get($grid-breakpoints, $breakpoint-name); @media (min-width: 12) { @for $i from 1 through $grid-columns { .col-#{$breakpoint-name}-#{$i} { grid-column: span $i; } .col-#{$breakpoint-name}-offset-#{$i} { grid-column-start: $i; } } } } ```

kazhnuz commented

2024-09-12 13:34:39 +02:00

Author

Owner

-> Make wrapper support a display:flex + justify-content:row
-> .container pour chaque taille
-> Display utils .d-flex, .d-block, .d-inline, .d-iblock, d-none (+ responsive)
-> Flex utils .f-justify-center, .f-justify-between, .f-justify-around, .f-justify-start, .f-justify-end
-> Flex utils f-align-center...
-> Flex-grow
-> Add text utils related to responsive (text-md-center, etc)
-> Flex utils .row, .inverse

-> Make wrapper support a display:flex + justify-content:row -> .container pour chaque taille -> Display utils .d-flex, .d-block, .d-inline, .d-iblock, d-none (+ responsive) -> Flex utils .f-justify-center, .f-justify-between, .f-justify-around, .f-justify-start, .f-justify-end -> Flex utils f-align-center... -> Flex-grow -> Add text utils related to responsive (text-md-center, etc) -> Flex utils .row, .inverse

kazhnuz commented

2024-10-09 13:25:54 +02:00

Author

Owner

Done