Tomáš Daněk

Generátory rozvržení vzhledu:

• CSS Layout Generator
• ATCK theme builder

Jednosloupcové

• výchozí vlastnost bloků

Vícesloupcové

• HTML
  • tabulka
    • 
    • rozvržení je realizovatelné i bez CSS a tudíž funkční ve všech prohlížečích
    • nevýhodná pro přenostná zařízení (horizontální posun)
    • problémy při formátování tisku (vypnutí postranních sloupců)
    • neumožňuje změnu pořadí prvků stránky bez zásahu do zdrojového kódu nebo použitím CSS tj. obsah bude většinou až za navigací
    • zobrazí se až po načtení celého obsahu tabulky (dá se vyřešit více tabulkami)
• CSS2
  • absolutní pozicování
    • 
    • vyjme blok z toku textu
    • jednoduchá změna pořadí prvků stránky tj. obsah může být před navigací
    • důležitý obsah patičky nemůže být širší než hlavní obsah, aby jej nepřekryly postranní sloupce
  • plovoucí bloky
    • 
    • využívá se funkce obtékání
    • jednoduchá změna pořadí prvků stránky tj. obsah může být před navigací
    • ukončení plovoucího boxu
      • prvkem obsahující alespoň 1 znak (např.  ) s CSS vlastnosmi (ne vždy je takový prvek k dispozici):

        • clear: both;
          font-size: 1px /* NN7+ */
          height: 1px

      • pouze pomocí CSS vlastností

        • /*  
           * http://perishablepress.com/new-clearfix-hack
           * (http://www.positioniseverything.net/easyclearing.html)
           */
          .clearfix:after {
            visibility: hidden;
            display: block;
            font-size: 0;
            content: " ";
            clear: both;
            height: 0;
          }
          * html .clearfix             { zoom: 1; } /* IE6 */
          *:first-child+html .clearfix { zoom: 1; } /* IE7 */

        • univerzální řešení
          • vychází z principu 3-col layout via CSS, ale navíc upravuje pořadí na "content first" 
          • výhoda: kromě .clearfix není potřeba znát šířku sloupce s osahem 
          • nevýhoda: je třeba pomocný prvek
          • 

          • #section-header { }
            
            #section-content {
              /* obtekani ukonceno pomoci .clearfix */
            }
            #content-wrapper {
              float: left;
              width: 100%;
            }
            #content {
              margin-left: 300px; /* %, em */
              margin-right: 200px; /* %, em */
            }
            #sidebar-left {
              float: left;
              width: 300px; /* %, em */
              margin-left: -100%;
            }
            #sidebar-right {
              float: left;
              width: 200px; /* %, em */
              margin-left: -200px; /* %, em */
            }
            
            #section-footer { }

        • řešení vhodné pouze pro GRID
          • výhoda: kromě .clearfix není potřeba žádný pomocný prvek
          • nevýhoda: je třeba znát šířky všech sloupců 

          • /* http://www.palantir.net/blog/responsive-design-s-dirty-little-secret */
            #section-header,
            #section-content,
            #section-footer {
              width: 960px; /* %, em */
            }
            #section-content {
              /* obtekani ukonceno pomoci .clearfix */
            }
            #content {
              float: left;
              width: 460px; /* %, em */
              margin-left: 300px; /* %, em */
              margin-right: -100%;
            }
            #sidebar-left {
              float: left;
              width: 300px; /* %, em */
              margin-left: 0;
              margin-right: -100%;
            }
            #sidebar-right {
              float: right;
              width: 200px; /* %, em */
              margin-right: 0;
              margin-left: -100%;
            }

        • Flexbox (Flexible reordering) – "řešení budoucnosti"?
          • 

          • <header>...</header>
            <main>
              <article>...</article>
              <nav>...</nav>
              <aside>...</aside>
            </main>
            <footer>...</footer>

            • main {
                display: flex;
              }
              nav {
                width: 13em;
                flex: none;
              }
              article {
                width: auto;
                flex: auto;
                order: 2;
              }
              aside {
                width: 20%;
                flex: none;
              }

              • Podpora: IE 10+, Opera 12.1+, Chrome, Firefox, Safari, iOS, Android
                • planningforaliens.com/blog/2014/03/11/real-world-flexbox
                • css-tricks.com/using-flexbox
                • philipwalton.github.io/solved-by-flexbox
                  • Better, Simpler Grids
                  • The Media Object
                  • Input Add-ons
                  • Sticky Footer
                  • Holy Grail Layout
                  • Vertical Centering

  Poznámka: CSS vlastnosti marginse dá využít také jako "relativní pozicování"

  Pevná šířka

  • v současnosti zpravidla 960 px (dříve 740 px)
  • jednoduchý návrh rozvržení vzhledu (layout)
  • vhodné pro komplikované grafické návrhy
  • u menšího rozlišením (velikosti okna) se zobrazí horizontální posuv
  • u většího rozlišením (velikosti okna) není využita celá dostupná plocha okna prohlížeče
  • při zvětšení písma hrozí rozpad layoutu nebo se zobrazí horizontální posuvníky

  Přizpůsobivá šířka

  • je udávána v jednotkách em
  • přizpůsobuje velikosti textu, sož je výhoda pro uživatele s horším zrakem
  • odstraňuje nevýhodu nevyužité plochy prohlížeče u velkého rozlišení (okna prohlížeče)

  Pružná šířka

  • je udávána v %
  • komplikovanější grafický návrh
  • přizpůsobuje se velikosti okna prohlížeče a využívá tak celou jeho dostupnou plochu, což ocení uživatelé s větší obrazovkou
  • ve většině případů se nastavuj minimální (usnadňuje návrh layoutu) a maximální (usnadňuje čtení) hodnotou šířky.

  Šablony se většinou navrhují buďto s pevnou nebo pružnou šířkou. Pružná šířka ovšem bývá kombinací přizpůsobivé a pružné varianty v kombinaci se záporným pozicováním plovoucích bloků.

  Při rozvržení obsahu je vhodné dle typografie dodržovat šířku odstavce (bloků) 30-80 znaků.

  Pevnou nebo minimální šířku grafického návrhu je možné odhadnout ze statistik návštěvnosti.