csscomp

Installation

npm install csscomp

Theming

Start by creating a theme for your application and define your design system in here. The theme you define will be merged with the default theme which comes with a set of default values for the colors, space, radii, durations and breakpoints properties. Read more about how this works below.

const theme = {
  "fonts": {
    "base": "'Noto Sans', sans-serif",
    "code": "'Fira Code', sans-serif",
    "logo": "'Quantico', sans-serif"
  },
  "colors": {
    "white": "#f5f5f5",
    "black": "#0a0a0a",
    "primary": "magenta",
    "secondary": "cyan",
    "grey": {
      "1": "#fcfcfc",
      "2": "#fafafa",
      "3": "#f7f7f7",
      "4": "#f5f5f5",
      "5": "#f2f2f2"
      ...
    }
  },
  "sizes": {},
  "fontSizes": {
    "xs": "0.75em",
    "s": "0.9em",
    "m": "1em",
    "l": "1.1em"
  },
  "borders": {
    "main": "1px solid",
    "thick": "2px solid"
  },
  "space": {
    "1": "0.25rem",
    "2": "0.5rem",
    "3": "0.75rem",
    "4": "1rem",
    "5": "1.25rem"
    ...
  },
  "radii": {
    "1": "0.1rem",
    "2": "0.2rem",
    "3": "0.3rem",
    "4": "0.4rem",
    "5": "0.5rem"
    ...
  },
  "durations": {
    "1": "0.25s",
    "2": "0.5s",
    "3": "0.75s",
    "4": "1s",
    "5": "1.25s"
    ...
  },
  "breakpoints": [
    "768px",
    "1024px"
  ]
}

fonts affects the fontFamily property. The default theme doesn't provide any values for this property.
fontSizes affects the fontSize property. The default theme doesn't provide any values for this property.
colors affects color, backgroundColor, borderColor etc. The default theme only comes with a grey property which is a scale of greytones from 0 to 100, accessible like 'grey.25' or 'grey[25]'.
spacings affects left, right, top, bottom, margin, padding etc. The default theme provides an 8pt grid system (divided by half) with rem values to be responsive to the root fontSize. The values are accessible by passing numbers like { padding: 4 }.
sizes affects width, height, size etc. The default theme doesn't provide any values for this property.
borders affects only the border property. The default theme provides the values shown in the example above.
radii affects only the borderRadius property. The default theme provides the values shown in the example above
durations affects transition, animation etc. The default theme provides the values shown in the example above
breakpoints are used to create responsive styles together with array values, each value in the array will be defined in a media query based on the defined breakpoints, with exception to the first item to keep a mobile first approach. The default theme provides the values shown in the example above

After defining your theme wrap your application in a <CSSProvider /> and pass your theme to it.

export default function App () {
  return (
    <CSSProvider theme={theme}>
      ...
    </CSSProvider>
  )
}

Creating Components

Create components by calling a method matching the name of the element you want to create, pass styles to it in object format, or use the callback function to interact with props. These components support some pretty cool features under the hood.

Property abbreviations are supported (mostly based on emmet.io)
Theme variables are accessible by passing keys as string values
Responsive styles are defined by passing arrays of values
Template functions are available for color manipulation and spacings

Use plain objects:

import { comp } from 'csscomp'

export const Box = comp.div({})

export const Container = comp.div({
  d: 'flex',
  w: '100%',
  maw: ['800px', '1000px', '1200px', '1400px'],
  px: 6,
})

export const Section = comp.div({
  d: 'flex',
  bgi: `radial-gradient(
    {darken(primary, 5)} 25%,
    {darken(primary, 10)} 100%
  )`,
  c: 'white',
  py: [4, 8, 12, 16],
})

export const Button = comp.button({
  bgc: 'primary',
  c: 'white',
  p: 4,
  cur: 'pointer',
  trs: 'all .4s ease',

  '&:hover': {
    bgc: '{darken(primary, 5)}',
  }
})

export const Input = comp.input({
  bgc: 'white',
  bd: 'main',
  bdc: 'primary',
  px: 5,
  py: 2,

  '&:focus': {
    bd: 'thick',
    bdc: '{darken(primary, 5)}',
  }
})

Use functions when interacting with props:

import { comp } from 'csscomp'

export const Spacer = comp.div<{ gap?: number; direction?: 'column' | 'row' }>(
  ({ gap = 4, direction = 'column' }) => ({
    d: 'flex',
    fxd: direction,
    gap,
  
    ...(direction === 'column' ? {
      jc: 'center'
    } : {
      ai: 'center'
    })
  })
)

