MUSTACHE and FLEXBOX

What is Mustache?

Mustache is a simple template system that you can use when building websites and web apps. By using a template system, you can keep your back-end code separate from the markup that displays the front end to the user. This clean separation gives you many advantages. For example, it makes it easy for a designer to work on a website’s visual design without the risk of messing up the site’s code. It also makes it easy for you to change the design at a later point without impacting the back-end code.

Templating with Mustache

• JavaScript templating is a fast and efficient technique to render client-side view templates with JavaScript using a JSON data source
• Template is HTML markup, with added templating tags that will insert variablesor run programming logic
• Template engine then replaces variables and instances declared in a template file with actual values at runtime, and convert the template into an HTML file sent to the client
• Moustache: a logic-less template syntax, works by expanding tags in a templateusing values provided in a hash or object- Logic-less because there are no if statements, else clauses, or for loops, instead there are only tags
• mustache.js is implementation of the mustache template system in JavaScript
• Mustace is not a templating engine, but a specification for a templating language
• If you use mustache with Node and Express, you can use mustache-express

<h4>Product Info: </h4>

<ul>
  <li>Product: </li>
  <li>Colour: </li>
  <li>Price: $</li>
</ul>

Flexbox

Flexbox is a single dimensional layout, which means that it lays items in one dimension at a time, either as a row, or as a column, but not both together. This can be opposed to the two-dimensional model - CSS Grid Layout, which lays the items in two dimensions simultaneously (rows and columns together).

• Parent element (flex container)

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

• Child element (flex items)

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

Features of Flexbox

Following are the notable features of Flexbox layout −

• Direction − You can arrange the items on a web page in any direction such as left to right, right to left, top to bottom, and bottom to top.

• Order − Using Flexbox, you can rearrange the order of the contents of a web page.

• Wrap − In case of inconsistent space for the contents of a web page (in single line), you can wrap them to multiple lines (both horizontally) and vertically.

• Alignment − Using Flexbox, you can align the contents of the webpage with respect to their container.

• Resize − Using Flexbox, you can increase or decrease the size of the items in the page to fit in available space.

Supporting browsers

Following are the browsers that support Flexbox.

Chrome 29+

Firefox 28+

Internet Explorer 11+

Opera 17+

Safari 6.1+

Android 4.4+

iOS 7.1+