bristol-fashion

Ship shape and Bristol fashion

Usage no npm install needed!

<script type="module">
  import bristolFashion from 'https://cdn.skypack.dev/bristol-fashion';
</script>

README

Bristol fashion logo

Documentation: https://bristol-fashion.now.sh/

Bristol fashion is a collection of design system variables and modifiers and default, rather than providing developers with a UI framework such as Bootstrap and Foundation. Bristol provides the variables and modifiers you need to roll your own based around core design theory.

GitHub Workflow Status npm

Install

You can include just the CDN if you would like to https://bristol-fashion.now.sh/styles.css

Including this in your head will include all of the CSS and all of the browser defaults that come with it.

<link rel="stylesheet" href="https://bristol-fashion.now.sh/styles.css">

or yarn add bristol-fashion or npm i bristol-fashion depending on your preference.

Features

  • normalize.css
  • Typography utility for type scale calculation and browser defaults
  • Color CSS variables are broken down into Brand, Pallet, neutral, and UI
  • Modifier classes with ._
  • Inset and drop shadow modifiers
  • Text size modifiers
  • Visibility modifiers
  • Content modifiers
  • Image modifiers
  • Spacing modifiers

Design resources

If you are new to web development/design and need some guidance, we suggest taking a look at this fantastic guide https://www.internetingishard.com/

To learn the fundamentals of design UI check out https://refactoringui.com/

If you like you can up-vote this project on product hunt

Bristol Fashion - Design system to keep web UI ship shape and Bristol fashion | Product Hunt Embed