SaraVieira

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

---

SaraVieira

// -- hyper-stylesheet-hash:3668d1255e9fc3fde9cd8c87cbdeb358 --
module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 12,

    // font family with optional fallbacks
    fontFamily: 'Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)

SaraVieira

Buttons
Drop-down button
Weather widget 

SaraVieira

body * { border-radius: 4px; }
img { border-radius: 50%; }

SaraVieira

atom

SaraVieira

import styled from 'styled-components';

export const Section = styled.main`
  display: flex;
  flex-direction: column;
  background: #fff;
`;

export const Paragraph = styled.p`
  font-size: 14px;

SaraVieira

import React from 'react';
import styled from 'styled-components';

import { Section, Paragraph } from './style.js';

const Button = styled.button`
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;

SaraVieira

import React from 'react';
import styled from 'styled-components';

const Section = styled.main`
  display: flex;
  flex-direction: column;
  background: #fff;
`;

const Paragraph = styled.p`

SaraVieira

import styled, { css } from 'styled-components';

export const Section = styled.main`
  display: flex;
  flex-direction: column;
  background: #fff;
`;

export const Paragraph = styled.p`
  font-size: 14px;

SaraVieira

import React from 'react';
import styled from 'styled-components';

import { Section, Paragraph, ButtonStyles } from './style.js';

const Button = styled.button`${ButtonStyles};`;

const Main = () => (
  <Section>
    <Paragraph>