export const Checkbox = comp.div<{ checked?: boolean }>(
  ({ checked }) => ({
    pos: 'relative',
    d: 'flex',
    ai: 'center',
    jc: 'center',
    size: '1rem',
    bd: 'main',
    bdc: 'primary',
    bdrs: 2,
    cur: 'pointer',

    '&:after': {
      cont: "''",
      pos: 'absolute',
      size: '50%',
      bgc: checked ? 'primary' : 'transparent',
      bdrs: 1
    }
  })
)

Extending components

Components are extendable, just wrap an existing component in the comp constructor and use the return function to add more styling to the extended component.

import { comp } from 'csscomp'
import { Section, Button, Checkbox } from './components'

export const SectionHighlight = comp(Section)({
  bgc: 'primary',
  c: 'white',
  jc: 'center',
  py: [8, 16, 24, 32],
})

export const ButtonSecondary = comp(Button)({
  bgc: 'secondary',

  '&:hover': {
    bgc: 'secondaryDark',
  }
})

export const ButtonOutline = comp(Button)({
  bgc: 'transparent',
  c: 'primary',
  bd: 'main',
  bdc: 'primary',

  '&:hover': {
    bgc: 'transparent',
    c: 'primaryDark',
    bdc: 'primaryDark',
  }
})

export const CheckboxSecondary = comp(Checkbox)(({ checked }) => ({
  bdc: 'secondary',

  '&:after': {
    bgc: checked ? 'secondary' : 'transparent',
  }
}))

Using Components

Components are exposed with a css prop for inline styling, you can pass the same objects here as when defining the component. You can also change the element type of any component with the as prop.

Here is an example of a register form component built with the components defined in the previous section.

import { useState } from 'react'
import { Box, Spacer, Checkbox, Input, Button } from './components'

export const Register = () => {
  const [formData, setFormData] = useState({})

  const updateFormData = (event) => {
    setFormData({ ...formData, [event.target.name]: event.target.value })
  }

  const handleRegister = () => {
    // TODO: submit register form
  }

  return (
    <Box
      as='form'
      onSubmit={handleRegister}
      css={{
        w: '100%',
        p: 5,
        maw: '640px',
        bgc: 'white',
        bdrs: 4,
      }}
    >
      <Spacer>
        <Spacer gap={2}>
          <p>Username</p>
          <Input type='text' name='username' onChange={updateFormData} />
        </Spacer>
        <Spacer gap={2}>
          <p>Email</p>
          <Input type='text' name='email' onChange={updateFormData} />
        </Spacer>
        <Spacer gap={2}>
          <p>Password</p>
          <Input type='password' name='password' onChange={updateFormData} />
        </Spacer>
        <Spacer
          as='label'
          gap={2}
          direction='row'
          css={{ cur: 'pointer' }}
        >
          <Box
            as='input'
            type='checkbox'
            name='stayUpdated'
            onChange={updateFormData}
            css={{ d: 'none' }}
          />
          <Checkbox checked={new Boolean(formData.stayUpdated)} />
          <p>Stay updated</p>
        </Spacer>
        <Button type='submit'>Submit</Button>
      </Spacer>
    </Box>
  )

Global styling

You can create global stylesheet components with the css constructor. Which has the same capabilities as the component constructor.

import { CSSProvider, css } from 'csscomp'
import { Theme } from './theme'

const RootStyle = css<{ rootFontSizes: string[] }>(
  ({ rootFontSizes }) => ({
    '*': {
      boxs: 'border-box'
    },

    ':root': {
      ff: 'base',
      fs: rootFontSizes || '16px',
      bgc: 'black',
      scrollBehavior: 'smooth',
      '-webkit-font-smoothing': 'antialiased',
      '-moz-osx-font-smoothing': 'grayscale',
    }
  })
)

const App = () => {
  return (
    <CSSProvider theme={Theme}>
      <RootStyle rootFontSizes={['14px', '15px', '16px']} />
      ...
    </CSSProvider>
  )
}

Keyframes

You can use the useKeyframes hook to create keyframes animations. The hook injects the definition into the page and returns a generated name variable which you can use to set the animationName property.

import { comp, useKeyframes } from 'csscomp'

const SSpinner = comp.div(({ animn }) => ({
  size: '5rem',
  bd: '.5rem solid',
  bdc: 'primary',
  bdbc: 'transparent',
  bdr: '100%',
  anim: `${animn} 1s linear infinite`,
}))

export const Spinner = () => {
  const { name } = useKeyframes({
    '0%': {
      tf: 'rotate(0deg)'
    },
    '100%': {
      tf: 'rotate(360deg)'
     }
  })

  return (
    <SSpinner animn={name} />
  )
}

Reference

Abbreviations

Theme values

csscomp

Installation

Theming

Creating Components

Extending components

Using Components

Global styling

Keyframes

Reference

Abbreviations

Theme values

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

csscomp

Installation

Theming

Creating Components

Extending components

Using Components

Global styling

Keyframes

Reference

Abbreviations

Theme values

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads