How to use styled-bootstrap-grid - 6 common examples

To help you get started, we’ve selected a few styled-bootstrap-grid examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github artsy / reaction / src / Styleguide / Elements / Grid.tsx View on Github external
import { color, flex, space, textAlign, width } from "styled-system"
export { media } from "styled-bootstrap-grid"

// @ts-ignore
import styled, { StyledComponentClass } from "styled-components"

const DEBUG = false

export const Grid = styled(StyledGrid.Container)`
  ${space};
`
export const Row = styled(StyledGrid.Row)`
  ${color};
  ${space};
`
export const Col = styled(StyledGrid.Col)`
  ${color};
  ${flex};
  ${space};
  ${textAlign};
  ${width};

  ${() => {
    if (DEBUG) {
      return `
        border: 1px solid #ddd;
      `
    }
  }};
`
github artsy / reaction / src / Styleguide / Elements / Grid.tsx View on Github external
import * as StyledGrid from "styled-bootstrap-grid"
import { color, flex, space, textAlign, width } from "styled-system"
export { media } from "styled-bootstrap-grid"

// @ts-ignore
import styled, { StyledComponentClass } from "styled-components"

const DEBUG = false

export const Grid = styled(StyledGrid.Container)`
  ${space};
`
export const Row = styled(StyledGrid.Row)`
  ${color};
  ${space};
`
export const Col = styled(StyledGrid.Col)`
  ${color};
  ${flex};
  ${space};
  ${textAlign};
  ${width};

  ${() => {
    if (DEBUG) {
      return `
github artsy / reaction / src / Styleguide / Elements / Grid.tsx View on Github external
import * as StyledGrid from "styled-bootstrap-grid"
import { color, flex, space, textAlign, width } from "styled-system"
export { media } from "styled-bootstrap-grid"

// @ts-ignore
import styled, { StyledComponentClass } from "styled-components"

const DEBUG = false

export const Grid = styled(StyledGrid.Container)`
  ${space};
`
export const Row = styled(StyledGrid.Row)`
  ${color};
  ${space};
`
export const Col = styled(StyledGrid.Col)`
  ${color};
  ${flex};
  ${space};
  ${textAlign};
  ${width};

  ${() => {
    if (DEBUG) {
      return `
        border: 1px solid #ddd;
      `
    }
github artsy / reaction / src / Styleguide / theme.tsx View on Github external
export function injectGlobalCSS() {
  injectLayoutBaseCSS(`
    ${reset};

    html,
    body,
    #root {
      height: 100%;
    }
    body {
      margin: 0;
      padding: 0;
    }

    @font-face {
      font-family: Unica77LL-Regular;
      src: url(/assets/fonts/Unica77LL-Regular.otf);
    }
github fintory / kickup-react / client / components / Button / styles.js View on Github external
`};

  :not([disabled]):hover {
    color: ${(props: { variant: string }) => fontColors[props.variant]};
    opacity: 0.9;
  }

  ${(props: { variant: string, disabled: boolean }) =>
    props.disabled &&
    css`
      opacity: 0.9;
      cursor: not-allowed;

      background-color: ${colors.shadeBeta};
      color: ${rgba(colors.white, 0.95)};
    `} ${media.lg`
    font-size: 14px;
  `};
`

export const Spinner = styled.span`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transition-duration: 250ms;
  position: absolute;
  top: -28px;
  height: 28px;
  left: 0;
  transform: ${(props: { loading: boolean }) =>
    props.loading ? 'translate3d(0, 2.5rem, 0)' : 'translate3d(0, 0, 0)'};
github artsy / reaction / src / Styleguide / Elements / Box.tsx View on Github external
}
    `};
`

export const StackableBorderBox = styled(BorderBox)`
  :not(:first-child) {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }
  :not(:last-child) {
    border-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  ${media.sm`
    padding: ${space(3)}px;
    ${styledSpace};
  `};
`

export interface BoxProps
  extends BackgroundProps,
    BottomProps,
    BottomProps,
    ColorProps,
    DisplayProps,
    HeightProps,
    LeftProps,
    LeftProps,
    MaxWidthProps,
    PositionProps,

styled-bootstrap-grid

bootstrap grid system using styled components

MIT
Latest version published 3 years ago

Package Health Score

51 / 100
Full package analysis