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

Adaptation and Components

Adaptation and Components

About adaptable systems and the benefits of the component abstraction when building web UI's.

Nicolas Gallagher

April 09, 2014
Tweet

More Decks by Nicolas Gallagher

Other Decks in Programming

Transcript

  1. HTML A B C D ... CSS A B C

    D ... JS A B C D ... UNIT A B C D ... ... A B C D ...
  2. HTML A B C D ... CSS A B C

    D ... JS A B C D ... UNIT A B C D ... ... A B C D ...
  3. HTML AD B CD D ... CSS A AB C

    D ... JS A B C D ... UNIT A B C D ... ... A B AC D ...
  4. <article class="user"> <div class="avatar"> <img class="avatar-img" ...> <div class="tooltip hidden">...</div>

    </div> <button class="btn btn-follow"> <span class="btn-icon"> <span class="icn icn-follow"></span> </span> <span class= "btn-text">...</span> </button> </article>
  5. <article class="user"> <button class="btn btn-follow"> <span class="btn-icon"> <span class="icn icn-follow"></span>

    </span> <span class= "btn-text">...</span> </button> </article> <div class="avatar"> <img class="avatar-img" ...> <div class="tooltip hidden">...</div> </div>
  6. <article class="user"> <button class="btn btn-follow"> <span class="btn-icon"> <span class="icn icn-follow"></span>

    </span> <span class= "btn-text">...</span> </button> </article> <div class="avatar"> <img class="user-img avatar-img" ...> <div class="tooltip hidden">...</div> </div>
  7. /* avatar */ .avatar { } /* tweet */ .tweet

    { } .tweet .avatar { } .tweet .text {} /* user card */ .user { } .user .avatar { }
  8. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ... C HTML CSS JS UNIT ...
  9. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ...
  10. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ... ... HTML CSS JS UNIT ...
  11. /** @jsx React.DOM */ var Photo = React.createClass({ render: function

    () { return ( <img src={this.props.src} /> ); } });
  12. <figure className={'photo' + this.props.size}> <span className={'crop' + this.props.crop}> <img className="img"

    src={this.props.src} alt= "" /> </span> <figcaption className="caption"> {this.props.children} </figcaption> </figure>
  13. <figure className={'photo' + this.props.size}> <span className={'crop' + this.props.crop}> <img className="img"

    src={this.props.src} alt= "" /> </span> <figcaption className="caption"> {this.props.children} </figcaption> </figure>
  14. <figure className={'photo' + this.props.size}> <span className={'crop' + this.props.crop}> <img className="img"

    src={this.props.src} alt="" /> </span> <figcaption className="caption"> {this.props.children} </figcaption> </figure>
  15. <figure className={'Photo Photo--' + this.props.size}> <span className={'Photo-crop Photo-crop--' + this.props.crop}>

    <img className="Photo-img" src={this.props.src} alt="" /> </span> <figcaption className="Photo-caption u-textBreak"> {this.props.children} </figcaption> </figure>
  16. /** @define Photo */ .Photo {} /* Component */ .Photo--large

    {} /* Component modifier */ .Photo-crop {} /* Component descendent */ .Photo-crop--circle {} /* Descendent modifier */ .Photo-img {} .Photo-caption {}
  17. <figure className={'Photo Photo--' + this.props.size}> <span className={'Photo-crop Photo-crop--' + this.props.crop}>

    <img className="Photo-img" src={this.props.src} alt="" /> </span> <figcaption className="Photo-caption u-textBreak"> {this.props.children} </figcaption> </figure>
  18. <figure className={'Photo Photo--' + this.props.size}> <span className={'Photo-crop Photo-crop--' + this.props.crop}>

    <img className="Photo-img" src={this.props.src} alt="" /> </span> <figcaption className="Photo-caption u-textBreak"> {this.props.children} </figcaption> <Attribution owner={this.props.owner} /> </figure>
  19. A HTML CSS JS UNIT ... B HTML CSS JS

    UNIT ... C HTML CSS JS UNIT ... D HTML CSS JS UNIT ... ... HTML CSS JS UNIT ...
  20. { "name": "tweet", "styles": [ "tweet.css" ], "scripts": [ "tweet.js"

    ], "dependencies": { "suitcss/utils": "0.8.0" }, "locals": [ "avatar", "inline-tweetbox", "tweet-actions" ] }