🚀 Socket Launch Week Day 5:Introducing Repository Access Permissions and Custom Roles.Learn more →
Sign In

@gridonic/grid

Package Overview
Dependencies
Maintainers
2
Versions
5
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@gridonic/grid - npm Package Compare versions

Comparing version
0.4.0
 to
0.5.0
+4
_functions.scss
@import "functions/grid-column-width";
@import "functions/grid-configuration-at";
@import "functions/grid-gutter-width";
@import "functions/grid-outer-margin";
+3
_mixins.scss
@import "mixins/grid-breakpoint";
@import "mixins/grid-gutter-width";
@import "mixins/grid-outer-margin";
+33
_variables.scss
// Set the number of columns you want to use in your layout.
$grid-columns: 12 !default;
// Set the gutter size between columns. You may provide a list of
// values for each breakpoint.
//
// If there are more breakpoints than values in your list, the last
// value will be used for all remaining breakpoints.
$grid-gutter-width: 30px !default;
// Set a margin for the container sides. This may also be a list of
// values. See gutter width for explanation.
$grid-outer-margin: 15px !default;
// Set the breakpoints for the grid. You should always provide at
// least one breakpoint without a resolution. This one will be used for
// naming of the initial classes.
$grid-breakpoints: (
xs: null,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
// Set the maximum width for the container. There is a class
// modifier available to disable the maximum width in case you don’t
// need it. See the official documentation for details.
$grid-max-width: 1440px !default;
// Set the prefix for all grid related classes. Use this in case you
// have conflicting class names.
$grid-classes-prefix: "grid-" !default;
+4
functions/_grid-column-width.scss
/// Returns the total width for a given column.
@function grid-column-width($i) {
@return 100% / $grid-columns * $i;
}
+28
functions/_grid-configuration-at.scss
/// Some of the grid configurations can be sets of values for responsive
/// reasons. Therefore we need a function that returns either the appropriate
/// value at a given breakpoint, or the same value for every call.
///
/// @author Gridonic
/// @param {String} $breakpoint - Breakpoint to get value for.
/// @param {List|Number} $option - Option to look for specific value.
/// @param {Map} $breakpoints - Map of available breakpoints.
/// @return {Number|null}
@function grid-configuration-at($breakpoint, $option, $breakpoints) {
// The given option is not a list or map, return it.
@if index(list map, type-of($option)) == null {
@return $option;
}
// Try to get the index of the requested breakpoint within the breakpoints map.
$index: index(map-keys($grid-breakpoints), $breakpoint);
// No breakpoint found.
@if $index == null {
@return nth($option, 1);
}
// If index is still within the range of the outer margin list,
// return the requested value, otherwise null.
@return if($index <= length($option), nth($option, $index), null);
}
+8
functions/_grid-gutter-width.scss
/// Returns the appropriate gutter width for a given or not given breakpoint.
@function grid-gutter-width($name: null) {
@return grid-configuration-at(
$name,
$grid-gutter-width,
$grid-breakpoints
);
}
+8
functions/_grid-outer-margin.scss
/// Returns the appropriate outer margin for a given or not given breakpoint.
@function grid-outer-margin($name: null) {
@return grid-configuration-at(
$name,
$grid-outer-margin,
$grid-breakpoints
);
}
+48
mixins/_grid-breakpoint.scss
@mixin grid-breakpoint($name, $size) {
.#{$grid-classes-prefix}container {
@include grid-outer-margin($name);
@if $size {
&.-#{$name}-fix {
width: $size;
}
}
}
.#{$grid-classes-prefix}row {
@include grid-gutter-width($name);
&.-#{$name} {
&-start, &-left { justify-content: flex-start; }
&-center { justify-content: center; }
&-end, &-right { justify-content: flex-end; }
&-top { align-items: flex-start; }
&-middle { align-items: center; }
&-bottom { align-items: flex-end; }
&-around { justify-content: space-around; }
&-between { justify-content: space-between; }
}
> .column.-#{$name} {
flex: 1 0 0;
&-first { order: -1; }
&-last { order: 1; }
@for $i from 1 through $grid-columns {
$width: grid-column-width($i);
&-#{$i} {
flex-basis: $width;
max-width: $width;
}
}
@for $i from 0 to $grid-columns {
&-offset-#{$i} {
margin-left: grid-column-width($i);
}
}
}
}
}
+20
mixins/_grid-gutter-width.scss
@mixin grid-gutter-width($name: null) {
$gutter-width: grid-gutter-width($name);
$is-gutter-width-responsive: type-of($grid-gutter-width) != "number";
$is-always: $name == null and $is-gutter-width-responsive == false;
$is-responsive: $name and $is-gutter-width-responsive == true;
@if ($is-always or $is-responsive) and $gutter-width {
$half-gutter-width: $gutter-width / 2;
$gutter-compensation: $half-gutter-width * -1;
margin-left: $gutter-compensation;
margin-right: $gutter-compensation;
> .column {
padding-left: $half-gutter-width;
padding-right: $half-gutter-width;
}
}
}
+12
mixins/_grid-outer-margin.scss
@mixin grid-outer-margin($name: null) {
$outer-margin: grid-outer-margin($name);
$is-outer-margin-responsive: type-of($grid-outer-margin) != "number";
$is-always: $name == null and $is-outer-margin-responsive == false;
$is-responsive: $name and $is-outer-margin-responsive == true;
@if ($is-always or $is-responsive) and $outer-margin {
padding-left: $outer-margin;
padding-right: $outer-margin;
}
}
+247
-113
.idea/workspace.xml

@@ -5,3 +5,3 @@ <?xml version="1.0" encoding="UTF-8"?>

<list default="true" id="277b9ba5-f655-4f82-b8e3-33955bdb9ceb" name="Default" comment="">
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/README.md" afterPath="$PROJECT_DIR$/README.md" />
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/CHANGELOG.md" afterPath="$PROJECT_DIR$/CHANGELOG.md" />
</list>

