reading-notes

Flexbox and Templating

Mustache

Source: Javascript Templating Language and Engine— Mustache.js with Node and Express Reference: Mustache.js documentation

Templating: fast/efficinet way to render client templates with a JSON data source.

• Template is HTML markup with template tags that will insert variable or run logic.
• Template english replaed variables in a template file in runtime
• Converts the template into HTML file used by the alient

Mustache Overview

• Logic-less template syntax
• Used for HTML, config, source code, anything
• Just tags
• mustache.js for javascript, not additional server side template system needed

Mustache.render("Hello, ", {name: "Logan"});
//returns: Hello, Logan

• `` is the placeholder
• mustache will look for the ‘name’ property in the object passed in

Mustache-express

• Easyily lets you use Mustache and Express
• Install w/ NPM $ npm install mustache --save
• Configure in server.js/app.js/index.js file

var mustacheExpress = require('mustache-express');

// Register '.mustache' extension w/ The Mustache Express
app.engine('html', mustacheExpress());

app.set('view engine', 'html');
app.set('views', _dirname + '/src/views');

• Then, create /views folder and add html view templates

- /views
-- book.html
-- hello.html
-- index.html

In hello.html:

<div class="container mt-5 mb-5 p-5" style='background-color: white; opacity: 0.9'>
    <h1>Hello </h1>
</div>

• Then, in router config use res.render(TEMPLATE_NAME, JSON_DATA)
  • res.render('hello', name)
  • hello refers to hello.html
  • second param is the JSON data
  • can also pass in variable representing the JSON

  var nameObject = {"name": "Logan"}
  res.renger('hello', nameObject)
  

Flexbox

Source: A Complete Guide to Flexbox

Gives container ability to alter its items’ width/size and order to fill avaliable space.

Flexbox Overview

• Flex is best for components of application or small scale layout
• Grid is best for larger scale layouts
• Whole module with properties for:
  • Parent container (“flex container”)
  • Children (“flex items”)
• Based on “flex-flow directions” versus block/inline

Terminology

• main-axis primary axis (horizonal, but depends on flex-direction)
• main-start & main-end where the items start/end (like margin)
• main-size flex items width or height control main’s size (height if main-axis is horizonal)
• cross-axis Perpendicular axis to main
• cross-start & cross-end where item start/end on cross-axis
• cross-size flex items width or height control cross-size (width if cross-axis is vertical)

Flex Container Properties

• display defines a flex container

  .container {
      display: flex; /* or infline-flex */
  }
  

• flex-direction establishes main axis

  .container {
      flex-direction: row | row-reverse | column | column-reverse;
  }
  

• flex-wrap allows items to move to new line as needed

  .container {
      flex-wrap: nowrap | wrap | wrap-reverse; /*reverse goes bottom to top*/
  }
  

• flex-flow shorthand for both flex-direction and flex-wrap

.container {
  flex-flow: column wrap;
}

• justify-content defines alignment along main-axis
  • flex-start default, items packed at start
  • flex-end packed toward end
  • center centered
  • space-between spaced evenly (no side margin)
  • spae-around evenly space with small side margin
  • space-evenlyequal spacing all around

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}

• align-items defines alignment along cross-axis
  • flex-start
  • flex-end
  • center
  • stretch
  • baseline

.container {
  align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

• align-content
  • flex-start
  • flex-end
  • center
  • stretch
  • space-between
  • space-around

  .container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

Flex Item Properties

• order can set number to define order

.item {
  order: 5; /* default is 0 */
}

• flex-grow ability for item to grow if necessary. Amount is proportional. (e.g. if all 1, they take up 1/x).

.item {
  flex-grow: 4; /* default 0 */
}

• flex-shrink ability to shrink if necessary

.item {
  flex-shrink: 3; /* default 1 */
}

• flex-basis size of item before remaining space distributed (20% / 5rem/ etc)

.item {
  flex-basis:  | auto; /* default auto */
}

• flex shorthandn for flex-grow / flex-shrink / flex-basis recommended
  • flex-shrink and flex-basis are optional
  • default is 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

• align-self change alignment for single item

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Example

Centering

.parent {
  display: flex;
  height: 300px; /* Or whatever */
}

.child {
  width: 100px;  /* Or whatever */
  height: 100px; /* Or whatever */
  margin: auto;  /* Magic! */
}

Back