Fishtown UI ๐จ๐
The design implementation used at Fishtown Analytics.
Built using Tailwind, TypeScript and React.
Install
Install the Fishtown UI theme and component library using npm when installing Tailwind and other plugins.
npm install --save tailwindcss autoprefixer fishtown-analytics/fishtown-ui
If you're looking to update to a new version in another repo, see Updating Fishtown UI node module.
Usage
Tailwind Theme
After installing Tailwind and Fishtown UI, follow the usage instructions for Tailwind.
Apply the Fishtown UI theme in your Tailwind configuration.
// Your project's tailwind.config.js
const fishtownUiTheme = require('fishtown-ui/theme');
// Example config with a custom color
module.exports = {
...fishtownUiTheme,
// Customizations will overwrite the shallow-copy spread, so spread again where appropriate
theme: {
extend: {
colors: {
...fishtownUiTheme.theme.extend.colors,
'sextant-yellow': '#ffb600',
},
},
},
};
We prefix all Tailwind classes with tw-
to avoid conflicts with existing styles.
<nav class="tw-bg-orange tw-p-6">
<div class="tw-text-white tw-mr-6">
<span class="tw-font-semibold tw-text-xl tw-tracking-tight">
Fishtown UI
</span>
</div>
</nav>
Component Library
We don't have ready-to-use components yet, but future usage will roughly look like the following.
We currently only export React components written in TypeScript.
import React from 'react';
import { Button } from 'fishtown-ui';
const logIn = () => {
/* ... */
};
const LogInButton: React.FC = () => {
return <Button onClick={logIn}>Log In</Button>;
};
export default LogInButton;
Updating Fishtown UI node module
If you are in a repo and having trouble updating from a tag to another:
- Make the update in package.json
- Make a similar manual update in package-lock.json (with the new tag number AND the new commit number)
Changing the from
in package-lock.json
specifies how you're naming this commit, while changing the version
actually ensures you're targetting the correct commit.
Contributing
Read our contributing guide (in Storybook)
Roadmap
- Define appropriate use of Storybook
- Define default fonts and iconography
- Define critical components
- Determine if we should export CSS file(s) with compositions (
@apply
definitions)