Merge pull request #54 from dod-ccpo/ui/style-variables
Ui/style variables
This commit is contained in:
andrewdds
GitHub
commit
d08ad9bf3e
26
scss/README.md
Normal file
26
scss/README.md
Normal file
@ -0,0 +1,26 @@
|
||||
# Styling AT-ST
|
||||
|
||||
AT-ST's user interface components are based on the (U.S. Web Design System)[https://designsystem.digital.gov/components/]. Please refer there when deciding how to implement a UI feature.
|
||||
|
||||
## CSS Architecture
|
||||
### (Copied from https://github.com/uswds/uswds#css-architecture)
|
||||
## CSS architecture
|
||||
|
||||
* The CSS foundation of this site is built with the **[Sass](https://sass-lang.com)** preprocessor language.
|
||||
* Uses **[Bourbon](http://bourbon.io/)** for its simple and lightweight Sass mixin library, and the **[Neat](http://neat.bourbon.io/)** library for the grid framework. Bourbon and Neat are open-source products from **[thoughtbot](https://thoughtbot.com/)**.
|
||||
* The CSS organization and naming conventions follow **[18F’s CSS Front End Guide](https://frontend.18f.gov/css/)**.
|
||||
* CSS selectors are **prefixed** with `usa` (For example: `.usa-button`). This identifier helps the design system avoid conflicts with other styles on a site which are not part of the U.S. Web Design System.
|
||||
* Uses a **[modified BEM](https://frontend.18f.gov/css/naming/)** approach created by 18F for naming CSS selectors. Objects in CSS are separated by single dashes. Multi-word objects are separated by an underscore (For example: `.usa-button-cool_feature-active`).
|
||||
* Uses **modular CSS** for scalable, modular, and flexible code.
|
||||
* Uses **nesting** when appropriate. Nest minimally with up to two levels of nesting.
|
||||
* Hard-coded magic numbers are avoided and, if necessary, defined in the `core/variables` scss file.
|
||||
* Media queries are built **mobile first**.
|
||||
* **Spacing units** are as much as possible defined as rem or em units so they scale appropriately with text size. Pixels can be used for detail work and should not exceed 5px (For example: 3px borders).
|
||||
|
||||
**For more information, visit:**
|
||||
[18F’s CSS Front End Guide](https://frontend.18f.gov/css/)
|
||||
|
||||
Overrides and Modifications
|
||||
---
|
||||
|
||||
When making modifications to the default USWDS components, please refer to the original source, and make a `.scss` file of the same name. Annotate the top of the file with a reference to the USWDS documentation and source code.
|
||||
@ -1,10 +1,10 @@
|
||||
@import 'base/variables';
|
||||
@import 'core/variables';
|
||||
@import '../node_modules/uswds/src/stylesheets/uswds';
|
||||
|
||||
@import 'base/typography';
|
||||
@import 'base/forms';
|
||||
@import 'base/buttons';
|
||||
@import 'base/tables';
|
||||
@import 'elements/typography';
|
||||
@import 'elements/inputs';
|
||||
@import 'elements/buttons';
|
||||
@import 'elements/tables';
|
||||
|
||||
@import 'components/site_action';
|
||||
@import 'components/empty_state';
|
||||
@ -12,4 +12,4 @@
|
||||
@import 'sections/main';
|
||||
@import 'sections/navigation';
|
||||
@import 'sections/footer';
|
||||
@import 'sections/login';
|
||||
@import 'sections/login';
|
||||
|
||||
@ -1 +0,0 @@
|
||||
$nav-width: 300px;
|
||||
160
scss/core/_variables.scss
Normal file
160
scss/core/_variables.scss
Normal file
@ -0,0 +1,160 @@
|
||||
/*
|
||||
* AT-ST Variables
|
||||
* ===================================================
|
||||
*/
|
||||
|
||||
// What is this?
|
||||
$nav-width: 300px;
|
||||
|
||||
|
||||
/*
|
||||
* USWDS Variables
|
||||
* @see https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_variables.scss
|
||||
* ===================================================
|
||||
*/
|
||||
|
||||
$base-font-size: 1.7rem;
|
||||
$small-font-size: 1.4rem;
|
||||
$lead-font-size: 2rem;
|
||||
$title-font-size: 5.2rem;
|
||||
$h1-font-size: 4rem;
|
||||
$h2-font-size: 3rem;
|
||||
$h3-font-size: 2rem;
|
||||
$h4-font-size: 1.7rem;
|
||||
$h5-font-size: 1.5rem;
|
||||
$h6-font-size: 1.3rem;
|
||||
$base-line-height: 1.5;
|
||||
$heading-line-height: 1.3;
|
||||
$lead-line-height: 1.7;
|
||||
|
||||
$font-sans: 'Source Sans Pro', sans-serif;
|
||||
$font-serif: 'Merriweather', serif;
|
||||
|
||||
$font-normal: 400;
|
||||
$font-bold: 700;
|
||||
|
||||
// Color
|
||||
$color-blue: #0071bc;
|
||||
$color-blue-darker: #205493;
|
||||
$color-blue-darkest: #112e51;
|
||||
|
||||
$color-aqua: #02bfe7;
|
||||
$color-aqua-dark: #00a6d2;
|
||||
$color-aqua-darkest: #046b99;
|
||||
$color-aqua-light: #9bdaf1;
|
||||
$color-aqua-lightest: #e1f3f8;
|
||||
|
||||
$color-red: #e31c3d;
|
||||
$color-red-dark: #cd2026;
|
||||
$color-red-darkest: #981b1e;
|
||||
$color-red-light: #e59393;
|
||||
$color-red-lightest: #f9dede;
|
||||
|
||||
$color-white: #ffffff;
|
||||
$color-black: #000000;
|
||||
$color-black-light: #212121;
|
||||
|
||||
$color-gray-dark: #323a45;
|
||||
$color-gray: #5b616b;
|
||||
$color-gray-medium: #757575;
|
||||
$color-gray-light: #aeb0b5;
|
||||
$color-gray-lighter: #d6d7d9;
|
||||
$color-gray-lightest: #f1f1f1;
|
||||
|
||||
$color-gray-warm-dark: #494440;
|
||||
$color-gray-warm-light: #e4e2e0;
|
||||
$color-gray-cool-light: #dce4ef;
|
||||
|
||||
$color-gold: #fdb81e;
|
||||
$color-gold-light: #f9c642;
|
||||
$color-gold-lighter: #fad980;
|
||||
$color-gold-lightest: #fff1d2;
|
||||
|
||||
$color-green: #2e8540;
|
||||
$color-green-light: #4aa564;
|
||||
$color-green-lighter: #94bfa2;
|
||||
$color-green-lightest: #e7f4e4;
|
||||
|
||||
$color-cool-blue: #205493;
|
||||
$color-cool-blue-light: #4773aa;
|
||||
$color-cool-blue-lighter: #8ba6ca;
|
||||
$color-cool-blue-lightest: #dce4ef;
|
||||
|
||||
$color-purple: #4c2c92;
|
||||
|
||||
// Functional colors
|
||||
$color-primary: $color-blue;
|
||||
$color-primary-darker: $color-blue-darker;
|
||||
$color-primary-darkest: $color-blue-darkest;
|
||||
|
||||
$color-primary-alt: $color-aqua;
|
||||
$color-primary-alt-dark: $color-aqua-dark;
|
||||
$color-primary-alt-darkest: $color-aqua-darkest;
|
||||
$color-primary-alt-light: $color-aqua-light;
|
||||
$color-primary-alt-lightest: $color-aqua-lightest;
|
||||
|
||||
$color-secondary: $color-red;
|
||||
$color-secondary-dark: $color-red-dark;
|
||||
$color-secondary-darkest: $color-red-darkest;
|
||||
$color-secondary-light: $color-red-light;
|
||||
$color-secondary-lightest: $color-red-lightest;
|
||||
|
||||
$color-base: $color-black-light;
|
||||
$color-focus: $color-gray-light;
|
||||
$color-visited: $color-purple;
|
||||
|
||||
$color-shadow: rgba(#000, 0.3);
|
||||
$color-transparent: rgba(#000, 0);
|
||||
|
||||
// Mobile First Breakpoints
|
||||
$small-screen: 481px;
|
||||
$medium-screen: 600px;
|
||||
$large-screen: 1201px;
|
||||
|
||||
// Grid column counts by screen size
|
||||
$grid-columns-small: 1;
|
||||
$grid-columns-medium: 6;
|
||||
$grid-columns-large: 12;
|
||||
|
||||
// @media single-keyword helpers
|
||||
$small: new-breakpoint(min-width $small-screen $grid-columns-small);
|
||||
$medium: new-breakpoint(min-width $medium-screen $grid-columns-medium);
|
||||
$large: new-breakpoint(min-width $large-screen $grid-columns-large);
|
||||
|
||||
// Set the base path for assets (used for font and image paths below)
|
||||
$asset-path: '../';
|
||||
|
||||
// Relative font and image file paths
|
||||
$font-path: '#{$asset-path}fonts';
|
||||
$image-path: '#{$asset-path}img';
|
||||
|
||||
// Set $asset-pipeline to true if you're using the Rails Asset Pipeline
|
||||
$asset-pipeline: false;
|
||||
|
||||
// Magic Numbers
|
||||
$text-max-width: 66ch; // 66 characters per line
|
||||
$lead-max-width: 77rem;
|
||||
$site-max-width: 1040px;
|
||||
$site-margins: 3rem;
|
||||
$site-margins-mobile: 1.5rem;
|
||||
$article-max-width: 600px;
|
||||
$input-max-width: 46rem;
|
||||
$label-border-radius: 2px;
|
||||
$checkbox-border-radius: 2px;
|
||||
$border-radius: 3px;
|
||||
$button-border-radius: 5px;
|
||||
$box-shadow: 0 0 2px $color-shadow;
|
||||
$focus-outline: 2px dotted $color-gray-light;
|
||||
$focus-spacing: 3px;
|
||||
$nav-width: 951px;
|
||||
$sidenav-current-border-width: 0.4rem; // must be in rem for math
|
||||
|
||||
// 44 x 44 pixels hit target following Apple iOS Human Interface
|
||||
// Guidelines
|
||||
$hit-area: 4.4rem;
|
||||
|
||||
$spacing-x-small: 0.5rem;
|
||||
$spacing-small: 1rem;
|
||||
$spacing-md-small: 1.5rem;
|
||||
$spacing-medium: 2rem;
|
||||
$spacing-large: 3rem;
|
||||
5
scss/elements/_buttons.scss
Normal file
5
scss/elements/_buttons.scss
Normal file
@ -0,0 +1,5 @@
|
||||
/*
|
||||
* Buttons
|
||||
* @see https://designsystem.digital.gov/components/buttons/
|
||||
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_buttons.scss
|
||||
*/
|
||||
@ -1,3 +1,9 @@
|
||||
/*
|
||||
* Inputs
|
||||
* @see https://designsystem.digital.gov/components/form-controls/
|
||||
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_inputs.scss
|
||||
*/
|
||||
|
||||
from {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
@ -21,4 +27,4 @@ select {
|
||||
label:first-child {
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
5
scss/elements/_tables.scss
Normal file
5
scss/elements/_tables.scss
Normal file
@ -0,0 +1,5 @@
|
||||
/*
|
||||
* Tables
|
||||
* @see https://designsystem.digital.gov/components/tables/
|
||||
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_table.scss
|
||||
*/
|
||||
@ -1,3 +1,9 @@
|
||||
/*
|
||||
* Typography
|
||||
* @see https://designsystem.digital.gov/components/typography/
|
||||
* @source https://github.com/uswds/uswds/blob/develop/src/stylesheets/elements/_typography.scss
|
||||
*/
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $font-sans;
|
||||
|
||||
@ -15,4 +21,4 @@ h1 {
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user