This living style guide serves as a source of truth for commonly used elements, modules, and components and provides a common design language around Longview’s UI patterns. This guide/library is a 'Lego box' that will hopefuly make it easier to build modular front-end components and maintin a visual consistency throughout the app. For more depth on brand styles See Brand Guidelines.
Content Styles
Most of the elements listed below are borrowing from Bootstrap's styles with some degree of customization.
See Bootstrap documentation for complete list.
Colors
Brand colors. See Branding Guidelines Manual for deeper understanding of color usage.
Conditional Colors are mainly used to indicate states, for example, Danger, Warning, Success...
Backgrounds
These are the most common backgrounds used.
The .texture-bg is used for body background.
.bg-dark is used for components like call-outs, navbars, and cards.
The .login-bg background is only used for the login page.
.bg-light is used in places where pages could be printable, like reports and lists.
.bg-white is rarely used.
Logos
logo-longview-iot.svg
logo-longview-iot-sm.svg
Typography
font-family: 'din-2014', sans-serifHeaders
Headers are generally all styled the same, with the exception of .display-1 - .display-4 and .lead. These modifiers will look the same no matter what element they are use with.
h1 Complete IoT Solution for Enterprises
h2 Complete IoT Solution for Enterprises
h3 Complete IoT Solution for Enterprises
h4 Complete IoT Solution for Enterprises
h5 Complete IoT Solution for Enterprises
h6 Complete IoT Solution for Enterprises
Complete IoT Solution for Enterprises
.display-1
Complete IoT Solution for Enterprises
.display-4
Complete IoT Solution for Enterprises
.text-thin Only works for header tags
Body
p Complete IoT Solution for Enterprises
Common text styles
.text-dark .text-secondaryConditional colors also exist for text.
.text-success .text-danger .text-warning .text-info See more colors
.lead Mainly used on p tags to emphesize text.
.lead {
font-size: 1.25rem;
font-weight: 300;
}
Icons
Some of the iconography wil be custom made svgs, while most general use icons in the app are from Font Awesome.
General use
Hover over each icon to see use-cases.Custom Icons
Buttons
The main buttons used in the app are .btn .btn-primary, .btn .btn-secondary, .btn .btn-outline-primary, .btn .btn-outline-secondary
Button text is sentence-case.
Other buttons that can be used:
Buttons with icons
.CSV .PDF
.btn-primary
.btn-secondary
.CSV
.PDF
Components
Button groups with toggle.
.btn-group Wrap a series of buttons in a group. Works with input radio buttons too.
Button dropdowns
.btn-toolbar Wrap a series of button groups in a toolbar for more complex components.
Forms
Bootstrap documentation for Forms
Search
Search is used to filter down on page. Behavior should be ...
on dark background
on light background
Login page
Complete IoT Solution for Enterprises
Complete IoT Solution for Enterprises
.form-group for grouping things. Individual form controls automatically receive some global styling. All textual
input,
textarea, and
selectelements with
.form-controlare set to
width: 100%;by default. Wrap labels and controls in .form-group for optimum spacing.
.form-inline Great for forms that only occupy one line for whatever reason.
Input groups
.input-group Extend form controls by adding text or buttons before, after, or on both sides of any text-based input. Use
.input-groupwith an
.input-group-addonto prepend or append elements to a single
.form-control.
@
@example.com
Checkboxes
input[type=checkbox] {
visibility: hidden;
display: none;
}
input[type=checkbox]+label:before,
input[type=checkbox]+span:before {
visibility: visible;
font-family: "FontAwesome";
padding-right: .5em;
}
input[type=checkbox]+label:hover,
input[type=checkbox]+span:hover {
cursor: pointer;
}
input[type=checkbox]+label:hover:before,
input[type=checkbox]+span:before {
content: '\f0c8';
filter: alpha(opacity=20);
opacity: 0.2;
color: #5CBC32;
}
input[type=checkbox]:checked+label:before,
input[type=checkbox]:checked+span:before {
content: '\f00c';
}
input[type=checkbox]:checked+label:hover:before,
input[type=checkbox]:checked+span:hover:before,
input[type=checkbox]:checked+label:before,
input[type=checkbox]:checked+span:before {
filter: alpha(opacity=100);
opacity: 1;
}
List group with badges
.list-groupwith
span.badge Add the badges component to any list group item and it will automatically be positioned on the right.
- Cras justo odio 14
- Dapibus ac facilisis in 2
- Morbi leo risus 1
-
Cras justo odio
14
-
Dapibus ac facilisis in
2
-
Morbi leo risus
1
Tooltips
Tooltips are handy for showing clarifying information for something. They are especially helpful for quick reference on elements like icons. Tooltips can be place on any side of an object, and can also handle custom html. Bootstrap documentation
Tabs
.nav-tabs Best if used on a dark background. (Note that it requires a .nav base class.) See use case in app
Pills
.nav-pills Note that it requires a.nav base class.
Filter bar, best if used on a dark background .filter-bar See use case in app
Tables
| Name | Location | Alert |
|---|---|---|
| LACC EP |
|
|
| No Sensor Assigned |
|
|
| LACC EP |
|
| Date/Time | Location | Position (lat,long) | Time Since Previous Reading (hh:mm) |
|---|---|---|---|
| Dec 5, 2018 8:15 am CST | Laydown | 93.30692, 30.22014 | 00:30 |
| Dec 5, 2018 8:15 am CST | 123 Street Dr, Austin, TX 78704 | 93.30692, 30.22014 | 01:05 |
| Dec 6, 2018 8:00 am CST | Unknown | 93.30692, 30.22014 | 00:15 |
| Dec 6, 2018 2:35 pm CST | LACC Utility Area | 93.30692, 30.22014 | 06:25 |
| Dec 6, 2018 5:15 pm CST | Laydown | 93.30692, 30.22014 | 01:45 |
Modals
.modal Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for padding), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action. Bootstrap on modals
Alerts
.alert Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages. For inline dismissal, use the alerts jQuery plugin. Bootstrap documentation
Holy guacamole! You should check in on some of those fields below.
Pagination
.pagination Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.
Badges
.badge Used for labelling things that need badges.
Primary
Secondary
Success
Danger
Warning
Info
Light
Dark
Breadcrumbs
.breadcrumb Indicate the current page's location within a navigational hierarchy. Separators are automatically added in CSS through
:before and
content.
Cards
.card-deck .card
Site: Lotte-Axiall East
Location: -93.3069258, 30.2201495
Zones: 18
Assets: 143
Last updated 3 mins ago
Site: Westlake LA
Location: -93.3069258, 30.2201495
Zones: 18
Assets: 143
Last updated 3 mins ago
Site: Site B
Location: -93.3069258, 30.2201495
Zones: 18
Assets: 143
Last updated 3 mins ago
Site: Lotte-Axiall East
Current
Location: -93.3069258, 30.2201495
Zones: 18
Assets: 143
Last updated 3 mins ago
Utilities
For a complete list of Bootstrap utilities see Bootstrap documentation
Borders
Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element. Bootstrap documentation
Flex
Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary. Bootstrap documentation
Flex item with a lot of content
Flex item
Flex item
Display
Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing. Bootstrap documentation
.d-inline
.d-block
d-inline
d-inline
d-block
d-block
Shadows
Add or remove shadows to elements with box-shadow utilities. Bootstrap documentation
No shadow
Small shadow
Regular shadow
Larger shadow
Spacing
Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance. Bootstrap documentation
How it works
Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.
Notation
Spacing utilities that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.
Where property is one of:
m- for classes that setmarginp- for classes that setpadding
Where sides is one of:
t- for classes that setmargin-toporpadding-topb- for classes that setmargin-bottomorpadding-bottoml- for classes that setmargin-leftorpadding-leftr- for classes that setmargin-rightorpadding-rightx- for classes that set both*-leftand*-righty- for classes that set both*-topand*-bottom- blank - for classes that set a
marginorpaddingon all 4 sides of the element
Where size is one of:
0- for classes that eliminate themarginorpaddingby setting it to01- (by default) for classes that set themarginorpaddingto$spacer * .252- (by default) for classes that set themarginorpaddingto$spacer * .53- (by default) for classes that set themarginorpaddingto$spacer4- (by default) for classes that set themarginorpaddingto$spacer * 1.55- (by default) for classes that set themarginorpaddingto$spacer * 3auto- for classes that set themarginto auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)
.p-5
.m-5
.py-5
.mx-5
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * .25) !important;
}
.px-2 {
padding-left: ($spacer * .5) !important;
padding-right: ($spacer * .5) !important;
}
.p-3 {
padding: $spacer !important;
}
Animations
There are CSS animation libraries that are available to use to add small animations to the app. The two that have been employed for this app: Animate.css and Hover.css. (Note: Many of the classes have been removed.)