@@ -16,8 +16,8 @@ <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />

<component name="FileEditorManager">
<leaf>
<file leaf-file-name="_grid-breakpoint.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/_grid-breakpoint.scss">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file leaf-file-name="_functions.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/_functions.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="216">
<caret line="12" column="35" lean-forward="false" selection-start-line="12" selection-start-column="35" selection-end-line="12" selection-end-column="35" />
<state relative-caret-position="0">
<caret line="4" column="0" lean-forward="false" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />

@@ -28,35 +28,7 @@ </state>

</file>
<file leaf-file-name="CHANGELOG.md" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/CHANGELOG.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="FIRST">
<first_editor relative-caret-position="126">
<caret line="7" column="40" lean-forward="true" selection-start-line="7" selection-start-column="0" selection-end-line="7" selection-end-column="40" />
<folding />
</first_editor>
<second_editor />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="README.md" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="FIRST">
<first_editor relative-caret-position="180">
<caret line="10" column="35" lean-forward="false" selection-start-line="10" selection-start-column="35" selection-end-line="10" selection-end-column="35" />
<folding>
<marker date="1531740933544" expanded="true" signature="1770:1847" ph="(...)" />
</folding>
</first_editor>
<second_editor />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="_grid-gutter-width.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/_grid-gutter-width.scss">
<file leaf-file-name="_grid-configuration-at.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/functions/_grid-configuration-at.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360">
<caret line="20" column="0" lean-forward="true" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
<state relative-caret-position="486">
<caret line="27" column="1" lean-forward="false" selection-start-line="27" selection-start-column="1" selection-end-line="27" selection-end-column="1" />
<folding />

@@ -67,7 +39,7 @@ </state>

</file>
<file leaf-file-name="_grid-outer-margin.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/_grid-outer-margin.scss">
<file leaf-file-name="_grid-column-width.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/functions/_grid-column-width.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="72">
<caret line="4" column="61" lean-forward="true" selection-start-line="4" selection-start-column="61" selection-end-line="4" selection-end-column="61" />
<caret line="4" column="0" lean-forward="true" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />

@@ -78,8 +50,11 @@ </state>

</file>
<file leaf-file-name="_functions.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/_functions.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="414">
<caret line="23" column="0" lean-forward="false" selection-start-line="23" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
<folding />
<file leaf-file-name="CHANGELOG.md" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/CHANGELOG.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="FIRST">
<first_editor relative-caret-position="123">
<caret line="13" column="70" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="75" selection-end-column="0" />
<folding />
</first_editor>
<second_editor />
</state>

@@ -100,2 +75,3 @@ </provider>

<find>'</find>
<find>0.4.0</find>
</findStrings>

@@ -123,6 +99,4 @@ </component>

<option value="$PROJECT_DIR$/src/_column-width.scss" />
<option value="$PROJECT_DIR$/package.json" />
<option value="$PROJECT_DIR$/src/_outer-margin.scss" />
<option value="$PROJECT_DIR$/src/_grid-breakpoint.scss" />
<option value="$PROJECT_DIR$/grid.scss" />
<option value="$PROJECT_DIR$/src/_grid-outer-margin.scss" />

@@ -132,4 +106,14 @@ <option value="$PROJECT_DIR$/src/_functions.scss" />

<option value="$PROJECT_DIR$/src/_variables.scss" />
<option value="$PROJECT_DIR$/README.md" />
<option value="$PROJECT_DIR$/src/functions/_grid-configuration-at.scss" />
<option value="$PROJECT_DIR$/src/functions/_grid-column-width.scss" />
<option value="$PROJECT_DIR$/src/functions/_grid-outer-margin-width.scss" />
<option value="$PROJECT_DIR$/src/functions/_grid-outer-margin.scss" />
<option value="$PROJECT_DIR$/src/functions/_grid-gutter-width.scss" />
<option value="$PROJECT_DIR$/package.json" />
<option value="$PROJECT_DIR$/_mixins.scss" />
<option value="$PROJECT_DIR$/_functions.scss" />
<option value="$PROJECT_DIR$/package-lock.json" />
<option value="$PROJECT_DIR$/grid.scss" />
<option value="$PROJECT_DIR$/CHANGELOG.md" />
<option value="$PROJECT_DIR$/README.md" />
</list>

@@ -148,7 +132,7 @@ </option>

<component name="PhpWorkspaceProjectConfiguration" backward_compatibility_performed="true" />
<component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="1440" />
<component name="ProjectFrameBounds">
<option name="x" value="2560" />
<option name="y" value="23" />
<option name="width" value="1440" />
<option name="height" value="877" />
<option name="width" value="2560" />
<option name="height" value="1417" />
</component>

@@ -170,3 +154,2 @@ <component name="ProjectView">

<panes>
<pane id="AndroidView" />
<pane id="ProjectPane">

@@ -182,3 +165,3 @@ <subPane>

<item name="grid" type="462c0819:PsiDirectoryNode" />
<item name="dist" type="462c0819:PsiDirectoryNode" />
<item name="functions" type="462c0819:PsiDirectoryNode" />
</path>

@@ -188,3 +171,3 @@ <path>

<item name="grid" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
<item name="mixins" type="462c0819:PsiDirectoryNode" />
</path>

@@ -195,5 +178,6 @@ </expand>

</pane>
<pane id="PackagesPane" />
<pane id="Scratches" />
<pane id="Scope" />
<pane id="PackagesPane" />
<pane id="AndroidView" />
</panes>

@@ -212,3 +196,8 @@ </component>

<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$" />
<recent name="$PROJECT_DIR$/src/mixins" />
</key>
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$" />
<recent name="$PROJECT_DIR$/src" />

@@ -327,3 +316,6 @@ </key>

