πŸš€ 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.3.0
 to
0.4.0
+21
.idea/codeStyleSettings.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectCodeStyleSettingsManager">
<option name="PER_PROJECT_SETTINGS">
<value>
<codeStyleSettings language="SCSS">
<indentOptions>
<option name="INDENT_SIZE" value="4" />
</indentOptions>
</codeStyleSettings>
<codeStyleSettings language="Stylus">
<indentOptions>
<option name="INDENT_SIZE" value="4" />
<option name="USE_TAB_CHARACTER" value="true" />
</indentOptions>
</codeStyleSettings>
</value>
</option>
<option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
</component>
</project>
+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;
+180
-63
.idea/workspace.xml
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ChangeListManager">
<list default="true" id="277b9ba5-f655-4f82-b8e3-33955bdb9ceb" name="Default" comment="" />
<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" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />

@@ -13,13 +15,9 @@ <option name="TRACKING_ENABLED" value="true" />

<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
<file leaf-file-name="grid.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/grid.scss">
<leaf>
<file leaf-file-name="_grid-breakpoint.scss" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/src/_grid-breakpoint.scss">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="666">
<caret line="37" column="21" lean-forward="true" selection-start-line="37" selection-start-column="21" selection-end-line="37" selection-end-column="21" />
<folding>
<element signature="e#1744#1886#0" expanded="false" />
<element signature="e#2481#2525#0" expanded="false" />
<element signature="e#2729#2784#0" expanded="false" />
</folding>
<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>

@@ -32,5 +30,5 @@ </provider>

<provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
<state split_layout="SPLIT">
<first_editor relative-caret-position="324">
<caret line="18" column="9" lean-forward="true" selection-start-line="18" selection-start-column="9" selection-end-line="18" selection-end-column="9" />
<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 />

@@ -43,7 +41,42 @@ </first_editor>

</file>
<file leaf-file-name="package.json" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/package.json">
<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">
<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>
</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">
<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>
</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="43" lean-forward="true" selection-start-line="23" selection-start-column="43" selection-end-line="23" selection-end-column="43" />
<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 />

@@ -62,2 +95,5 @@ </state>

<find>0.1.0</find>
<find>$grid-outer-margin</find>
<find>:not</find>
<find>'</find>
</findStrings>

@@ -81,6 +117,16 @@ </component>

<option value="$APPLICATION_CONFIG_DIR$/scratches/scratch_1.md" />
<option value="$PROJECT_DIR$/README.md" />
<option value="$PROJECT_DIR$/postcss.config.js" />
<option value="$PROJECT_DIR$/src/_gutter-width.scss" />
<option value="$PROJECT_DIR$/src/_breakpoint.scss" />
<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$/package.json" />
<option value="$PROJECT_DIR$/src/_grid-outer-margin.scss" />
<option value="$PROJECT_DIR$/src/_functions.scss" />
<option value="$PROJECT_DIR$/src/_grid-gutter-width.scss" />
<option value="$PROJECT_DIR$/src/_variables.scss" />
<option value="$PROJECT_DIR$/CHANGELOG.md" />
<option value="$PROJECT_DIR$/README.md" />
</list>

@@ -101,5 +147,5 @@ </option>

<option name="x" value="1440" />
<option name="y" value="-517" />
<option name="width" value="2560" />
<option name="height" value="1417" />
<option name="y" value="23" />
<option name="width" value="1440" />
<option name="height" value="877" />
</component>

@@ -122,3 +168,2 @@ <component name="ProjectView">

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

@@ -136,2 +181,7 @@ <subPane>

</path>
<path>
<item name="@gridonic/grid" type="b2602c69:ProjectViewProjectNode" />
<item name="grid" type="462c0819:PsiDirectoryNode" />
<item name="src" type="462c0819:PsiDirectoryNode" />
</path>
</expand>

@@ -141,4 +191,5 @@ <select />

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

@@ -154,3 +205,9 @@ </component>

<property name="com.intellij.ide.scratch.LRUPopupBuilder$2/Languages" value="HTML&#10;TEXT" />
<property name="settings.editor.selected.configurable" value="editor.preferences.fonts.default" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src" />
</key>
</component>
<component name="RunDashboard">

@@ -265,3 +322,4 @@ <option name="ruleStates">

<workItem from="1530888996991" duration="10762000" />
<workItem from="1531209337836" duration="5508000" />
<workItem from="1531209337836" duration="5745000" />
<workItem from="1531231056344" duration="17820000" />
</task>

@@ -271,3 +329,3 @@ <servers />

<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="16872000" />
<option name="totallyTimeSpent" value="34929000" />
</component>

