Merge pull request #11 in BUDC/concorel-frontend from feature/CONCORE…

…L-154-grid-tasks-frontend to develop * commit '4804a101b1704ceb2314828f1e55bcb7cbbd2020': CONCOREL-154: Add fix for IE11 calc bug in shorthand flex attribute Safari flexbox bug fixed Conent width change Grid responsive styles Grid max width & description update QS forms update CONCOREL-154 Concordia Grid
unic · Jan 12, 2017 · b87af02 · b87af02
2 parents 43a0910 + 4804a10
commit b87af02
Show file tree

Hide file tree

Showing 8 changed files with 374 additions and 0 deletions.
diff --git a/source/assets/css/globals/_grid.scss b/source/assets/css/globals/_grid.scss
@@ -0,0 +1,52 @@
+$gridColumns: $gridColumns;
+$gridGutter: $sizeGutter;
+
+@mixin gridCol($size: $gridColumns, $columns: $gridColumns, $gutter: $gridGutter) {
+	box-sizing: border-box;
+	$percentageColumnSize: percentage($size / $columns);
+	@if $gutter != 0 {
+		flex: 1 0;
+		flex-basis: calc(#{$percentageColumnSize} - #{$gutter});
+		max-width: calc(#{$percentageColumnSize} - #{$gutter});
+		margin-left: ($gutter / 2);
+		margin-right: ($gutter / 2);
+	} @else {
+		flex: 1 0 $percentageColumnSize;
+		max-width: $percentageColumnSize;
+	}
+}
+
+@mixin gridColPush($size: $gridColumns, $columns: $gridColumns) {
+	$percentageColumnSize: percentage($size / $columns);
+	margin-left: calc(#{$percentageColumnSize} + #{$gridGutter}/2);
+}
+
+@mixin gridColPull($size: $gridColumns, $columns: $gridColumns) {
+	$percentageColumnSize: percentage($size / $columns);
+	margin-right: calc(#{$percentageColumnSize} + #{$gridGutter}/2);
+}
+
+@mixin gridContainer($gutter: $gridGutter, $nowrap: false, $maxWidth: $gridContentWidth) {
+	overflow-x: hidden;
+	display: flex;
+
+	@if $maxWidth {
+		max-width: $maxWidth;
+	}
+
+	@if $nowrap {
+		@include gridNowrap;
+	} @else {
+		flex-wrap: wrap;
+	}
+
+	@if $gutter != 0 {
+		margin-left: $gutter;
+		margin-right: $gutter;
+	}
+
+}
+
+@mixin gridNowrap() {
+	flex-wrap: nowrap;
+}
diff --git a/source/assets/css/globals/_variables.scss b/source/assets/css/globals/_variables.scss
@@ -15,6 +15,15 @@ $sizeBreakpointSmall: 661px;
 $sizeBreakpointMedium: 1025px;
 $sizeBreakpointLarge: 1281px;
 
+/**
+ * Grid variables
+ */
+
+$gridContentWidth: 1680px;
+$sizeGutterSmall: 20px;
+$sizeGutter: 16px;
+$gridColumns: 12;
+
 /**
  * Font-related
  */

diff --git a/source/assets/css/main.scss b/source/assets/css/main.scss
@@ -1,5 +1,6 @@
 @import "../.tmp/colors";
 @import "globals/variables";
+@import "globals/grid";
 @import "globals/functions";
 @import "globals/mixins";
 @import "globals/mediaqueries";
@@ -29,6 +30,7 @@
 @import "../../modules/accordion/accordion";
 @import "../../modules/introcopy/introcopy";
 @import "../../modules/tabs/tabs";
+@import "../../modules/grid/grid";
 @import "../../modules/checkmarks/checkmarks";
 @import "../../modules/hero/hero";
 @import "../../modules/moduletitle/moduletitle";

diff --git a/source/modules/grid/grid.data.js b/source/modules/grid/grid.data.js
@@ -0,0 +1,17 @@
+'use strict';
+
+var _ = require('lodash'),
+	requireNew = require('require-new'),
+	dataHelper = require('../../../helpers/data.js'),
+	defaultData = requireNew('../../data/default.data.js');
+
+var data = _.merge(defaultData, {
+		meta: {
+			title: 'Grid',
+			className: 'Grid',
+			code: dataHelper.getTemplateCode('grid.hbs'),
+			documentation: dataHelper.getDocumentation('grid.md')
+		}
+	});
+
+module.exports = data;
diff --git a/source/modules/grid/grid.hbs b/source/modules/grid/grid.hbs
@@ -0,0 +1,187 @@
+<div class="grid" data-init="grid">
+
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+
+
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+
+
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+
+
+	<div class="grid__col--4">
+		<div class="column__element">grid__col--4</div>
+	</div>
+	<div class="grid__col--4">
+		<div class="column__element">grid__col--4</div>
+	</div>
+	<div class="grid__col--4">
+		<div class="column__element">grid__col--4</div>
+	</div>
+
+
+	<div class="grid__col--7">
+		<div class="column__element">grid__col--7</div>
+	</div>
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+
+
+	<div class="grid__col--6">
+		<div class="column__element">grid__col--6</div>
+	</div>
+	<div class="grid__col--6">
+		<div class="column__element">grid__col--6</div>
+	</div>
+
+
+	<div class="grid__col--12">
+		<div class="column__element">grid__col--12</div>
+	</div>
+
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+	<div class="grid__col--3 grid__col--pull-3">
+		<div class="column__element">grid__col--3 & grid__col--pull-3</div>
+	</div>
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2 grid__col--push-4">
+		<div class="column__element">grid__col--2 + grid__col--push-4</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+
+
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1 grid__col--pull-2">
+		<div class="column__element">grid__col--1 + grid__col--pull-2</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+	<div class="grid__col--1">
+		<div class="column__element">grid__col--1</div>
+	</div>
+
+
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+	<div class="grid__col--3 grid__col--pull-3">
+		<div class="column__element">grid__col--3 & grid__col--pull-3</div>
+	</div>
+	<div class="grid__col--3">
+		<div class="column__element">grid__col--3</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2 grid__col--push-4">
+		<div class="column__element">grid__col--2 + grid__col--push-4</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+	<div class="grid__col--2">
+		<div class="column__element">grid__col--2</div>
+	</div>
+
+</div>
diff --git a/source/modules/grid/grid.md b/source/modules/grid/grid.md
@@ -0,0 +1,37 @@
+## Description
+
+####Basic grid usage 
+
+To use grid put all columns in .grid class. If this container should not wrap, change your class into .grid--nowrap. 
+
+\While using grid by 'ready' elements like columns and containers you should always use 12-columns grid. To use all grid elements you can: 
+- use columns (.grid__col--[number]),
+- use pulls ()grid__col--pull-[number]) - it means that we will add margin-right to column (so, we should use it together with grid__col),
+- use pushes (grid__col--push-[number]) - it's similar to pull, but instead of margin-right we add margin-left here.
+
+Examples:
+- .grid__col--5 will add item that will take percentage value of [number] divided by all columns (12 by default) minus gutter, 
+- .grid__col--pull-10 will add margin-right that width is equal to 10 columns,
+- .grid__col--push-3 will add margin-left that width is equal to 3 columns.  
+
+All numbers together in one row (.grid--nowrap) should be up to 12. 
+
+#### Custom grid  
+
+To use mixins prepared for grid instead of ready one (to avoid using grid naming etc.) you can use mixins: 
+
+- Apply gridContainer mixin to transform your div into grid-container: 
+
+		@mixin gridContainer($gutter: $gridGutter, $nowrap: false, $maxWidth: none) 
+		
+		- Pass $maxWidth in pixels,
+		- Pass $nowrap as a boolean (if needed),
+		- You can also type just mixin name and don't even use any of above settings. 
+		
+- Apply columns mixin to transform your items into columns 
+
+		@mixin gridCol($size: $gridColumns, $columns: $gridColumns, $gutter: $gridGutter, $font-size: $sizeFontBase) {
+
+		- Pass $size as size of your current column,
+		- Pass $columns as number of all columns,
+		- Pass #font-size if needed 
diff --git a/source/modules/grid/grid.scss b/source/modules/grid/grid.scss
@@ -0,0 +1,54 @@
+@for $i from 1 through $gridColumns {
+
+	.grid__col--#{$i} {
+		@include gridCol($size: $i);
+	}
+
+	.grid__col--push-#{$i} {
+		@include gridColPush($size: $i);
+	}
+
+	.grid__col--pull-#{$i} {
+		@include gridColPull($size: $i);
+	}
+
+}
+
+.grid {
+	@include gridContainer;
+
+	&--nowrap {
+		@include gridNowrap;
+	}
+
+}
+
+@include mq($from: $gridContentWidth) {
+	.grid {
+		margin: 0 auto;
+	}
+}
+
+@include mq($to: $sizeBreakpointSmall) {
+
+	.grid {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	[class*='grid__col-'] {
+		$doubleGutter: 2*$sizeGutterSmall;
+		flex: 1 0 calc(100% - 40px);
+		max-width: calc(100% - #{$doubleGutter});
+		margin: 0 auto;
+	}
+
+	[class*='grid__col--push-'] {
+		margin-left: auto;
+	}
+
+	[class*='grid__col--pull-'] {
+		margin-right: auto;
+	}
+}
+