Jumpstart Documentation

Use this system as a starting point for your own template. We created a set of UI components commonly seen in the wild. Tailor them and/or your Tailwind configuration to meet your own needs

To the left are sections of components and their relative code snippets. You're welcome to change anything to match your own branding.

Tailwind CSS

This application template utilizes Tailwind CSS as a utility-first approach towards designing an application. Refer to the documentation to understand how it works and to configure for your own needs.

Be sure to modify the tailwind.config.js file to include any additional colors, fonts, styles and more. Find it in app/javascript/stylesheets/.

Extended Brand Classes

Bundled with the default Tailwind configuration is additional brand-oriented color schemes which tie directly to buttons and other Jumpstart pattern components. Modify this to match your own needs and/or remove them entirely.

// app/javascript/stylesheets/tailwind.config.js

'primary-200': '#eef1ff',
'primary-500': '#4965f6',
'primary-600': '#1231d0',
'secondary-200': '#e3f6ed',
'secondary-500': '#3ecf8e',
'secondary-600': '#36b47c',
'tertiary-200': '#eeeeee',
'tertiary-500': '#57586e',
'tertiary-600': '#3a3b48',
'danger-200': '#fff3f3',
'danger-500': '#F37B7B',
'danger-600': '#d26969',
'code-400': '#fefcf9',
'code-600': '#3c455b',