Design System Introduction
A collection of pre-assembled assets, layouts, and components, built exclusively for our developers to aid in the process of standing up an application.
This generic portfolio version is intended only to showcase the design system's responsive skeleton and VanillaJS framework. Much of the design system content has been removed due to privacy concerns. This includes all proprietary First American features and assets.
Looking to get up and running really quickly? Download our boilerplate template, built with Angular(7.1.0) and Bootstrap(4.3.1).
Copy-paste the stylesheet
<link> into your
<head> before all other stylesheets to load our CSS.
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
That’s all you need for overall page requirements. Visit our Developer Docs to start laying out your site’s content and components.
Bootstrap employs a handful of important global styles and settings that you’ll need to be aware of when using it, all of which are almost exclusively geared towards the normalization of cross browser styles. Let’s dive in.
Bootstrap requires the use of the HTML5 doctype. Without it, you’ll see some funky incomplete styling, but including it shouldn’t cause any considerable hiccups.
Bootstrap is developed mobile first, a strategy in which we optimize code for mobile devices first and then scale up components as necessary using CSS media queries. To ensure proper rendering and touch zooming for all devices,
add the responsive viewport meta tag to your
You can see an example of this in action in the starter template.