Naming things in web development

README.md

Naming Things

Name things modularly, from a generic to specific. https://webdesign.tutsplus.com/articles/quick-tip-name-your-sass-variables-modularly--webdesign-13364

Anti-patterns

• Don't use values as names - if the value changes, then the name becomes misleading. ie. red, green, blue.
• Don't use linear values - it can be difficult to add new variables into the range. ie. small, medium, large. (Try not to anyway)

Abstraction

Use any non-linear list of related words

• Greek mythological figures

Typography

Font Families

text Text that typically appears in paragraphs.

code Text that is used to display a block of code.

display Text that will be displayed at large sizes, as a headline for example.

headline/heading A display text that is used for headlines text.

Font Weights

light

regular

bold

Font Size Range

Heading text - aligns with h1-6

• alpha
• beta
• gamma
• delta
• epsilon
• zeta

Display text - ie headlines

• giga
• mega
• kilo

Small text - smaller than body copy

• milli
• micro
• nano

Images

icon An image that belongs to a set of images. They are visually similar and are cut to align vertically and horizontally.

symbol An unique image that conveys some meaning, for example a logo.

Viewports

$mobile-small 240 $mobile-large 320 $tablet-small 480 $tablet-large 768 $screen-small 1024 $screen-large 1280

Articles

headline

lead paragraph

byline

dateline

Branding

logo

slogan

Components

card

https://ux.stackexchange.com/questions/90336/whats-the-difference-between-a-modal-popup-popover-and-lightbox

alert . These messages need immediate attention. The window/container is usually locked, meaning you can't dismiss the box or continue with what you want to do until you explicitly acknowledge the content, this usually done by clicking a button inside the container. The buttons on this window are usually "OK" or "Cancel". (If you're showing a lot of these it's usually a failure of design because your user's expectations don't match the UI expectations.)

modal/dialog . These are for getting work done. (Example: a button that says "Invite Friends" will open such a container with a list friends you can then invite). These let you do more work without having to show all the information on the main screen. These messages are not locked and you can click anywhere to dismiss the container.

popup . You don't need to deal with these messages right away, yet at some point you will need to take action since these won't go away until explicitly say say you don't want them around anymore.

flash notice/notification . These notifications have a time associated with them. You can choose to deal with them right away, or if you don't do anything, after a certain time they will dismiss themselves.

lightbox/theatre . These are used to enlarge and bring one part of screen to focus. These containers are most commonly used to view images. Usually you are then able to navigate through similar content (the next photo in the gallery) without dismissing and clicking on another thumbnail. These can be locked or not. Depends on if you want people to return the context they were in or to continue on a new context thread.

popover/tooltip/hovercard . These are passive approaches to showing more information. These are used to add simple instructions or explanations or foreshadow what will happen if you click a link. Lightbox/Theatres - These are used to enlarge and bring one part of screen to focus. These containers are most commonly used to view images. Usually you are then able to navigate through similar content (the next photo in the gallery) without dismissing and clicking on another thumbnail. These can be locked or not. Depends on if you want people to return the context they were in or to continue on a new context thread

---

References

• http://sass-lang.com/styleguide/color
• http://craigmdennis.com/articles/better-sass-variables
• http://chir.ag/projects/name-that-color
• http://typeplate.com/
• http://www.gridlover.net/try
• https://en.wikipedia.org/wiki/List_of_lists_of_lists

_animations.scss

// https://en.wikipedia.org/wiki/Human_processor_model
// http://valhead.com/2016/05/05/how-fast-should-your-ui-animations-be/
$animation-settings: (
  'hare': 250ms, // small items with no easing
  'tortoise': 500ms // small items with easing (ie. bounce, elastic, etc)
);

_breakpoints.scss

// Abstract breakpoints
$dre      : 320px;
$diddy    : 480px;
$jayz     : 600px;

// Using breakpoint it’s as simple as
@include breakpoint( $dre ) {
  width: 320px;
}

_colors.scss

// Color mappings (http://chir.ag/projects/name-that-color/)
$black            : #000;
$white            : #FFF;
$mine-shaft       : #333;
$pacific-blue     : #09C;
$dawn-pink        : #F0E9df;
$gray             : #888;
$dove-gray        : #666;
$silver-chalice   : #A2A2A2;
$alto             : #DDD;
$boulder          : #767676;
$dusty-gray       : #999;
$gallery          : #EEE;
$persian-red      : #C33;
$elm              : #23767F;
$orange-peel      : #F90;
$regal-blue       : #004369;
$alabaster        : #f8f8f8;
$mercury          : #e1e1e1;

// Channel colour variables should be named after their channel
// Each name is also the class name to be applied
$network-colors: (
  twitter     : #00ACED,
  youtube     : #CD201F,
  pinterest   : #CB2027,
  github      : #333333,
  dribbble    : #EA4C88,
  instagram   : #517FA4,
  facebook    : #3B5999
);

_media.scss

// small

// medium

// large 

_settings.scss

@import 'colors';

// Contexts
$urgent                       : $persian-red;
$exclusive                    : $orange-peel;

// Text
$text-color                   : $mine-shaft;
$text-black                   : #222; // ! $mine-shaft
$text-black2                  : $black;
$text-grey                    : $gray;
$text-dark-grey               : $dove-gray;
$text-white                   : $white;
$inverted-text-color          : $white;

// Backgrounds
$inverted-background-color    : $mine-shaft;
$body-background-color        : $dawn-pink;
$container_background-color   : $white;
$background-black             : #222; // ! $mine-shaft

// Links
$visited-grey                 : $boulder;
$visited-grey-inverse         : $dusty-gray;
$link-color                   : $text-black ;
$link-visited                 : $boulder;
$box-tint                     : $gallery;
$link-alt-color               : $pacific-blue;
$default-accent               : $elm;

// Icons
$icon-grey                    : $silver-chalice;
$line-grey                    : $alto;

// Badge component
$color-badge-hit              : $regal-blue;
$color-badge-miss             : $persian-red;

// Sponsored component
$sponsored-background-color   : $alabaster;
$sponsored-border-color       : $mercury;
$sponsored-font-color         : #6d6d6d; // ! $dove-gray
$sponsored-headline-color     : $mine-shaft;

_typography.scss

// Font stacks
$base-font            : "Austin News Text Roman", Georgia, Times, serif;
$base-font-bold       : "Austin News Text Semibold", Georgia, Times, serif;
$heading-font         : "Austin News Deck Medium", Georgia, Times, serif;
$heading-font-bold    : "Austin News Deck Medium", Georgia, Times, serif;
$meta-font            : "Telesans Text Regular", Arial, sans-serif;
$meta-font-bold       : "";

$type-settings: (
  'zues': (
    'group-a': (
      'font-size': 22px,
      'line-height': 30px,
    ),
    'group-b': (
      'font-size': 26px,
      'line-height': 36px
    ),
    'group-c': (
      'font-size': 38px,
      'line-height': 50px
    ),
    'group-d': (
      'font-size': 32px,
      'line-height': 32px
    )
  ),
  'zeus-bold': (
    ...
  )
);

// Output typography styles
@each $type-class, $type-values in $type-settings {
  .type-#{$type-class},
  %type-#{$type-class} {
    @include gel-typography($type-class);
  }
}

// Mixins

buttons.css

:root {
  /* button design styles */
  --Button--text
  --Button--outlined
  --Button--contained
}