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.

ual-flight-block-row

The component renders as ual-flight-block-row which has the following properties:

display: flex to have all children element display flex.

font-size: 12px - to set all the children text elements at this font size.

position:relative - which allows for children elemtns positions absolutly to have a references.

height: 100% to fill the height of the parent li element.