używamSusy.

Nie udało mi się wykorzystać podejścia opartego na treści i postanowiłem najpierw przejść do okna-px-widths

Na początku próbowałempodejście oparte na treści do sieci, ale wkrótce okazało się, że moja witryna działa nieoczekiwanie na różnych urządzeniach. Wyświetlany byłby układ mobilny, w którym chciałbym mieć układ tabletu itp. Skończyło się na dostosowywaniu wartości em ustawień Susy, aby pasowały do ​​określonych szerokości ekranu (wartości px). Kod stał się brzydki i zdałem sobie sprawę, że nie korzystałem już z podejścia opartego na treści.

Tutaj jeststatyczna migawka strony głównej strony, którą stworzyłem przy użyciu tego błędnego podejścia i migawki jegokod.

Postanowiłem więc całkowicie zrzucić podejście content-first i przede wszystkim użyć wartości px.

Przed napisaniem kodu sformułowałem wymagania dotyczące mojej siatki

Przede wszystkim pogrupowałem różne urządzenia według rozmiaru ekranu. Następnie wymyśliłem wartości px dla punktów przerwania, które są najbardziej odpowiednie dla tych grup urządzeń:

Break-    Layout   Number of            Common
points     name     columns             usage
(px)               (sample)

    0  ┬
       │
       │     S        1       Smartphones-portrait, old phones
       │
   400 ┼
       │     M        2       Smartphones-landscape
   600 ┼
       │     L        3       Tablets-portrait
   800 ┼
       │     XL       4       Tablets-landscape, netbooks
  1000 ┼
       │    XXL       5       Laptops, desktop computers
  1200 ┼
       ↓

Przypuszczam, że następujące założenia / wymagania:

Podejście Window-px-widths-first (opisane powyżej).

$ kontener-styl jest płynny. Gdy szerokość ekranu znajduje się pomiędzy dwoma punktami przerwania, szerokości kontenerów są automatycznie dostosowywane do większego punktu przerwania. Liczba kolumn w układzie nie ulega zmianie i odpowiada dolnemu punktowi przerwania.

Ostatni punkt przerwania to maksymalna szerokość kontenerów. Witryna nie będzie się rozciągać dalej, będzie miała dodatkowe rynny.

Mobile-first. Zacznij od układu „S” i zastąp go innymi układami, ponieważ ekran będzie szerszy.

Po wielu przemyśleniach moje podejście ewoluowało do następującego kodu

(Ten kod jest syntetycznym przykładem. Wziąłem fragmenty mojego rzeczywistego kodu i dokonałem pewnych adaptacji, aby mógł coś przegapić lub mieć niespójności).

<div id="header-wrapper">
  <header id="header">
    ...
  </header>
</div>

<div id="main-wrapper">
  <div id="main">

    <article id="content">...</article>
    <aside id="sidebar">...</aside>

  </div>
</div>

<div id="footer-wrapper">
  <footer id="footer">
    ...
  </footer>
</div>

/////////////
// Variables
/////////////

$development: true // This enables susy-grid-backgrounds and outlines

// Breakpoints
$bp-s-m:    400px
$bp-m-l:    600px
$bp-l-xl:   800px
$bp-xl-xxl: 1000px
$max-width: 1200px

// Columns
$cols-s:   1
$cols-m:   2
$cols-l:   3
$cols-xl:  4
$cols-xxl: 5

// Layouts
// $layout-s is not necessary due to a mobile-first approach
$layout-m:    $bp-s-m     $cols-m
$layout-l:    $bp-m-l     $cols-l
$layout-xl:   $bp-l-xl    $cols-xl
$layout-xxl:  $bp-xl-xxl  $cols-xxl

// Default grid settings
$total-columns:   $cols-s
$column-width:    85%
$gutter-width:    100% - $column-width
$grid-padding:    1em
$container-width: 100%
$container-style: fluid
+border-box-sizing


/////////////
// Mixins
/////////////

// A couple of mixins to open the developer's third eye
=dev-outline
  @if $development
    outline: 1px solid red
=dev-grid-bg
  +dev-outline
  @if $development
    +susy-grid-background

// A custom container declaration
=standard-container
  +container // ← An actual line of Susy code, yay! :D
             //  This whole post is actualy an attempt to make use of it.
  max-width: $max-width
  +dev-grid-bg

  +at-breakpoint($layout-m)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-l)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-xl)
    +set-container-width
    +dev-grid-bg

  +at-breakpoint($layout-xxl)
    +set-container-width
    +dev-grid-bg


/////////////
// Backgrounds
/////////////

// The wrapper divs are necessary for screen-wide backgrounds
html
  background: url('../images/main-background.png') // also repeat, color, this kind of stuff

#header-wrapper
  background: url('../images/header-background.png') 

#footer-wrapper
  background: url('../images/footer-background.png')


/////////////
// Containers
/////////////

// Actually declared in separate SASS files
#header, #main, #footer
  +my-container


/////////////
// Columns
/////////////

// An example of declaring columns
$cols-sidebar: 1
#sidebar-first
  +dev-outline
  +at-breakpoint($layout-l)
    +span-columns($cols-sidebar, $cols-l)

  +at-breakpoint($layout-xl)
    +span-columns($cols-sidebar, $cols-xl)

  +at-breakpoint($layout-xxl)
    +span-columns($cols-sidebar, $cols-xxl)
#content
  +dev-outline
  +at-breakpoint($layout-l)
    +span-columns($cols-l - $cols-sidebar omega, $cols-l)

  +at-breakpoint($layout-xl)
    +span-columns($cols-xl - $cols-sidebar omega, $cols-xl)

  +at-breakpoint($layout-xxl)
    +span-columns($cols-xxl - $cols-sidebar omega, $cols-xxl)

Tutaj jeststatyczna migawka strony głównej witryny, którą stworzyłem za pomocą tego podejścia imigawka jego kodu.

pytania

Podążanie za podejściem window-px-widths-first jest moją świadomą decyzją i dotyczy następujących pytań. Doceniam twoje argumenty za content-first, ale proszę nie ograniczać się do stwierdzenia, że ​​się mylę, proszę odpowiedzieć na następujące pytania specyficzne dla window-px-widths-first.

Czy moje podejście jest eleganckim sposobem wykonywania okien-px-widths - najpierw z Susy, czy jest to brzydki fragment kodu?

Jak mogę sprawić, by mój kod był bardziej wdzięczny?

Nie lubię tych licznych deklaracji z przerwami, które muszę powtarzać dla każdego kontenera i każdej kolumny. Mógłbym tylko pomyśleć o użyciu słabo udokumentowanej możliwości określenia wielu układów+container. Ale tak długo+set-container-width nie jest jedynym kodem, który robię w każdym zapytaniu o media, nawet ten pomysł nie wchodzi w grę. :(

Jaki jest zalecany sposób przechodzenia najpierw do okna-px-widths z Susy (i spełnienia wymagań opisanych powyżej)?

Proszę ujawnić wszelkie niedociągnięcia mojego kodu. Jestem nowicjuszem w SASS i jestem pewien, że możesz zasugerować bardziej efektywne sposoby robienia tego samego.