<workItem from="1531209337836" duration="5745000" />
<workItem from="1531231056344" duration="17820000" />
<workItem from="1531231056344" duration="18421000" />
<workItem from="1533645700992" duration="779000" />
<workItem from="1535378469970" duration="31000" />
<workItem from="1535459337818" duration="1021000" />
</task>

@@ -333,6 +325,6 @@ <servers />

<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="34929000" />
<option name="totallyTimeSpent" value="37361000" />
</component>
<component name="ToolWindowManager">
<frame x="1440" y="-517" width="2560" height="1417" extended-state="6" />
<frame x="2560" y="23" width="2560" height="1417" extended-state="6" />
<editor active="true" />

@@ -352,3 +344,3 @@ <layout>

<window_info id="Designer" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.13860206" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.21366164" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="Database" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />

@@ -364,6 +356,37 @@ <window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />

<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="TypeScript" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="npm" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="true" content_ui="tabs" />
<window_info id="Grunt " active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
</layout>
<layout-to-restore>
<window_info id="Palette" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Message" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Commander" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="0" side_tool="false" content_ui="tabs" />
<window_info id="Event Log" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="true" content_ui="tabs" />
<window_info id="Maven Projects" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Capture Tool" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Designer" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="Hierarchy" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="2" side_tool="false" content_ui="combo" />
<window_info id="Database" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Ant Build" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="UI Designer" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Palette&#9;" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
<window_info id="Image Layers" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="Capture Analysis" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
<window_info id="Inspection" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="5" side_tool="false" content_ui="tabs" />
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="9" side_tool="false" content_ui="tabs" />
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.19241774" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
<window_info id="Find" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
<window_info id="Theme Preview" active="false" anchor="right" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="8" side_tool="false" content_ui="tabs" />
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="true" content_ui="tabs" />
</layout-to-restore>
</component>

@@ -381,2 +404,78 @@ <component name="TypeScriptGeneratedFilesManager">

<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/_functions.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="72">
<caret line="4" column="0" lean-forward="true" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/functions/_grid-configuration-at.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="486">
<caret line="27" column="1" lean-forward="false" selection-start-line="27" selection-start-column="1" selection-end-line="27" selection-end-column="1" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/functions/_grid-column-width.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="72">
<caret line="4" column="0" lean-forward="true" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_grid-breakpoint.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="216">
<caret line="12" column="35" lean-forward="false" selection-start-line="12" selection-start-column="35" selection-end-line="12" selection-end-column="35" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/CHANGELOG.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="FIRST">
<first_editor relative-caret-position="126">
<caret line="7" column="40" lean-forward="true" selection-start-line="7" selection-start-column="0" selection-end-line="7" selection-end-column="40" />
</first_editor>
<second_editor />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_grid-gutter-width.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360">
<caret line="20" column="0" lean-forward="true" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_grid-outer-margin.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="72">
<caret line="4" column="61" lean-forward="true" selection-start-line="4" selection-start-column="61" selection-end-line="4" selection-end-column="61" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/_functions.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="414">
<caret line="23" column="0" lean-forward="false" selection-start-line="23" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="FIRST">
<first_editor relative-caret-position="270">
<caret line="15" column="0" lean-forward="true" selection-start-line="15" selection-start-column="0" selection-end-line="15" selection-end-column="0" />
</first_editor>
<second_editor />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/grid.scss">

@@ -435,13 +534,21 @@ <provider selected="true" editor-type-id="text-editor">

</entry>
<entry file="file://$PROJECT_DIR$/package-lock.json">
<entry file="jar://$APPLICATION_HOME_DIR$/plugins/sass/lib/sass.jar!/org/jetbrains/plugins/sass/stdlib/sass_functions.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="72">
<caret line="4" column="19" lean-forward="true" selection-start-line="4" selection-start-column="19" selection-end-line="4" selection-end-column="19" />
<state relative-caret-position="197">
<caret line="958" column="26" lean-forward="false" selection-start-line="958" selection-start-column="26" selection-end-line="958" selection-end-column="26" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/postcss.config.js">
<entry file="file://$PROJECT_DIR$/dist/grid.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="162">
<caret line="9" column="0" lean-forward="true" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
<state relative-caret-position="-56">
<caret line="0" column="44" lean-forward="false" selection-start-line="0" selection-start-column="44" selection-end-line="0" selection-end-column="44" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/_gutter-width.scss" />
<entry file="file://$PROJECT_DIR$/functions/_grid-gutter-width.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="54">
<caret line="3" column="8" lean-forward="false" selection-start-line="3" selection-start-column="8" selection-end-line="5" selection-end-column="25" />
<folding />

@@ -451,6 +558,6 @@ </state>

</entry>
<entry file="jar://$APPLICATION_HOME_DIR$/plugins/sass/lib/sass.jar!/org/jetbrains/plugins/sass/stdlib/sass_functions.scss">
<entry file="file://$PROJECT_DIR$/functions/_grid-outer-margin.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="197">
<caret line="958" column="26" lean-forward="false" selection-start-line="958" selection-start-column="26" selection-end-line="958" selection-end-column="26" />
<state relative-caret-position="54">
<caret line="3" column="8" lean-forward="false" selection-start-line="3" selection-start-column="8" selection-end-line="5" selection-end-column="25" />
<folding />

@@ -460,6 +567,6 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/dist/grid.css">
<entry file="file://$PROJECT_DIR$/mixins/_grid-outer-margin.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-56">
<caret line="0" column="44" lean-forward="false" selection-start-line="0" selection-start-column="44" selection-end-line="0" selection-end-column="44" />
<state relative-caret-position="72">
<caret line="4" column="61" lean-forward="false" selection-start-line="4" selection-start-column="61" selection-end-line="4" selection-end-column="61" />
<folding />

