Bez frameworku

Proč framework nepoužívám a proč je to super

sk. David Kadlec

www.superkoderi.cz

Proč nepoužít framework?

  • Zbytečný kód
  • Nutnost přebíjení
  • Těžko se ohýbá pro grafiku
  • Upgradování

Mýty

  • Framework urychlí práci
  • Automatický responsive

Řešení?

Vlastní framework!

Co mi to přinese?

Neberte framework jako skládačku, ale jako berličku

  • Rychlý start projektu
  • Naprostá kontrola nad výsledným kódem
  • Žádné přebíjení!

Inspirujte se!

Normalize

necolas.github.io/normalize.css/

Grid

neat.bourbon.io/

thisisdallas.github.io/Simple-Grid/

getbootstrap.com/css/#grid

foundation.zurb.com/docs/components/grid.html

lmc-eu.github.io/emerald/

designinstruct.com/web-design/responsive-css-grid/

Typografie

  • Nadpisy
  • Odstavce
  • Seznamy
  • Citace
  • Tabulka
  • Definiční seznam

Základní třídy

// Editační
.left
  text-align left
.right
  text-align right

// Layoutové
.l
  float left
.r
  float right
.cfx
  clearfix()

// Modifikační
.small
  font-size 0.8em
.big
  font-size 1.2em

Elementy

.btn
  display inline-block
  vertical-align middle
  margin 0
  padding 0
  background none
  span
    position relative
    display block
    padding 10px 20px 8px
    background $primaryColor
    font-size 16px
    line-height 1.4em
  &:hover
    span
      background darken($primaryColor, 15%)

Elementy

.inp-text
  display block
  border 1px solid #a4a4a4
  padding 3px 10px
  background #fff
  color #21272c
  font-family $font
  font-size 16px
  line-height 21px

Komponenty

Držte framework jednoduchý.

Kde skladovat komponenty?

HTML

<!DOCTYPE html>
<html>
  <head>
    // title, meta, css, scripty
  </head>
  <body>
    <div id="header">
      // logo, menu…
    </div>
    <div id="main">
      <div class="row-main">
        // obsah
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html>

Pár učitečných odkazů na závěr

Děkuji za pozornost

www.superkoderi.cz

david.kadlec@superkoderi.cz

Využit framework pro prezentace FlowTime