Text Analytics Template

Boilerplate for a TA report. Prerequisites:

You need to have Git installed
You need to have NodeJS installed

It's going to evolve and be more automatized. Currently the setup involves:

Node.JS
Webpack
Babel for ES6 transpilation
PostCSS with Autoprefixer (for autoprefixing vendors), includes and CSSnext (for css custom-properties etc.) and cssnano (for CSS minification)
JSDoc3 to auto-generate JSDoc documentation for JS that uses JSDoc comment syntax.

Setup

To set this project up on your local machine open Terminal and navigate to the project folder you're going to install it into. Running the following command will clone the contents of this repo into your project folder and download all dependencies.

      git clone https://github.com/ConfirmitASA/TextAnalyticsTemplate-Frontend && cd TextAnalyticsTemplate-Frontend && npm install

Commands

npm install installs all dependencies of the project
npm run build generates build files under /dist folder and starts watching all changes made to the project during this session, appending them to the build files
npm run docs generates documentation for your project .js files that use JSDoc3 comments and publishes it to http://ConfirmitASA.github.io/TextAnalyticsTemplate-Frontend/[version]/ where [version] is the version in your package.json

Customization

In /src folder you'll find:

main.js which must include all imports (via require("path/to/module.js")) of JS modules for your project
main.css which must include all imports (via @import "path/to/module.css";) of CSS modules for your project

Feel free to add or delete modules for your project

All modules are broken into named folders which contains js and css files for those modules as well as any necessary scripts, etc. This pattern allows keeping all module-related files in one place.

Committing

To make changes to this set-up fork, change, commit, and pull-request.

Flexbox Layout System

Overview

The layout provides simple ways to use CSS flexible box layout, also known as flexbox (compatibility: IE10+). It provides two different ways to use flexbox:

Layout classes. The layout class stylesheet provides a simple set of class-based flexbox rules. Layout classes let you specify layout properties directly in markup.
Custom CSS mixins. The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the @apply function.

Using the classes or CSS mixins is largely a matter of preference. The following sections discuss how to use the each of the stylesheets.