@@ -469,6 +576,16 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="FIRST">
<first_editor relative-caret-position="180">
<caret line="10" column="57" lean-forward="true" selection-start-line="10" selection-start-column="57" selection-end-line="10" selection-end-column="57" />
</first_editor>
<second_editor />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_grid-breakpoint.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="36">
<caret line="2" column="17" lean-forward="false" selection-start-line="2" selection-start-column="17" selection-end-line="2" selection-end-column="17" />
<state relative-caret-position="126">
<caret line="7" column="13" lean-forward="true" selection-start-line="7" selection-start-column="13" selection-end-line="7" selection-end-column="13" />
<folding />

@@ -478,6 +595,15 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/src/_gutter-width.scss">
<entry file="file://$PROJECT_DIR$/postcss.config.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="396">
<caret line="22" column="0" lean-forward="false" selection-start-line="22" selection-start-column="0" selection-end-line="22" selection-end-column="0" />
<state relative-caret-position="162">
<caret line="9" column="0" lean-forward="true" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/_mixins.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="36">
<caret line="0" column="9" lean-forward="false" selection-start-line="0" selection-start-column="9" selection-end-line="0" selection-end-column="9" />
<caret line="1" column="9" lean-forward="false" selection-start-line="1" selection-start-column="9" selection-end-line="1" selection-end-column="9" />
<caret line="2" column="9" lean-forward="false" selection-start-line="2" selection-start-column="9" selection-end-line="2" selection-end-column="9" />
<folding />

@@ -487,6 +613,13 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/src/_functions.scss">
<entry file="file://$PROJECT_DIR$/.gitignore">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="414">
<caret line="23" column="0" lean-forward="false" selection-start-line="23" selection-start-column="0" selection-end-line="23" selection-end-column="0" />
<state relative-caret-position="18">
<caret line="1" column="0" lean-forward="true" selection-start-line="1" selection-start-column="0" selection-end-line="1" selection-end-column="0" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/mixins/_grid-gutter-width.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="0" column="24" lean-forward="false" selection-start-line="0" selection-start-column="7" selection-end-line="0" selection-end-column="24" />
<folding />

@@ -496,6 +629,6 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/src/_grid-outer-margin.scss">
<entry file="file://$PROJECT_DIR$/_variables.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="72">
<caret line="4" column="61" lean-forward="true" selection-start-line="4" selection-start-column="61" selection-end-line="4" selection-end-column="61" />
<state relative-caret-position="162">
<caret line="9" column="0" lean-forward="true" selection-start-line="9" selection-start-column="0" selection-end-line="9" selection-end-column="0" />
<folding />

@@ -505,6 +638,20 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/src/_grid-gutter-width.scss">
<entry file="file://$PROJECT_DIR$/package-lock.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="360">
<caret line="20" column="0" lean-forward="true" selection-start-line="20" selection-start-column="0" selection-end-line="20" selection-end-column="0" />
<state relative-caret-position="198">
<caret line="11" column="15" lean-forward="false" selection-start-line="11" selection-start-column="15" selection-end-line="11" selection-end-column="15" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="288">
<caret line="16" column="10" lean-forward="true" selection-start-line="16" selection-start-column="10" selection-end-line="16" selection-end-column="10" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/_functions.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<caret line="4" column="0" lean-forward="false" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />

@@ -514,6 +661,6 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/grid.scss">
<entry file="file://$PROJECT_DIR$/functions/_grid-configuration-at.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="342">
<caret line="19" column="0" lean-forward="true" selection-start-line="19" selection-start-column="0" selection-end-line="19" selection-end-column="0" />
<state relative-caret-position="486">
<caret line="27" column="1" lean-forward="false" selection-start-line="27" selection-start-column="1" selection-end-line="27" selection-end-column="1" />
<folding />

@@ -523,6 +670,6 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/src/_variables.scss">
<entry file="file://$PROJECT_DIR$/functions/_grid-column-width.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="216">
<caret line="12" column="24" lean-forward="false" selection-start-line="12" selection-start-column="20" selection-end-line="12" selection-end-column="24" />
<state relative-caret-position="72">
<caret line="4" column="0" lean-forward="true" selection-start-line="4" selection-start-column="0" selection-end-line="4" selection-end-column="0" />
<folding />

@@ -532,6 +679,6 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/src/_grid-breakpoint.scss">
<entry file="file://$PROJECT_DIR$/grid.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="216">
<caret line="12" column="35" lean-forward="false" selection-start-line="12" selection-start-column="35" selection-end-line="12" selection-end-column="35" />
<state relative-caret-position="396">
<caret line="22" column="0" lean-forward="true" selection-start-line="22" selection-start-column="0" selection-end-line="22" selection-end-column="0" />
<folding />

@@ -544,4 +691,4 @@ </state>

<state split_layout="FIRST">
<first_editor relative-caret-position="126">
<caret line="7" column="40" lean-forward="true" selection-start-line="7" selection-start-column="0" selection-end-line="7" selection-end-column="40" />
<first_editor relative-caret-position="123">
<caret line="13" column="70" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="75" selection-end-column="0" />
<folding />

@@ -553,15 +700,2 @@ </first_editor>

</entry>
<entry file="file://$PROJECT_DIR$/README.md">
<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="FIRST">
<first_editor relative-caret-position="180">
<caret line="10" column="35" lean-forward="false" selection-start-line="10" selection-start-column="35" selection-end-line="10" selection-end-column="35" />
<folding>
<marker date="1531740933544" expanded="true" signature="1770:1847" ph="(...)" />
</folding>
</first_editor>
<second_editor />
</state>
</provider>
</entry>
</component>

@@ -568,0 +702,0 @@ <component name="masterDetails">

+17
-2
CHANGELOG.md

@@ -5,6 +5,18 @@ Anything [unreleased] yet?

# [0.5.0]
###### 2018-08-28
Can I just have a little piece of it? 🍰
###### Fixed
- If the grid container was used with `-no-outer` it could potentially overflow. ([4d55dd1])
###### Changed
- Allow importing of functions and mixins in a more comfortable way.
For example: `@import "~@gridonic/grid/mixins";` or `@import "~@gridonic/grid/functions/grid-column-width";` ([79886d2])
# [0.4.0]
###### 2018-07-16
Just a little bit more flexing please. 🌱
Just a little bit more flexibility please. 🌱

