UI Development

July 29, 2016

DIG

Agenda

• Welcome & Introduction
• Angular & Comcast Timeline
• Polymer & Smart Internet
• A Tale of Two BuildKits
• Refactoring: A Love Story
• The Future of CSS

Presentations

The Future OF CSS

Tools & Theory

PROBLEMS WITH CSS

• Global Scope
• Selector Specificity
• Loading Dependencies
• Dead Code Elimination
• Style Encapsulation
• Customization

BEM

.form { }

.form--theme-light { }

.form--simple { }

.form__input { }

.form__submit { }

.form__submit--disabled { }

INLINE STYLES

var styles = {
  button: {
    display: 'inline-block',
    margin: 20,
    padding: 20,
    border: '1px solid black'
  }
};

var Button = React.createClass({  
  render: function() {
    return (
        <button style=styles.button>Click me!</button>
    );
  }
});

React.render(<Button />, document.getElementById('button'));

ATOMIC CSS

<style>

.Fl\(end\) { float: right; }

.W\(30\%\) { width: 30%; }

.My\(1em\) { margin-top: 1em; margin-bottom: 1em; }

</style>


<div class="Fl(end) W(30%) My(1em) Fl(n)--xs W(a)--xs">
    <div class="Bd Bgc(#0280ae):h C(#0280ae) C(#fff):h P(20px)">
        Lorem ipsum
    </div>
</div>

CSS MODULES

<style>
/* components/submit-button.css */
.normal { /* all styles for Normal */ }
.disabled { /* all styles for Disabled */ }
.error { /* all styles for Error */ }
.inProgress { /* all styles for In Progress */
</style>

<script>
/* components/submit-button.js */
import styles from './submit-button.css';
    
buttonElem.outerHTML = `<button class=${styles.normal}>
                            Submit</button>`
</script>

<button class="components_submit_button__normal__abc5436">
  Processing...
</button>

WEB COMPONENTS

<style>
  app-panel {
    display: flex;
  }
  [is="x-item"] {
    transition: opacity 400ms ease-in-out;
    opacity: 0.3;
    flex: 1;
    text-align: center;
    border-radius: 50%;
  }
</style>

<app-panel>
  <li is="x-item">Do</li>
  <li is="x-item">Re</li>
  <li is="x-item">Mi</li>
</app-panel>

THANK YOU!