UX / HTML a CSS 2

Používateľské rozhrania a používateľský zážitok

CSS layout, prístupnosť

Sergej Chodarev

Prístupnosť / Accessibility

Pre koho

Ale tiež

Základy

HTML

<div>Play video</div>

<button>Play video</button>

Sémantické značky

Ovládanie pomocou klávesnice

Textové popisy

CSS & JavaScript

WAI-ARIA

CSS Layout

Pred CSS

Normálny tok

Plávajúce bloky

float: left;

Špecifikácia pozície

position: static;   /* normálny tok */
position: relative; /* posunutie */
position: absolute; /* absolutne voči kontextu */
position: fixed;    /* absolutne voči oknu */
position: sticky;   /* relative + fixed */

Flexbox

Flexbox

.container {
  display: flex | inline-flex; 
  flex-direction: row | row-reverse | column | column-reverse;
  flex-wrap: nowrap | wrap | wrap-reverse;
}

justify-content

© CSS-Tricks

align-items

© CSS-Tricks

Mind the gap

gap, row-gap, column-gap

© CSS-Tricks

Prvky

.item {
  order:       5;   /* default is 0 */
  flex-grow:   4;   /* default 0 */
  flex-shrink: 3;   /* default 1 */
  flex-basis: 20em; /* default auto */
}

Grid

Grid

© MDN

Definícia mriežky

.container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}

Zložitejšia mriežka

.container {
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

Umiestnenie do mriežky

header {
  grid-column: 1 / 3;
  grid-row: 1;
}

article {
  grid-column: 2;
  grid-row: 2;
}

Pomenovanie oblastí mriežky

.page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header header"
        "menu   content"
        "footer footer";
}

Umiestnenie

.page__header   { grid-area: header; }
.page__sidebar  { grid-area: menu; }
.page__content  { grid-area: content; }
.page__footer   { grid-area: footer; }

Responzívny dizajn

© Interaction Design Foundation

@media

Media Queries

@media screen and (min-width: 80rem) {
  .container {
    margin: 1em 2em;
  }
}

.page {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: min-content min-content 1fr min-content;
    grid-template-areas:
        "header"
        "menu"
        "content"
        "footer";
    grid-gap: 10px;
}

@media (min-width: 800px) {
    .page {
        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "header header"
            "menu   content"
            "footer footer";
    }
}

Mobile-first

Modularita CSS

Problém

BEM

Block Element Modifier

Konvencia pomenovania

.block {}
.block__element {}
.block--modifier {}

<form class="site-search  site-search--full">
    <input type="text" class="site-search__field">
    <input type="Submit" value ="Search"
           class="site-search__button">
</form>

Mixes

<div>
  <ul class="menu header__menu">
    <li class="menu__item"><a href=""></a></li>
    <li class="menu__item"><a href=""></a></li>
    <li class="menu__item"><a href=""></a></li>
  </ul>
</div>

Atomic CSS

Preprocesory

SASS & SCSS

$red: #833;
body {
  color: $red;
}

.markdown-body {
  a {
    color: blue;
    &:hover {
      color: red;
    }
  }
}

.markdown-body a {
    color: blue;
}
.markdown-body a:hover {
    color: red;
}

@mixin heading-font {
  font-family: sans-serif;
  font-weight: bold;
}
h1 {
  @include heading-font;
}

PostCSS

Rámce