@@ -48,3 +60,4 @@ ###### Added

[unreleased]: https://github.com/gridonic/grid/compare/0.4.0...HEAD
[unreleased]: https://github.com/gridonic/grid/compare/0.5.0...HEAD
[0.5.0]: https://github.com/gridonic/grid/compare/0.4.0...0.5.0
[0.4.0]: https://github.com/gridonic/grid/compare/0.3.0...0.4.0

@@ -63,1 +76,3 @@ [0.3.0]: https://github.com/gridonic/grid/compare/0.2.0...0.3.0

[966ab71]: https://github.com/gridonic/grid/commit/966ab71
[79886d2]: https://github.com/gridonic/grid/commit/79886d2
[4d55dd1]: https://github.com/gridonic/grid/commit/4d55dd1
+1
-1
dist/grid.css

@@ -1,1 +0,1 @@

/*! @gridonic/grid v0.4.0 */.grid-container{-webkit-box-sizing:border-box;box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:1440px;padding-left:15px;padding-right:15px;width:100%}.grid-container.-no-limit{max-width:none}.grid-container.-no-outer{padding-left:0;padding-right:0}.grid-row{-ms-flex:0 1 auto;-ms-flex-flow:row wrap;-webkit-box-direction:normal;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;flex:0 1 auto;flex-flow:row wrap;margin-left:-15px;margin-right:-15px}.grid-row>.column{padding-left:15px;padding-right:15px}.grid-row.-reverse{-ms-flex-direction:row-reverse;-webkit-box-direction:reverse;-webkit-box-orient:horizontal;flex-direction:row-reverse}.grid-row>.column{-ms-flex:0 0 auto;-webkit-box-flex:0;-webkit-box-sizing:border-box;box-sizing:border-box;flex:0 0 auto;max-width:100%}.grid-row>.column.-reverse{-ms-flex-direction:column-reverse;-webkit-box-direction:reverse;-webkit-box-orient:vertical;flex-direction:column-reverse}.grid-row.-xs-left,.grid-row.-xs-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-xs-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-xs-end,.grid-row.-xs-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-xs-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-xs-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-xs-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-xs-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-xs-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-xs{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-xs-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-xs-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-xs-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-xs-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-xs-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-xs-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-xs-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-xs-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-xs-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-xs-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-xs-offset-0{margin-left:0}.grid-row>.column.-xs-offset-1{margin-left:8.33333%}.grid-row>.column.-xs-offset-2{margin-left:16.66667%}.grid-row>.column.-xs-offset-3{margin-left:25%}.grid-row>.column.-xs-offset-4{margin-left:33.33333%}.grid-row>.column.-xs-offset-5{margin-left:41.66667%}.grid-row>.column.-xs-offset-6{margin-left:50%}.grid-row>.column.-xs-offset-7{margin-left:58.33333%}.grid-row>.column.-xs-offset-8{margin-left:66.66667%}.grid-row>.column.-xs-offset-9{margin-left:75%}.grid-row>.column.-xs-offset-10{margin-left:83.33333%}.grid-row>.column.-xs-offset-11{margin-left:91.66667%}@media (min-width:576px){.grid-container.-sm-fix{width:576px}.grid-row.-sm-left,.grid-row.-sm-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-sm-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-sm-end,.grid-row.-sm-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-sm-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-sm-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-sm-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-sm-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-sm-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-sm{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-sm-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-sm-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-sm-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-sm-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-sm-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-sm-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-sm-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-sm-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-sm-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-sm-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-sm-offset-0{margin-left:0}.grid-row>.column.-sm-offset-1{margin-left:8.33333%}.grid-row>.column.-sm-offset-2{margin-left:16.66667%}.grid-row>.column.-sm-offset-3{margin-left:25%}.grid-row>.column.-sm-offset-4{margin-left:33.33333%}.grid-row>.column.-sm-offset-5{margin-left:41.66667%}.grid-row>.column.-sm-offset-6{margin-left:50%}.grid-row>.column.-sm-offset-7{margin-left:58.33333%}.grid-row>.column.-sm-offset-8{margin-left:66.66667%}.grid-row>.column.-sm-offset-9{margin-left:75%}.grid-row>.column.-sm-offset-10{margin-left:83.33333%}.grid-row>.column.-sm-offset-11{margin-left:91.66667%}}@media (min-width:768px){.grid-container.-md-fix{width:768px}.grid-row.-md-left,.grid-row.-md-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-md-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-md-end,.grid-row.-md-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-md-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-md-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-md-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-md-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-md-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-md{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-md-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-md-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-md-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-md-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-md-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-md-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-md-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-md-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-md-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-md-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-md-offset-0{margin-left:0}.grid-row>.column.-md-offset-1{margin-left:8.33333%}.grid-row>.column.-md-offset-2{margin-left:16.66667%}.grid-row>.column.-md-offset-3{margin-left:25%}.grid-row>.column.-md-offset-4{margin-left:33.33333%}.grid-row>.column.-md-offset-5{margin-left:41.66667%}.grid-row>.column.-md-offset-6{margin-left:50%}.grid-row>.column.-md-offset-7{margin-left:58.33333%}.grid-row>.column.-md-offset-8{margin-left:66.66667%}.grid-row>.column.-md-offset-9{margin-left:75%}.grid-row>.column.-md-offset-10{margin-left:83.33333%}.grid-row>.column.-md-offset-11{margin-left:91.66667%}}@media (min-width:992px){.grid-container.-lg-fix{width:992px}.grid-row.-lg-left,.grid-row.-lg-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-lg-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-lg-end,.grid-row.-lg-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-lg-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-lg-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-lg-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-lg-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-lg-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-lg{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-lg-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-lg-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-lg-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-lg-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-lg-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-lg-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-lg-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-lg-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-lg-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-lg-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-lg-offset-0{margin-left:0}.grid-row>.column.-lg-offset-1{margin-left:8.33333%}.grid-row>.column.-lg-offset-2{margin-left:16.66667%}.grid-row>.column.-lg-offset-3{margin-left:25%}.grid-row>.column.-lg-offset-4{margin-left:33.33333%}.grid-row>.column.-lg-offset-5{margin-left:41.66667%}.grid-row>.column.-lg-offset-6{margin-left:50%}.grid-row>.column.-lg-offset-7{margin-left:58.33333%}.grid-row>.column.-lg-offset-8{margin-left:66.66667%}.grid-row>.column.-lg-offset-9{margin-left:75%}.grid-row>.column.-lg-offset-10{margin-left:83.33333%}.grid-row>.column.-lg-offset-11{margin-left:91.66667%}}@media (min-width:1200px){.grid-container.-xl-fix{width:1200px}.grid-row.-xl-left,.grid-row.-xl-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-xl-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-xl-end,.grid-row.-xl-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-xl-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-xl-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-xl-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-xl-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-xl-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-xl{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-xl-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-xl-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-xl-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-xl-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-xl-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-xl-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-xl-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-xl-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-xl-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-xl-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-xl-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-xl-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-xl-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-xl-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-xl-offset-0{margin-left:0}.grid-row>.column.-xl-offset-1{margin-left:8.33333%}.grid-row>.column.-xl-offset-2{margin-left:16.66667%}.grid-row>.column.-xl-offset-3{margin-left:25%}.grid-row>.column.-xl-offset-4{margin-left:33.33333%}.grid-row>.column.-xl-offset-5{margin-left:41.66667%}.grid-row>.column.-xl-offset-6{margin-left:50%}.grid-row>.column.-xl-offset-7{margin-left:58.33333%}.grid-row>.column.-xl-offset-8{margin-left:66.66667%}.grid-row>.column.-xl-offset-9{margin-left:75%}.grid-row>.column.-xl-offset-10{margin-left:83.33333%}.grid-row>.column.-xl-offset-11{margin-left:91.66667%}}
/*! @gridonic/grid v0.5.0 */.grid-container{-webkit-box-sizing:border-box;box-sizing:border-box;margin-left:auto;margin-right:auto;max-width:1440px;padding-left:15px;padding-right:15px;width:100%}.grid-container.-no-limit{max-width:none}.grid-container.-no-outer{overflow:hidden;padding-left:0;padding-right:0}.grid-row{-ms-flex:0 1 auto;-ms-flex-flow:row wrap;-webkit-box-direction:normal;-webkit-box-flex:0;-webkit-box-orient:horizontal;-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-box;display:-ms-flexbox;display:flex;flex:0 1 auto;flex-flow:row wrap;margin-left:-15px;margin-right:-15px}.grid-row>.column{padding-left:15px;padding-right:15px}.grid-row.-reverse{-ms-flex-direction:row-reverse;-webkit-box-direction:reverse;-webkit-box-orient:horizontal;flex-direction:row-reverse}.grid-row>.column{-ms-flex:0 0 auto;-webkit-box-flex:0;-webkit-box-sizing:border-box;box-sizing:border-box;flex:0 0 auto;max-width:100%}.grid-row>.column.-reverse{-ms-flex-direction:column-reverse;-webkit-box-direction:reverse;-webkit-box-orient:vertical;flex-direction:column-reverse}.grid-row.-xs-left,.grid-row.-xs-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-xs-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-xs-end,.grid-row.-xs-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-xs-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-xs-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-xs-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-xs-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-xs-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-xs{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-xs-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-xs-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-xs-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-xs-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-xs-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-xs-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-xs-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-xs-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-xs-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-xs-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-xs-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-xs-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-xs-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-xs-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-xs-offset-0{margin-left:0}.grid-row>.column.-xs-offset-1{margin-left:8.33333%}.grid-row>.column.-xs-offset-2{margin-left:16.66667%}.grid-row>.column.-xs-offset-3{margin-left:25%}.grid-row>.column.-xs-offset-4{margin-left:33.33333%}.grid-row>.column.-xs-offset-5{margin-left:41.66667%}.grid-row>.column.-xs-offset-6{margin-left:50%}.grid-row>.column.-xs-offset-7{margin-left:58.33333%}.grid-row>.column.-xs-offset-8{margin-left:66.66667%}.grid-row>.column.-xs-offset-9{margin-left:75%}.grid-row>.column.-xs-offset-10{margin-left:83.33333%}.grid-row>.column.-xs-offset-11{margin-left:91.66667%}@media (min-width:576px){.grid-container.-sm-fix{width:576px}.grid-row.-sm-left,.grid-row.-sm-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-sm-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-sm-end,.grid-row.-sm-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-sm-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-sm-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-sm-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-sm-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-sm-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-sm{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-sm-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-sm-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-sm-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-sm-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-sm-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-sm-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-sm-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-sm-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-sm-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-sm-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-sm-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-sm-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-sm-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-sm-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-sm-offset-0{margin-left:0}.grid-row>.column.-sm-offset-1{margin-left:8.33333%}.grid-row>.column.-sm-offset-2{margin-left:16.66667%}.grid-row>.column.-sm-offset-3{margin-left:25%}.grid-row>.column.-sm-offset-4{margin-left:33.33333%}.grid-row>.column.-sm-offset-5{margin-left:41.66667%}.grid-row>.column.-sm-offset-6{margin-left:50%}.grid-row>.column.-sm-offset-7{margin-left:58.33333%}.grid-row>.column.-sm-offset-8{margin-left:66.66667%}.grid-row>.column.-sm-offset-9{margin-left:75%}.grid-row>.column.-sm-offset-10{margin-left:83.33333%}.grid-row>.column.-sm-offset-11{margin-left:91.66667%}}@media (min-width:768px){.grid-container.-md-fix{width:768px}.grid-row.-md-left,.grid-row.-md-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-md-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-md-end,.grid-row.-md-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-md-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-md-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-md-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-md-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-md-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-md{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-md-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-md-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-md-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-md-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-md-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-md-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-md-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-md-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-md-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-md-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-md-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-md-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-md-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-md-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-md-offset-0{margin-left:0}.grid-row>.column.-md-offset-1{margin-left:8.33333%}.grid-row>.column.-md-offset-2{margin-left:16.66667%}.grid-row>.column.-md-offset-3{margin-left:25%}.grid-row>.column.-md-offset-4{margin-left:33.33333%}.grid-row>.column.-md-offset-5{margin-left:41.66667%}.grid-row>.column.-md-offset-6{margin-left:50%}.grid-row>.column.-md-offset-7{margin-left:58.33333%}.grid-row>.column.-md-offset-8{margin-left:66.66667%}.grid-row>.column.-md-offset-9{margin-left:75%}.grid-row>.column.-md-offset-10{margin-left:83.33333%}.grid-row>.column.-md-offset-11{margin-left:91.66667%}}@media (min-width:992px){.grid-container.-lg-fix{width:992px}.grid-row.-lg-left,.grid-row.-lg-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-lg-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-lg-end,.grid-row.-lg-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-lg-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-lg-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-lg-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-lg-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-lg-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-lg{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-lg-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-lg-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-lg-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-lg-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-lg-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-lg-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-lg-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-lg-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-lg-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-lg-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-lg-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-lg-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-lg-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-lg-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-lg-offset-0{margin-left:0}.grid-row>.column.-lg-offset-1{margin-left:8.33333%}.grid-row>.column.-lg-offset-2{margin-left:16.66667%}.grid-row>.column.-lg-offset-3{margin-left:25%}.grid-row>.column.-lg-offset-4{margin-left:33.33333%}.grid-row>.column.-lg-offset-5{margin-left:41.66667%}.grid-row>.column.-lg-offset-6{margin-left:50%}.grid-row>.column.-lg-offset-7{margin-left:58.33333%}.grid-row>.column.-lg-offset-8{margin-left:66.66667%}.grid-row>.column.-lg-offset-9{margin-left:75%}.grid-row>.column.-lg-offset-10{margin-left:83.33333%}.grid-row>.column.-lg-offset-11{margin-left:91.66667%}}@media (min-width:1200px){.grid-container.-xl-fix{width:1200px}.grid-row.-xl-left,.grid-row.-xl-start{-ms-flex-pack:start;-webkit-box-pack:start;justify-content:flex-start}.grid-row.-xl-center{-ms-flex-pack:center;-webkit-box-pack:center;justify-content:center}.grid-row.-xl-end,.grid-row.-xl-right{-ms-flex-pack:end;-webkit-box-pack:end;justify-content:flex-end}.grid-row.-xl-top{-ms-flex-align:start;-webkit-box-align:start;align-items:flex-start}.grid-row.-xl-middle{-ms-flex-align:center;-webkit-box-align:center;align-items:center}.grid-row.-xl-bottom{-ms-flex-align:end;-webkit-box-align:end;align-items:flex-end}.grid-row.-xl-around{-ms-flex-pack:distribute;justify-content:space-around}.grid-row.-xl-between{-ms-flex-pack:justify;-webkit-box-pack:justify;justify-content:space-between}.grid-row>.column.-xl{-ms-flex:1 0 0px;-webkit-box-flex:1;flex:1 0 0}.grid-row>.column.-xl-first{-ms-flex-order:-1;-webkit-box-ordinal-group:0;order:-1}.grid-row>.column.-xl-last{-ms-flex-order:1;-webkit-box-ordinal-group:2;order:1}.grid-row>.column.-xl-1{-ms-flex-preferred-size:8.33333%;flex-basis:8.33333%;max-width:8.33333%}.grid-row>.column.-xl-2{-ms-flex-preferred-size:16.66667%;flex-basis:16.66667%;max-width:16.66667%}.grid-row>.column.-xl-3{-ms-flex-preferred-size:25%;flex-basis:25%;max-width:25%}.grid-row>.column.-xl-4{-ms-flex-preferred-size:33.33333%;flex-basis:33.33333%;max-width:33.33333%}.grid-row>.column.-xl-5{-ms-flex-preferred-size:41.66667%;flex-basis:41.66667%;max-width:41.66667%}.grid-row>.column.-xl-6{-ms-flex-preferred-size:50%;flex-basis:50%;max-width:50%}.grid-row>.column.-xl-7{-ms-flex-preferred-size:58.33333%;flex-basis:58.33333%;max-width:58.33333%}.grid-row>.column.-xl-8{-ms-flex-preferred-size:66.66667%;flex-basis:66.66667%;max-width:66.66667%}.grid-row>.column.-xl-9{-ms-flex-preferred-size:75%;flex-basis:75%;max-width:75%}.grid-row>.column.-xl-10{-ms-flex-preferred-size:83.33333%;flex-basis:83.33333%;max-width:83.33333%}.grid-row>.column.-xl-11{-ms-flex-preferred-size:91.66667%;flex-basis:91.66667%;max-width:91.66667%}.grid-row>.column.-xl-12{-ms-flex-preferred-size:100%;flex-basis:100%;max-width:100%}.grid-row>.column.-xl-offset-0{margin-left:0}.grid-row>.column.-xl-offset-1{margin-left:8.33333%}.grid-row>.column.-xl-offset-2{margin-left:16.66667%}.grid-row>.column.-xl-offset-3{margin-left:25%}.grid-row>.column.-xl-offset-4{margin-left:33.33333%}.grid-row>.column.-xl-offset-5{margin-left:41.66667%}.grid-row>.column.-xl-offset-6{margin-left:50%}.grid-row>.column.-xl-offset-7{margin-left:58.33333%}.grid-row>.column.-xl-offset-8{margin-left:66.66667%}.grid-row>.column.-xl-offset-9{margin-left:75%}.grid-row>.column.-xl-offset-10{margin-left:83.33333%}.grid-row>.column.-xl-offset-11{margin-left:91.66667%}}
+5
-6
grid.scss
/*! {{ name }} v{{ version }} */
// Import grid functions/mixins.
@import "src/functions";
@import "src/variables";
@import "src/grid-breakpoint";
@import "src/grid-gutter-width";
@import "src/grid-outer-margin";
// Import grid functions, mixins and settings.
@import "functions";
@import "mixins";
@import "variables";

@@ -27,2 +25,3 @@ .#{$grid-classes-prefix}container {

&.-no-outer {
overflow: hidden;
padding-left: 0;

@@ -29,0 +28,0 @@ padding-right: 0;

+1
-1
package.json
{
"name": "@gridonic/grid",
"version": "0.4.0",
"version": "0.5.0",
"description": "A CSS Grid based on the flex display property written entirely in Sass respecting the rscss system.",

@@ -5,0 +5,0 @@ "main": "grid.scss",

-51
src/_functions.scss
/// Some of the grid configurations can be sets of values for responsive
/// reasons. Therefore we need a function that returns either the appropriate
/// value at a given breakpoint, or the same value for every call.
///
/// @author Gridonic
/// @param {String} $breakpoint - Breakpoint to get value for.
/// @param {List|Number} $option - Option to look for specific value.
/// @param {Map} $breakpoints - Map of available breakpoints.
/// @return {Number|null}
@function grid-configuration-at($breakpoint, $option, $breakpoints) {
// The given option is not a list or map, return it.
@if index(list map, type-of($option)) == null {
@return $option;
}
// Try to get the index of the requested breakpoint within the breakpoints map.
$index: index(map-keys($grid-breakpoints), $breakpoint);
// No breakpoint found.
@if $index == null {
@return nth($option, 1);
}
// If index is still within the range of the outer margin list,
// return the requested value, otherwise null.
@return if($index <= length($option), nth($option, $index), null);
}
/// Returns the total width for a given column.
@function grid-column-width($i) {
@return 100% / $grid-columns * $i;
}
/// Returns the appropriate outer margin for a given or not given breakpoint.
@function grid-outer-margin($name: null) {
@return grid-configuration-at(
$name,
$grid-outer-margin,
$grid-breakpoints
);
}
/// Returns the appropriate gutter width for a given or not given breakpoint.
@function grid-gutter-width($name: null) {
@return grid-configuration-at(
$name,
$grid-gutter-width,
$grid-breakpoints
);
}
-48
src/_grid-breakpoint.scss
@mixin grid-breakpoint($name, $size) {
.#{$grid-classes-prefix}container {
@include grid-outer-margin($name);
@if $size {
&.-#{$name}-fix {
width: $size;
}
}
}
.#{$grid-classes-prefix}row {
@include grid-gutter-width($name);
&.-#{$name} {
&-start, &-left { justify-content: flex-start; }
&-center { justify-content: center; }
&-end, &-right { justify-content: flex-end; }
&-top { align-items: flex-start; }
&-middle { align-items: center; }
&-bottom { align-items: flex-end; }
&-around { justify-content: space-around; }
&-between { justify-content: space-between; }
}
> .column.-#{$name} {
flex: 1 0 0;
&-first { order: -1; }
&-last { order: 1; }
@for $i from 1 through $grid-columns {
$width: grid-column-width($i);
&-#{$i} {
flex-basis: $width;
max-width: $width;
}
}
@for $i from 0 to $grid-columns {
&-offset-#{$i} {
margin-left: grid-column-width($i);
}
}
}
}
}
-20
src/_grid-gutter-width.scss
@mixin grid-gutter-width($name: null) {
$gutter-width: grid-gutter-width($name);
$is-gutter-width-responsive: type-of($grid-gutter-width) != "number";
$is-always: $name == null and $is-gutter-width-responsive == false;
$is-responsive: $name and $is-gutter-width-responsive == true;
@if ($is-always or $is-responsive) and $gutter-width {
$half-gutter-width: $gutter-width / 2;
$gutter-compensation: $half-gutter-width * -1;
margin-left: $gutter-compensation;
margin-right: $gutter-compensation;
> .column {
padding-left: $half-gutter-width;
padding-right: $half-gutter-width;
}
}
}
-12
src/_grid-outer-margin.scss
@mixin grid-outer-margin($name: null) {
$outer-margin: grid-outer-margin($name);
$is-outer-margin-responsive: type-of($grid-outer-margin) != "number";
$is-always: $name == null and $is-outer-margin-responsive == false;
$is-responsive: $name and $is-outer-margin-responsive == true;
@if ($is-always or $is-responsive) and $outer-margin {
padding-left: $outer-margin;
padding-right: $outer-margin;
}
}
-33
src/_variables.scss
// Set the number of columns you want to use in your layout.
$grid-columns: 12 !default;
// Set the gutter size between columns. You may provide a list of
// values for each breakpoint.
//
// If there are more breakpoints than values in your list, the last
// value will be used for all remaining breakpoints.
$grid-gutter-width: 30px !default;
// Set a margin for the container sides. This may also be a list of
// values. See gutter width for explanation.
$grid-outer-margin: 15px !default;
// Set the breakpoints for the grid. You should always provide at
// least one breakpoint without a resolution. This one will be used for
// naming of the initial classes.
$grid-breakpoints: (
xs: null,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
// Set the maximum width for the container. There is a class
// modifier available to disable the maximum width in case you don’t
// need it. See the official documentation for details.
$grid-max-width: 1440px !default;
// Set the prefix for all grid related classes. Use this in case you
// have conflicting class names.
$grid-classes-prefix: "grid-" !default;