@@ -321,7 +379,3 @@ <component name="ToolWindowManager">

<caret line="0" column="0" lean-forward="false" selection-start-line="0" selection-start-column="0" selection-end-line="0" selection-end-column="0" />
<folding>
<element signature="e#1744#1886#0" expanded="false" />
<element signature="e#2481#2525#0" expanded="false" />
<element signature="e#2729#2784#0" expanded="false" />
</folding>
<folding />
</state>

@@ -365,9 +419,2 @@ </provider>

</entry>
<entry file="file://$PROJECT_DIR$/dist/grid.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="0">
<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://$APPLICATION_CONFIG_DIR$/scratches/scratch_1.md">

@@ -383,28 +430,61 @@ <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-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="379">
<caret line="52" column="4" lean-forward="false" selection-start-line="52" selection-start-column="4" selection-end-line="52" selection-end-column="4" />
</first_editor>
<second_editor />
<entry file="file://$PROJECT_DIR$/package-lock.json">
<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>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/grid.scss">
<entry file="file://$PROJECT_DIR$/postcss.config.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="666">
<caret line="37" column="21" lean-forward="true" selection-start-line="37" selection-start-column="21" selection-end-line="37" selection-end-column="21" />
<folding>
<element signature="e#1744#1886#0" expanded="false" />
<element signature="e#2481#2525#0" expanded="false" />
<element signature="e#2729#2784#0" expanded="false" />
</folding>
<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 />
</state>
</provider>
</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="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" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/dist/grid.css">
<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" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<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" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/_gutter-width.scss">
<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" />
<folding />
</state>
</provider>
</entry>
<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 />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/_grid-outer-margin.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" />
<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 />

@@ -414,7 +494,39 @@ </state>

</entry>
<entry file="file://$PROJECT_DIR$/src/_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$/grid.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" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/_variables.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" />
<folding />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/src/_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="SPLIT">
<first_editor relative-caret-position="324">
<caret line="18" column="9" lean-forward="true" selection-start-line="18" selection-start-column="9" selection-end-line="18" selection-end-column="9" />
<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 />

@@ -426,7 +538,12 @@ </first_editor>

</entry>
<entry file="file://$PROJECT_DIR$/package.json">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="414">
<caret line="23" column="43" lean-forward="true" selection-start-line="23" selection-start-column="43" selection-end-line="23" selection-end-column="43" />
<folding />
<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>

@@ -433,0 +550,0 @@ </provider>

+11
-1
CHANGELOG.md

@@ -5,2 +5,10 @@ Anything [unreleased] yet?

# [0.4.0]
###### 2018-07-16
Just a little bit more flexing please. 🌱
###### Added
- Allow multiple values (lists) for `gutter-width` and `outer-margin` to support responsive behaviour. ([966ab71])
# [0.3.0]

@@ -40,3 +48,4 @@ ###### 2018-07-10

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

@@ -53,1 +62,2 @@ [0.2.0]: https://github.com/gridonic/grid/compare/0.1.0...0.2.0

[3b968ca]: https://github.com/gridonic/grid/commit/3b968ca
[966ab71]: https://github.com/gridonic/grid/commit/966ab71
+1
-1
dist/grid.css

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

.grid-container{-webkit-box-sizing:border-box;box-sizing:border-box;margin-left:auto;margin-right:auto;width:100%}.grid-container:not(.-no-limit){max-width:1440px}.grid-container:not(.-no-outer){padding-left:2rem;padding-right:2rem}.grid-row{-ms-flex:0 1 auto;-ms-flex-flow:row wrap;-webkit-box-direction:normal;-webkit-box-flex:0;-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:-.5rem;margin-right:-.5rem}.grid-row,.grid-row.-reverse{-webkit-box-orient:horizontal}.grid-row.-reverse{-ms-flex-direction:row-reverse;-webkit-box-direction:reverse;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%;padding-left:.5rem;padding-right:.5rem}.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%}.grid-row>.column.-xs-offset-12{margin-left:100%}@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%}.grid-row>.column.-sm-offset-12{margin-left:100%}}@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%}.grid-row>.column.-md-offset-12{margin-left:100%}}@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%}.grid-row>.column.-lg-offset-12{margin-left:100%}}@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%}.grid-row>.column.-xl-offset-12{margin-left:100%}}
/*! @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%}}
+18
-79
grid.scss

@@ -1,74 +0,13 @@

// Set the number of columns you want to use on your layout.
$grid-columns: 12 !default;
/*! {{ name }} v{{ version }} */
// Set the gutter size between columns.
$grid-gutter-width: 1rem !default;
// Import grid functions/mixins.
@import "src/functions";
@import "src/variables";
@import "src/grid-breakpoint";
@import "src/grid-gutter-width";
@import "src/grid-outer-margin";
// Set a margin for the container sides.
$grid-outer-margin: 2rem !default;
.#{$grid-classes-prefix}container {
@include grid-outer-margin;
// Set the breakpoints for the grid.
$grid-breakpoints: (
xs: null,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px
) !default;
// Set the maximum width for the container.
$grid-max-width: 1440px !default;
// Set the prefix for all grid related classes.
$grid-classes-prefix: "grid-" !default;
$half-gutter-width: $grid-gutter-width / 2;
$gutter-compensation: $half-gutter-width * -1;
@mixin grid-breakpoint($name, $size) {
@if $size {
.#{$grid-classes-prefix}container {
&.-#{$name}-fix {
width: $size;
}
}
}
.#{$grid-classes-prefix}row {
&.-#{$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: 100% / $grid-columns * $i;
&-#{$i} {
flex-basis: $width;
max-width: $width;
}
}
@for $i from 0 through $grid-columns {
&-offset-#{$i} {
margin-left: if($i == 0, 0, 100% / $grid-columns * $i);
}
}
}
}
}
.#{$grid-classes-prefix}container {
box-sizing: border-box;

