max-mapper / yo-yo

A tiny library for building modular UI components using DOM diffing and ES6 tagged template literals

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

introducing styled-elements - DOM primitives with CSS template strings

SilentCicero opened this issue · comments

commented

lol. Was bored and made this, works well with yo-yo and choo. Based on styled-components for React.

npm install --save styled-elements

Usage

import styled from 'styled-elements';

const Header = styled.h2`
  color: #333;
`;

const MyButton = styled.button`
  padding: 10px;
  border-radius: ${0}px;
  background: #F1F1F1;

  &:hover {
    background: #555;
  }
`;

const Wrapper = styled.div`
  width: 500px;
  border: 1px solid #aaa;

  @media (min-width: 400px) {
    width: 100%;
    background: #F1F1F1;
  }
`;

document.body.appendChild(Wrapper()(
  Header()('My header!'),
  MyButton({ onclick: () => console.log('yay!') })(
    'Do Something'
  )
));

See: https://github.com/SilentCicero/styled-elements