maxmckenzie / bristol-fashion Goto Github PK

View Code? Open in Web Editor NEW

5.0 5.0 0.0 2.62 MB

Design system to help keep UI design ship shape and Bristol fashion

Home Page: https://bristol-fashion.now.sh

JavaScript 6.06% Less 88.98% SCSS 4.96%

css css-framework less scss uikit

bristol-fashion's People

Contributors

Stargazers

Watchers

bristol-fashion's Issues

Typography

Colour Pallet and Tones

UI
Brand

todo

display pallet in storybook

Breakpoint mixins

# Shadow

._shadow-xs
._shadow-sm
._shadow-md
._shadow-lg
._shadow-xl
._shadow-xxl

# Spacing

._m-r:{auto|0-4}
._m-v:{auto|0-4}
._m-l:{auto|0-4}
._m-r:{auto|0-4}
._m-t:{auto|0-4}
._m-b:{auto|0-4}
._p-r:{auto|0-4}
._p-v:{auto|0-4}
._p-l:{auto|0-4}
._p-r:{auto|0-4}
._p-t:{auto|0-4}
._p-b:{auto|0-4}

Media Queries

# Type

._text-xs
._text-sm
._text-md
._text-lg
._text-xl
._text-xxl

# Images

_image:fill
_image:4:6
_image:16:9
_image:1:1

# borders

._border
._border-radius:sm
._border-radius:md
._border-radius:lg
._border-top
._border-bottom
._border-left
._border-right

grid

@columns: 12;
@gutter-width: 1rem;
@gutter-width-half: 0.5rem;

._grid {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin:0 -0.5rem;
}

._grid._nogutter {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  margin:0 !important;
}

.gencolumns(@columns; @index: 1) when (@index =< @columns) {
  .gencolumns(@columns; (@index + 1));


  ._col\:xs\(@{index}\) {
    width: calc(calc(100% / @columns * @index) - calc(var(--gw)));
    margin: calc(var(--gw) / 2);
  }
  ._col\:xs\(@{index}\)._nogutter {
    margin:0 !important;
    width: calc(calc(100% / @columns * @index)) !important;
  }

  @media screen and (min-width: 20rem) {
    ._col\:sm\(@{index}\) {
      width: calc(calc(100% / @columns * @index) - calc(var(--gw)));
      margin: calc(var(--gw) / 2);
    }
    ._col\:sm\(@{index}\)._nogutter {
      margin:0 !important;
      width: calc(calc(100% / @columns * @index)) !important;
    }
  }

  @media screen and (min-width: 30rem) {
    ._col\:md\(@{index}\) {
      width: calc(calc(100% / @columns * @index) - calc(var(--gw)));
      margin: calc(var(--gw) / 2);
    }
    ._col\:md\(@{index}\)._nogutter {
      margin:0 !important;
      width: calc(calc(100% / @columns * @index)) !important;
    }
  }

  @media screen and (min-width: 60rem) {
    ._col\:lg\(@{index}\) {
      width: calc(calc(100% / @columns * @index) - calc(var(--gw)));
      margin: calc(var(--gw) / 2);
    }
    ._col\:lg\(@{index}\)._nogutter {
      margin:0 !important;
      width: calc(calc(100% / @columns * @index)) !important;
    }
  }

  @media screen and (min-width: 90rem) {
    ._col\:xl\(@{index}\) {
      width: calc(calc(100% / @columns * @index) - calc(var(--gw)));
      margin: calc(var(--gw) / 2);
    }
    ._col\:xl\(@{index}\)._nogutter {
      margin:0 !important;
      width: calc(calc(100% / @columns * @index)) !important;
    }
  }
}

[class^='_col'],
[class*=' _col'] {
  display: inline-flex;
  flex-wrap: wrap;
}

.gencolumns(@columns);