@@ -80,10 +19,12 @@ margin-left: auto;

@if $grid-max-width {
&:not(.-no-limit) {
max-width: $grid-max-width;
max-width: $grid-max-width;
&.-no-limit {
max-width: none;
}
}
&:not(.-no-outer) {
padding-left: $grid-outer-margin;
padding-right: $grid-outer-margin;
&.-no-outer {
padding-left: 0;
padding-right: 0;
}

@@ -93,2 +34,4 @@ }

.#{$grid-classes-prefix}row {
@include grid-gutter-width;
box-sizing: border-box;

@@ -98,4 +41,2 @@ display: flex;

flex-flow: row wrap;
margin-left: $gutter-compensation;
margin-right: $gutter-compensation;

@@ -110,4 +51,2 @@ &.-reverse {

max-width: 100%;
padding-left: $half-gutter-width;
padding-right: $half-gutter-width;

@@ -114,0 +53,0 @@ &.-reverse {

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

@@ -35,3 +35,4 @@ "main": "grid.scss",

"node-sass": "^4.9.1",
"postcss-cli": "^5.0.1"
"postcss-cli": "^5.0.1",
"postcss-replace": "^1.0.3"
},

@@ -38,0 +39,0 @@ "dependencies": {},

+1
-0
postcss.config.js

@@ -6,4 +6,5 @@ const pkg = require('./package.json');

'autoprefixer': {},
'postcss-replace': { data: pkg },
'cssnano': {}
}
});
+25
-14
README.md

@@ -9,3 +9,2 @@ # The Grid

# Use

@@ -15,3 +14,3 @@

Responsive modifiers (e.g. `-xs`, `-sm`, `-md` etc) enable you to specify different column sizes, offsets, alignments and distributions at different viewports. Those modifiers _may_ differ depending on _your_ configuration.
Responsive modifiers (e.g. `-xs`, `-sm`, `-md` etc.) enable you to specify different column sizes, offsets, alignments and distributions at different viewports. Those modifiers _may_ differ depending on _your_ configuration.

@@ -23,8 +22,9 @@ ## Sass

```scss
// Put your variables before the import
// in order to override the default settings.
// You want to customize the grid?
// Put your variables before the import in order to override the
// default settings.
$grid-columns: 24;
$grid-gutter-width: 30px;
$grid-outer-margin: 14px;
$grid-gutter-width: 10px 20px 40px; // Responsive gutter width
$grid-outer-margin: 0.625rem 1.125rem; // Responsive outer margin

@@ -45,12 +45,19 @@ @import "~@gridonic/grid";

```scss
// Set the number of columns you want to use on your layout.
// Set the number of columns you want to use in your layout.
$grid-columns: 12;
// Set the gutter size between columns.
$grid-gutter-width: 1rem;
// 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;
// Set a margin for the container sides.
$grid-outer-margin: 2rem;
// Set a margin for the container sides. This may also be a list of
// values. See gutter width for explanation.
$grid-outer-margin: 15px;
// Set the breakpoints for the grid.
// 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: (

@@ -64,7 +71,11 @@ xs: null,

// Set the maximum width for the container.
// 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;
// Set the prefix for all grid related classes.
// Set the prefix for all grid related classes. Use this in case you
// have conflicting class names.
$grid-classes-prefix: "grid-";
```

@@ -71,0 +82,0 @@