style

[KiaraGrouwstra]

Goal: ng2-material over jQuery/Materialize -- all state must go through the model rather than "Materialize does it in the DOM so I try to manipulate that using jQuery cuz they don't do a model". This switch would unblock transition to ngrx/store.

CSS frameworks:

• ng2mat: 15/32: button, button-toggle, card, checkbox, dialog, grid-list (masonry), icon, input, list, menu (dropdown), progress bar, progress circle, radio, sidenav, slide-toggle (switch), slider, tabs (md-tab-group), toolbar, tooltip
• unimplemented from material1 (demos): autocomplete (alts: 1, 2, 3, 4, covalent), backdrop, bottomSheet, chips, colors, content, datePicker (bootstrap alt, ripjar datetime picker), dialog (covalent), divider, fabActions, fabSpeedDial, fabToolbar, menuBar, navBar, panel, select (covalent), showHide, slider (covalent), sticky, subheader, swipe, toast (covalent), tooltip (covalent), virtualRepeat, whiteframe
  • log
  • docs
  • repo
  • milestones
  • components
  • app
• justin: Button, Card, Checkbox, Dialog, Input, List, Progress Circular, Progress Linear, Radio, Sidenav, Switch, Tabs, Toolbar, Whiteframe
• ng2comp: button, checkbox, dialog, grid_list, input, progress-circular, progress-linear, radio, switcher
• ng1mat 1.0: 32 MD components.
• valor
• ng-lightning: non-MD ng2 component library by Salesforce.
• covalent (components): Stepper, Expansion Panels, File Upload, Loading Progress, Syntax Highlighting & Markdown Parsing; Select, Autocomplete, Dialog, Tooltip, Toast, Slider, Ripple
  • plans upstreaming

Others:

• // Polymer: uses jQuery-like way to select elements from JS; also no webpack yet: Use with Paper Element collection/use when Polymer(..) registration is embedded in HTML file JonDum/polymer-loader#1
• // NativeScript: also doesn't appear to support the idea of using multiple TabViews and selecting them from JS...
• Ionic 2: seems an option for mobile. investigate more.

Materialize classes used:

Stateful (replace):

• tooltips (ng2mat, covalent, $, paper): .tooltipped -- paper-tooltip is worse than Materialize's .tooltipped: no jQuery, but small text (try .material-tooltip's font-size: 1rem;), and requires either IDs for correlation, or wrapping in div(tabindex="0") elements intercepting clicks and messing with style...
• tabs ($, justin, paper, ng2mat): .tabs/.tab //also potentially unfortunate in its current use of IDs, which makes components not reusable without jade (/ng2?) prefix hacks; Polymer also needs jQuery-style DOM selection.
• collapsibles (covalent's expansion panels, $, iron-collapse): .collapsible/.collapsible-header/.collapsible-body
• nav ($, ng2mat?, justin): .button-collapse
• inputs (ng2comp):
  • .range-field (iron-range-behavior?)
    • sliders: covalent, ng2-slider-component -- ng2-friendly unlike nouislider but ugly as hell.
  • select ($, iron-dropdown, paper-dropdown-menu, valor, covalent)
    • separate labels
  • .switch/.lever (justin, ng2comp, ng2mat)
  • .file-field/.file-path-wrapper/.file-path (covalent, valor)
  • .datepicker ($, bootstrap alt, ripjar datetime picker)
  • radio input (justin, ng2comp)
  • text area (autosize)
• progress linear (justin, ng2comp, paper), progress circle (ng2mat, justin)
  //* toasts (covalent, Notification API, paper): Materialize.toast() -> https://github.com/stabzs/Angular2-Toaster
• modal dialog: ng2comp, covalent, justin

Cosmetic (can keep):

• inputs:
  • .input-field (justin, ng2mat)
    • ng2mat also exposes characterCount: https://www.npmjs.com/package/@angular2-material/input
  • .validate/.errors/.error
  • checkbox's .filled-in (justin, ng2comp, ng2mat)
• tables (justin, non-MD: valor): .bordered, .highlight
• buttons (ng2mat): .btn, .btn-large, .btn-floating
• icons (ng2mat): .material-icons
• cards (ng2mat, justin, covalent): .card, .card-content, .card-title
• grid (ng2comp, ng2mat): .row/.col/.offset-s3
• typography: .bold, h1, roboto font
• colors (covalent): .orange, .light-blue, .white-text, .lighten-1, .text-lighten-3, .light
• blocks: .container, .page-footer, .footer-copyright, .brand-logo, .section, .no-pad-bot, .header, .side-nav
• collections: .collection, .collection-item
• waves (covalent ripples): .waves-effect, .waves-light
• css (covalent utility style?): .right, .center, .hide-on-med-and-down

Misc:

• ago pipe
• dragula
• charts