Skip to content

Alarid/cra-ts-bootstrap

Repository files navigation

Create-React-App Template

Auto Lint on pre-commit hook with husky: never push mistakes again !

Responsive Design

This templates comes with a Styled-Components theme setup, including responsive breakpoints, media queries and global styles.

The breakpoints are the ones used by Bootstrap:

Breakpoint Media query Dimensions
Extra Small xs < 576px
Small sm ≥576px
Medium md ≥768px
Large lg ≥992px
Extra large xl ≥1200px

Usage example:

import styled from 'styled-components/macro'
import { md, lg } from 'styles/media'

const Title = styled.h1`
  font-size: 12pt; // For mobile

  ${md(`
    font-size: 14pt; // Tablet
  `)}

  ${lg(`
    font-size: 16pt; // Desktop
  `)}
`

Theming

You can add your color palette and other theme-related information to the theme in src/styles/theme.ts:

const theme: DefaultTheme = {
  primary: 'red',
  accent: 'green',
  radius: '30px',
  shadow: '-8px -8px 30px #393E44',
  // etc...
}

To use a property of your theme in a Styled Component:

const SubTitle = styled.h2`
  color: ${({ theme }) => theme.primary}
`

Usage

yarn install
yarn start

About

Create-React-App Template with TypeScript, Bootstrap, StyledComponent and eslint / prettier configs

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published