Note: Before using either of these stylesheets, it's helpful to be familiar with the basics of flexbox layout. Chris Coyier's [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is a good primer.

Using layout classes

To use layout classes import the necessary module files from the layout folder to the /main.css file.

@import "layout/flex.css";
@import "layout/flex-reverse.css";
@import "layout/flex-alignment.css";
@import "layout/flex-factors.css";
@import "layout/positioning.css";

To use layout mixins import the layout/layout-mixins.css file to the /main.css file.

@import "layout/layout-mixins.css";

Then simply apply the classes to any element.

<div class="layout horizontal wrap">

Many of the layout rules involve combinations of multiple classes (such as layout horizontal wrap above), and will need a combination of modules. The order in which the classes are specified doesn't matter, so layout horizontal and horizontal layout are equivalent.

There are 5 modules available:

flex. Basic flex layouts.
flex-reverse. Reverse flexbox layouts.
flex-alignment. Main axis, cross axis and self alignment.
flex-factors. All the available flex factors.
positioning. Generic, non-flexbox positioning helpers.

Example: using classes in the main document

<head>

  ...

  <link rel="stylesheet" href="styles.css">

  ...

</head>
<body>

  <div class="layout horizontal">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
  </div>

</body>

Using layout mixins

Custom mixins can be applied inside any element's style.

Example: using mixins in the main document

  <!-- element's styles.css file -- apply mixins to an element -->
   
     .container {
       @apply --layout-horizontal;
       @apply --layout-wrap;
     }
  

<head>

  ...

  <link rel="stylesheet" href="styles.css">

  ...

</head>
<body>

  <div class="container">
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
  </div>

</body>

In general the mixins require a little more code to use, but they can be preferable if you don't want to use the classes, or if you want to switch layouts based on a media query.

Horizontal and vertical layout

Create a flex container that lays out its children vertically or horizontally.

Class	Mixin	Result
`layout horizontal`	`--layout-horizontal`	Horizontal layout container.
`layout vertical`	`--layout-vertical`	Vertical layout container.

The classes listed here are included in the flex module of classes files in the layout folder.

Example: classes

<div class="layout horizontal">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

Example: mixins

 <!--css file-->
 
    .container {
      @apply --layout-horizontal;
    }
    
 <!--end of css file-->

 <!--html file -->

    <div class="container">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
    </div>

    ...

Example output

One

Two

Three

Flexible children

Children of a flex container can use flex to control their own sizing.

Class	Mixin	Result
`flex`	`--layout-flex`	Expand the child to fill available space in the main axis.
`flex-ratio`	`--layout-flex-ratio`	Assign a flex ratio of 1 to 12.
`flex-none`	`--layout-flex-none`	Don't flex the child.
`flex-auto`	`--layout-flex-auto`	Sets flex `flex-basis` to `auto` and `flex-grow` and `flex-shrink` to 1.

The classes listed here are included in the flex module of classes files in the layout folder.

Example: classes

    <div class="horizontal layout">
      <div>Alpha</div>
      <div class="flex">Beta (flex)</div>
      <div>Gamma</div>
    </div>

Example: mixins

<!--css file-->
    .container {
      @apply --layout-horizontal;
    }
    .flexchild {
      @apply --layout-flex;
    }
<!--end of css file-->
  
<!--html file -->

    <div class="container">
      <div>One</div>
      <div class="flexchild">Two</div>
      <div>Three</div>
    </div>

    ...

Example output

Alpha

Beta (flex)

Gamma

Flexible children in vertical layouts

The same rules can be used for children in vertical layouts.

Example: classes

<div class="vertical layout" style="height:250px">
  <div>Alpha</div>
  <div class="flex">Beta (flex)</div>
  <div>Gamma</div>
</div>

Example: mixins

<!--css file-->
      
    .container {
      @apply --layout-vertical;
    }
    .flexchild {
      @apply --layout-flex;
    }
    
<!--end of css file-->

<!--html file -->

    <div class="container">
      <div>One</div>
      <div class="flexchild">Two</div>
      <div>Three</div>
    </div>

    ...

Example output

Alpha

Beta (flex)

Gamma

Note: for vertical layouts, the container needs to have a height for the children to flex correctly.

Flex ratios

Children elements can be told to take up more space by including a "flex ratio" from 1 to 12. This is equivalent to specifying the CSS flex-grow property.

For example, the following examples make "Gamma" 2x larger than "Beta" and "Alpha" 3x larger, use flex-2 and flex-3, respectively.

The classes listed here are included in the flex-factors module of classes files in the layout folder.

Example: classes

    <div class="horizontal layout demo">
      <div class="flex-3">Alpha</div>
      <div class="flex">Beta</div>
      <div class="flex-2">Gamma</div>
    </div>

Example: mixins

  <!--css file-->

    .container {
      @apply --layout-horizontal;
    }
    .flexchild {
      @apply --layout-flex;
    }
    .flex2child {
      @apply --layout-flex-2;
    }
    .flex3child {
      @apply --layout-flex-3;
    }
    
<!--end of css file-->

<!--html file -->

    <div class="container">
      <div class="flex3child">One</div>
      <div class="flexchild">Two</div>
      <div class="flex2child">Three</div>
    </div>

    ...

Example output

Alpha

Beta

Gamma

Cross-axis alignment

By default, children stretch to fit the cross-axis (e.g. vertical stretching in a horizontal layout).

<div class="horizontal layout">
  <div>Stretch Fill</div>
</div>

Stretch Fill

Center across the main axis (e.g. vertical centering elements in a horizontal layout) by adding the center class or applying the --layout-center mixin.

Example: classes, cross-axis center

<div class="horizontal layout center">
  <div>Center</div>
</div>

Example: mixins, cross-axis center

 <!--css file-->

    .container {
      @apply --layout-horizontal;
      @apply --layout-center;
    }
    
<!--end of css file-->

<!--html file -->

    <div class="container">
      <div>Center</div>
    </div>

    ...

Example output, cross-axis center

Center

You can also position at the top/bottom (or left/right in vertical layouts) using the start or end classes, or by applying the --layout-start or --layout-end mixins.

Example: classes, cross-axis start

<div class="horizontal layout start">
  <div>start</div>
</div>

Example: mixins, cross-axis start

<!--css file-->

    .container {
      @apply --layout-horizontal;
      @apply --layout-start;
    }
 <!--end of css file-->

 <!--html file -->

    <div class="container">
      <div>start</div>
    </div>

    ...

Example output, cross-axis start

start

Example: classes, cross-axis end

<div class="horizontal layout end">
  <div>end</div>
</div>

Example: mixins, cross-axis end

 <!--css file-->
 
    .container {
      @apply --layout-horizontal;
      @apply --layout-end;
    }
    
<!--end of css file-->

<!--html file -->

    <div class="container">
      <div>end</div>
    </div>

    ...

Example output, cross-axis end

end

Justification

Justifying aligns contents along the main axis. Justify the layout by specifying one of the following.

Class	Mixin	Result
`start-justified`	`--layout-start-justified`	Aligns contents at the start of the main axis.
`center-justified`	`--layout-center-justified`	Centers contents along the main axis.
`end-justified`	`--layout-end-justified`	Aligns contents to the end of the main axis.
`justified`	`--layout-justified`	Aligns contents with equal spaces between children.
`around-justified`	`--layout-around-justified`	Aligns contents with equal spaces arround children.

The classes listed here are included in the flex-alignment module of classes files in the layout folder.

Example: classes, start justified

<div class="horizontal start-justified layout">
  <div>start-justified</div>
</div>

Example output, start justified

start-justified

Example: mixins, center justified

<!--css file-->
 
    .container {
      @apply --layout-horizontal;
      @apply --layout-center-justified;
    }
    
<!--end of css file-->

<!--html file -->

    <div class="container">
      <div>center-justified</div>
    </div>

    ...

Example output, center justified

center-justified

Example: classes, end justified

<div class="horizontal end-justified layout">
  <div>end-justified</div>
</div>

Example output, end justified

end-justified

Example: mixins, equal space between elements

<!--css file-->
 
    .container {
      @apply --layout-horizontal;
      @apply --layout-justified;
    }
    
<!--end of css file-->

<!--html file -->

    <div class="container">
      <div>justified</div>
      <div>justified</div>
      <div>justified</div>
    </div>

    ...

Example output, equal space between elements

justified

Example: classes, equal space around each element

<div class="horizontal around-justified layout">
  <div>around-justified</div>
  <div>around-justified</div>
</div>

around-justified

Self alignment

Alignment can also be set per-child (instead of using the layout container's rules).

Class	Mixin	Result
`self-start`	`--layout-self-start`	Aligns the child at the start of the cross-axis.
`self-center`	`--layout-self-center`	Centers the child along the cross-axis.
`self-end`	`--layout-self-end`	Aligns the child at the end of the cross-axis.
`self-stretch`	`--layout-self-stretch`	Stretches the child to fit the cross-axis.

Example: classes

<div class="horizontal layout" style="height: 120px;">
  <div class="flex self-start">Alpha</div>
  <div class="flex self-center">Beta</div>
  <div class="flex self-end">Gamma</div>
  <div class="flex self-stretch">Delta</div>
</div>

Example: mixins

<!--css file-->
 
    .container {
      @apply --layout-horizontal;
      @apply --layout-justified;
      height: 120px;
    }
    .container div {
      @apply --layout-flex;
    }
    .child1 {
      @apply --layout-self-start;
    }
    .child2 {
      @apply --layout-self-center;
    }
    .child3 {
      @apply --layout-self-end;
    }
    .child4 {
      @apply --layout-self-stretch;
    }
    
<!--end of css file-->

<!--html file -->

    <div class="container">
      <div class="child1">Alpha</div>
      <div class="child2">Beta</div>
      <div class="child3">Gamma</div>
      <div class="child4">Delta</div>
    </div>

    ...

Example output

Alpha

Beta

Gamma

Delta

Note: The flex class (and --layout-flex mixin) shown in these examples is added for the demo and not required for self-alignment.

Wrapping

Wrapped layouts can be enabled with the wrap class or --layout-wrap mixin.

Example: classes

<div class="horizontal layout wrap" style="width: 220px">
  <div>Alpha</div>
  <div>Beta</div>
  <div>Gamma</div>
  <div>Delta</div>
</div>

Example output

Alpha

Beta

Gamma

Delta

Reversed layouts

Layout direction can be mirrored using the following rules:

Class	Mixin	Result
`layout horizontal-reverse`	`--layout-horizontal-reverse`	Horizontal layout with children laid out in reverse order (last-to-first).
`layout vertical-reverse`	`--layout-vertical-reverse`	Vertical layout with children laid out in reverse order.
`layout wrap-reverse`	`--layout-wrap-reverse`	Wrap layout with wrapped rows placed in the reverse order (for example, in a vertical layout, the second row is placed above the first row, instead of below).

The classes listed here are included in the flex-reverse module of classes files in the layout folder.

Example: mixins

<!--css file-->

    .container {
      @apply --layout-horizontal-reverse;
    }
    
<!--end of css file-->

<!--html file -->

    <div class="container">
      <div>Alpha</div>
      <div>Beta</div>
      <div>Gamma</div>
      <div>Delta</div>
    </div>

    ...

Example output

Alpha

Beta

Gamma

Delta

Full bleed <body>

It's common to want the entire <body> to fit to the viewport. By themselves, Polymer's layout features on <body> don't achieve the result. You can make <body> take up the entire viewport by adding the fullbleed class:

<body class="fullbleed vertical layout">
  <div class="flex">Fitting a fullbleed body.</div>
</body>

This removes its margins and maximizes its height to the viewport. There is no equivalent mixin, but the same result can be achieved in CSS very simply:

body {
  margin: 0;
  height: 100vh;
}

This class is included in the positioning module of classes files in the layout folder.

Note that the fullbleed class only works on the <body> tag. This is the only rule in the stylesheet that is scoped to a particular tag.

General purpose rules

This layouting system includes other general purpose rules for basic positioning:

Class	Mixin	Result
`block`	`--layout-block`	Assigns `display: block`
`invisible`	`--layout-invisible`	Assigns `visibility: hidden`
`relative`	`--layout-relative`	Assigns `position: relative`
`fit`	`--layout-fit`	Sets `position: absolute` and sets `top:0;right:0;bottom:0;left:0;` (aka "trbl fitting").

The classes listed here are included in the positioning module of classes files in the layout folder.

Note:When using `fit` layout, the element must have an ancestor with fixed size and `position: relative` layout to fit inside of.

Example: classes

<div>Before <span>[A Span]</span> After</div>

<div>Before <span class="block">[A Block Span]</span> After</div>
<div>Before invisible span <span class="invisible">Not displayed</span> After invisible span</div>
<div class="relative" style="height: 100px;">
  <div class="fit" style="background-color: #000;color: white">Fit</div>
</div>

Example output

Before [A Span] After

Before [A Block Span] After

Before invisible span Not displayed After invisible span

Fit

Name		Name	Last commit message	Last commit date
Latest commit History 160 Commits
.idea		.idea
docs/text-analytics-template/0.2.1		docs/text-analytics-template/0.2.1
src		src
.babelrc		.babelrc
.editorconfig		.editorconfig
.gitignore		.gitignore
README.md		README.md
jsdoc.conf		jsdoc.conf
npm-debug.log		npm-debug.log
package.json		package.json
webpack.config.js		webpack.config.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Repository files navigation

Text Analytics Template

Setup

Commands

Customization

Committing

Flexbox Layout System

Overview

Using layout classes

Using layout mixins

Horizontal and vertical layout

Flexible children

Flexible children in vertical layouts

Flex ratios

Cross-axis alignment

Justification

Self alignment

Wrapping

Reversed layouts

Full bleed <body>

General purpose rules

About

Uh oh!

Releases

Packages

Languages

annyrtd/TextAnalyticsTemplate-Frontend

Folders and files

Latest commit

History

Repository files navigation

Text Analytics Template

Setup

Commands

Customization

Committing

Flexbox Layout System

Overview

Using layout classes

Using layout mixins

Horizontal and vertical layout

Flexible children

Flexible children in vertical layouts

Flex ratios

Cross-axis alignment

Justification

Self alignment

Wrapping

Reversed layouts

Full bleed <body>

General purpose rules

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages