Eang-layout NPM

ngn-layout

Compiles CSS for EANG components using SASS and PostCSS and supports themes. The output is copied into a directory defined by the dir option. By default it creates the following structure.

<dir>
    +-- src
        +-- assets
        |   +-- themes   <-- <destThemesDir>
        |       |-- default.css
        |       |-- <theme1>.css
        |       |-- <theme2>.css
        |       |-- ...
        |-- favicon.ico

Installation

npm install

Requires gulp

npm install -g gulp

Usage

Run with gulp [TASK] [OPTIONS...]

Just running gulp will execute the task you registered called default. If there is no default task gulp will error.

Tasks

Task	Description
default	executes saas, copy and watches for changes
sass	Allows you to import many sass or scss files in a single import statement. Enables PostCSS plugins. Pushes into /dist. defaults to `default`
copy	Copies in the current favicon and style sheet for the selected theme. defaults to `default`

Options

Option	Description
--theme=`[name]`	name of the theme. defaults to `default`
--dir=`[folder name]`	dir to write files to. defaults to `./dist`
--prod	if set, compiles prod output (minified, no sourcemaps, etc.)
--url `[url]`	if set, sends css change event to deploy endpoint
--watch	if set, watches for file changes and re-runs

PostCSS Plugins

Currently used plugins which can be found in gulpfile.js

Fonts

font-magician - Font Magician is a PostCSS plugin that magically generates all of your @font-face rules. Never write a @font-face rule again. Just use the font and font-family properties as if they were magic.
Responsive-Font - Set responsive min/max font-sizes within viewport ranges... Adds a new declaration that requires 4 values.

Grids

lost-grid - LostGrid makes use of calc() to create stunning grids based on fractions you define without having to pass a lot of options.

SVG

SVGo - Optimise inline SVG with PostCSS.
Postcss-inline-svg - plugin to reference an SVG file and control its attributes with CSS syntax.

Enhanced CSS

Cssnano - A modular minifier, built on top of the PostCSS ecosystem.
Css-Next - PostCSS-cssnext is a PostCSS plugin that helps you to use the latest CSS syntax today. It transforms CSS specs into more compatible CSS so you don’t need to wait for browser support.
Rucksack - CSS Superpowers - Rucksack makes CSS development fun again, with features the language should have come with out of the box. It's built on PostCSS, it's modular, it doesn't add any bloat, and it's lightning fast.

Additional plugins can be found at postcss.parts.

Mixins

A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. We use these to create pre-defined layouts that we reuse for components. A good example is the flight-block-row.

@mixin <name of mixin>(<variable>) {}

@mixin flex-block-row() {
//TODO - LostGrid mixin example

}

Components

UAL semantic html breakdown

Flight Search

ual-flight-search

This is the parent element of all the styles specific to this component. The ual-flight-search element is set to display:flex and flex-direction:column to set all of the children elements into a column.

The width is set to 385px and the background set to $UnitedBlue variable.

Two properties: color:white, and font-weight:700 applies to all of the nested elements in this style sheet, so the color of all children p and label elements will be white with a weight of 700.

ual-flight-search {
  ...
}

.form

The search inputs are all located in the form element. The form is set to display:flex and flex-direction:row. The form also has a padding:12px; to push other elements off the edge of the component.

The flex-wrap: wrap property makes it so that elements that overflow the width of the component will be placed on a new line. Without this, elements will overflow over the edge of the componenet. The position:relative is a rule that is used for absolute positioning used at a different portion of the application we revisit.

ual-flight-search {
      form {
         ...
      }
    }

.form-group {

The form-group is the parent class of the input fields for the search. We set the width at width:160px for the .form-group.

We also set the margin at 1rem on both left and bottom to give the different search input fields equal spaceing between each other.

input

The input fields have a width:100%. This forces the input field to stretch to fit the width of it's parent .form-group which is 160px. The fact that we set the input to 100% and no width on the label causes the element to be forced on top of the input since the width of the input takes up all available space.

Flight Block List

ul

As the name suggests, the flight blocks all exist in an unordered list.

li.ual

The li has a class .ual that we use to style the individual rows of the flight results. This has a list-style:none and a set width & height at 880px and 95px respectively.