maxhoffmann

Component based CSS Architecture

Rules

1. A component always consists of CSS and HTML (JS is optional)
2. HTML and JS of a component are located in ComponentName.js
3. Styles of a component are located in ComponentName.scss
4. Each CSS class starts with the unique component name
5. The HTML of each component only uses its own prefixed classes
6. Components can use other components, but never overwrite their styles

maxhoffmann

effect module Api.Manager where { command = MyCmd } exposing (request)

import Task exposing (..)
import Http
import Process
import Json.Decode as Json exposing (field)
import Native.Api
import Json.Decode as Json
import Time exposing (Time)

maxhoffmann

import buzz from '@maxhoffmann/buzz';

function clicks(broadcast) {
  window.addEventListener('click', broadcast('click'));
}
const logger = () => console.log;

const services = [logger, clicks];

buzz(services);

maxhoffmann

made with esnextbin

maxhoffmann

made with esnextbin

maxhoffmann

made with esnextbin

maxhoffmann

made with esnextbin

maxhoffmann

effect module TokenRequest where { command = MyCmd } exposing (request)

import Task exposing (..)
import Http
import Process
import Json.Decode as Json exposing ((:=))
import Native.Api
import Json.Decode as Json
import Time exposing (Time)

maxhoffmann

-- Api Effect Manager

effect module Api where { command = MyCmd } exposing (request, Response)

import Task exposing (..)
import Http
import Process
import Json.Decode as Json exposing ((:=))
import Native.Api

maxhoffmann

import Html.App as Html
import Html exposing (..)
import Html.Events exposing (..)
import Task
import Http
import Json.Decode as Json exposing ((:=))


-- Model