Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Think components 2. April 2017

Think components 2. April 2017

Discover that isolation and composition are the most important concepts in building components.
Learn the box model for components.
Examples assume familiarity with CSS.

Ivan Babak

April 05, 2017
Tweet

More Decks by Ivan Babak

Other Decks in Programming

Transcript

  1. Think components 2. Isolation and composition. Ivan Babak Software Architect,

    Frontend Software Engineer Examples assume familiarity with CSS. April 2017
  2. Component as a building block. Connect the outputs to the

    inputs. Both in UI layouts and data flows. + = Spaceship!
  3. Component as a building block. Small or big. Simple or

    composite. http://bradfrost.com/blog/post/atomic-web-design/
  4. The box model for components. Keep component layouts isolated from

    each other to be able to compose them seamlessly.
  5. The box model for components. Keep component layouts isolated from

    each other. Belongs to the parent component: • position • margin Belongs to this component: • border • padding • content position margin border padding content ⚠ In CSS, the margin sticks out of the box boundaries and leaks into the outer block layout. Do not use margins on the component root nodes.
  6. The box model for components. BEM – Block, Element, Modifier

    .SomeComponent .SomeComponent__firstElement .SomeComponent .SomeComponent__secondEelement .AnotherComponent The parent component is responsible for positioning its elements. To implement that it should have containers for every of its elements if it needs to position any of them. The child components are responsible for their inner layout only. More at http://getbem.com/faq/