pergaulan-bebas v0.0.4

WIP PERGAULAN-BEBAS

Design system utilities untuk styled-components dan macam-macam css-js "library"

npm i pergaulan-bebas

Daftar Isi

• Cara Pakai
• Mulai

Cara Pakai

// Example uses pergaulan-bebas,  
// but pergaulan-bebas works with 
// most other css-in-js libraries as well
import styled from 'styled-components'
import { space, width, fontSize, color } from 'pergaulan-bebas'

// Add pergaulan-bebas fungsi to your component
const Box = styled.div`
  ${space}
  ${width}
  ${fontSize}
  ${color}
`

// width: 50%
<Box width={1/2} />

// font-size: 20px (theme.fontSizes[4])
<Box fontSize={4} />

// margin: 16px (theme.space[2])
<Box m={2} />

// padding: 32px (theme.space[3])
<Box p={3} />

// color
<Box color='tomato' />

// color: #333 (theme.colors.gray[0])
<Box color='grays.0' />

// background color
<Box bg='tomato' />

Responsive

Untuk responsive, gunakanlah array. hal ini hanya bisa terjadi jika menggunakan properti dari "pergaulan-bebas" Lebih Lanjut

// responsive width
<Box width={[ 1, 1/2, 1/4 ]} />

// responsive font-size
<Box fontSize={[ 2, 3, 4 ]} />

// responsive margin
<Box m={[ 1, 2, 3 ]} />

// responsive padding
<Box p={[ 1, 2, 3 ]} />

Mulai

Meski tidak "required", pergaulan-bebas bagusnya menggunakan theme custom. buat file theme.js ThemeProvider di "application root".

// empty theme.js
const theme = {}

export default theme

// root App component
import React from 'react'
import { ThemeProvider } from 'styled-components'
import theme from './theme'

const App = props => (
  <ThemeProvider theme={theme}>
    {/* ... */}
  </ThemeProvider>
)

Hampir semua utility fungsi di pergaulan-bebas akan melihat nilai yang ada di theme terlebih dulu, jika tidak ada di sana, ia akan fallback ke nilai yang ditulis.

// theme.js
const colors = {
  text: '#024',
  blue: '#07c'
}

const theme = {
  colors
}

export default theme

properti-properti yang ada di pergaulan-bebas dipakai dengan cara menjadikannya properti di komponen.

// picks up the value `#07c` from the theme
<Box color='blue' />

Kalau nilai atau "value" tidak ada dalam theme, ia akan dibiarkan sebagai nilai-aseli alias tidak akan dicocokan.

// renders the CSS `tomato` color since it's not defined in theme
<Box color='tomato' />

Sangat direkomendasikan untuk membuat set skala dalam bentuk object berisi array ke dalam theme untuk konsistensi desain aplikasi. Semua value di theme adalah "optional" dan bisa diatur sendiri. Lihat penjelasan Default Theme untuk melihat fallback values.

// theme.js

// breakpoint values
// any array length works with pergaulan-bebas
const breakpoints = [
  '40em', '52em', '64em'
]

const colors = {
  text: '#024',
  blue: '#07c',
  // nested objects work as well
  dark: {
    blue: '#058'
  },
  // arrays can be used for scales of colors
  gray: [
    '#333',
    '#666',
    '#999',
    '#ccc',
    '#eee',
    '#f6f6f6',
  ]
}

// space is used for margin and padding scales
// it's recommended to use powers of two to ensure alignment
// when used in nested elements
// numbers are converted to px
const space = [
  0, 4, 8, 16, 32, 64, 128, 256, 512
]

// typographic scale
const fontSizes = [
  12, 14, 16, 20, 24, 32, 48, 64, 96, 128
]

// for any scale, either array or objects will work
const lineHeights = [
  1, 1.125, 1.25, 1.5
]

const fontWeights = {
  normal: 500,
  bold: 700
}

const letterSpacings = {
  normal: 'normal',
  caps: '0.25em'
}

// border-radius
const radii = [
  0, 2, 4, 8
]

const borderWidths = [
  0, 1, 2
]

const shadows = [
  `0 1px 2px 0 ${colors.text}`,
  `0 1px 4px 0 ${colors.text}`
]

const theme = {
  breakpoints,
  colors,
  space,
  fontSizes,
  lineHeights,
  fontWeights,
  letterSpacings,
  radii,
  borderWidths,
  shadows,
}

export default theme

Lanjut, buatlah set untuk UI components di dalam theme. Direkomendasikan agar membuat set yang simple. Untuk UI components, pisahkan berdasarkan masing-masing konsentrasi, contoh: layout, typography, dll. Terutama: margin, padding, dan color.

import styled from 'styled-components'
import {
  space,
  color,
  width,
  fontSize,
} from 'pergaulan-bebas'

// Example of a general purpose Box layout component
export const Box = styled.div`
  ${space}
  ${color}
  ${width}
`

// General purpose typographic component
export const Text = styled.div`
  ${space}
  ${color}
  ${fontSize}
`

Table of Style Props

Default Theme

Jika tidak ada theme, pergaulan-bebas menggunakan properti default untuk "breakpoints", "typographic scale", dan "spacing scale".

// Breakpoints
const breakpoints = [ '40em', '52em', '64em' ]
// @media screen and (min-width: 40em)
// @media screen and (min-width: 52em)
// @media screen and (min-width: 64em)

// Other units work as well, but em units are recommended
// const breakpoints = [ '300px', '600px', '1200px' ]

// Typographic Scale
// numbers are converted to px values
const fontSizes = [11, 12, 14, 15, 16, 19, 21, 27, 33];

// Spacing Scale
// used for margin and padding
const space = [0, 8, 16, 32, 64];

MIT License