🎩 You're Invited:Meet the Socket team at Black Hat in Las Vegas, August 3-6.RSVP →
Sign In

hagrid

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

hagrid - npm Package Compare versions

Package was removed
Sorry, it seems this package was removed from the registry
Comparing version
2.0.3
 to
3.0.0
+7
.eslintrc
{
"extends": "airbnb",
"rules": {
"comma-dangle": 0,
"strict": 0
}
}
+3
.stylelintrc
{
"extends": "stylelint-config-standard"
}
+2
-2
bower.json
{
"name": "hagrid",
"version": "2.0.3",
"version": "3.0.0",
"authors": [
"felics <hi@felics.me>"
],
"description": "Flexbox-first, mixin-based SCSS Grid",
"description": "Elegant, mixin-based flexbox SCSS Grid",
"main": "scss/_hagrid.scss",

@@ -9,0 +9,0 @@ "keywords": [

+17
-19
gulpfile.js

@@ -7,20 +7,16 @@

// * Core
// * ---------------------
'use strict';
// * Require gulp modules
const gulp = require('gulp');
const jade = require('gulp-jade');
const gulp = require('gulp');
const jade = require('gulp-jade');
const prefix = require('gulp-autoprefixer');
const rename = require('gulp-rename');
const sass = require('gulp-sass');
const sass = require('gulp-sass');
const sassdoc = require('sassdoc');
gulp.task('sass', function() {
gulp.task('sass', () => {
return gulp.src('./__test__/src/scss/test.scss')
.pipe(sass().on('error', sass.logError))
.pipe(prefix({
browsers: ['last 2 versions', 'Explorer >= 10', 'Android >= 4.4'],
browsers: ['last 2 versions'],
}))

@@ -31,3 +27,3 @@ .pipe(rename('styles.css'))

gulp.task('jade', function() {
gulp.task('jade', () => {
return gulp.src('./__test__/src/jade/*.jade')

@@ -40,13 +36,16 @@ .pipe(jade({

// * Tasks
// * ---------------------
gulp.task('sassdoc', () => {
return gulp.src('./scss/**/*.scss')
.pipe(sassdoc({
display: {
alias: true
}
}));
});
// * Default task
gulp.task('default', ['watch']);
gulp.task('watch', ['sass', 'jade'], function() {
gulp.task('watch', ['sass', 'jade'], () => {
gulp.watch([
'./src/*.scss', './src/**/*.scss',
'./scss/*.scss', './scss/**/*.scss',
'./__test__/src/scss/test.scss',

@@ -60,3 +59,2 @@ './__test__/src/scss/**/*.scss',

], ['jade']);
});
+1
-1
LICENSE
The MIT License (MIT)
Copyright (c) **2015 Felix Spöttel**
Copyright (c) **2016 Felix Spöttel**

@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

+6
-3
package.json
{
"name": "hagrid",
"version": "2.0.3",
"version": "3.0.0",
"license": "MIT",
"main": "scss/_hagrid.scss",
"description": "Flexbox-first, mixin-based SCSS Grid",
"description": "Elegant, mixin-based flexbox SCSS Grid",
"repository": {

@@ -30,4 +30,7 @@ "type": "git",

"gulp-rename": "^1.2.2",
"gulp-sass": "^2.1.0"
"gulp-sass": "^2.1.1",
"sassdoc": "^2.1.19",
"stylelint": "^4.2.0",
"stylelint-config-standard": "^3.0.0"
}
}
+72
-48
README.md

@@ -1,17 +0,18 @@

<h1 align="center">
<br>
<img width="237" src="http://felics.me/\_assets/ext/hagrid/logo.png" alt="logo">
<br>
</h1>
## Contents:
1. [Installing](https://github.com/felics/hagrid#install)
2. [Usage](https://github.com/felics/hagrid#use)
3. [Configuration](https://github.com/felics/hagrid#options)
1. [Install](https://github.com/felics/hagrid#install)
2. [Use](https://github.com/felics/hagrid#use)
3. [Options](https://github.com/felics/hagrid#options)
4. [Modifiers](https://github.com/felics/hagrid#modifiers)
5. [Browser Support](https://github.com/felics/hagrid#browser-support)
6. [Prefixing](https://github.com/felics/hagrid#prefixes)
7. [Credit & License](https://github.com/felics/hagrid#credit)
5. [Mixins](https://github.com/felics/hagrid#mixins)
6. [Auto Grids](https://github.com/felics/hagrid#auto-grids)
7. [Browser Support](https://github.com/felics/hagrid#browser-support)
8. [Prefixes](https://github.com/felics/hagrid#prefixes)
9. [Developing](https://github.com/felics/hagrid#developing)
10. [Credit & License](https://github.com/felics/hagrid#credit)

@@ -80,4 +81,2 @@ ## Install:

*Note:* `display: flex` is set on each grid-parent, so you have to re-set it on grid-items if you use the fallback-grid and want to use flexbox-properties in grid-items.
## Options:

@@ -107,20 +106,2 @@

$hagrid-item-selector: "> *";
// * If you want to add an `inline-block`-grid for older browsers, set this to true
$hagrid-fallback: false;
// * By default, the whitespace issue is fixed the pure-way via letter-spacing / font-family
// * If you want to fix the issue via 0-whitespace HTML, set `$hagrid-fallback-fontfix` to false
$hagrid-fallback-fontfix: true;
// * If you are using the fontfix (recommended), reset your typeface here
$hagrid-fallback-font: sans-serif;
// * Displays warnings about modifiers / mixins that won't work on the fallback
$hagrid-fallback-warnings: false;
// * When set to true, hagrid will extend shared properties among grids and grid-items
// * When set to false (default), the output will be better traceable but slightly larger (gzip will eat this up)
$hagrid-dry-mixins: false;
```

@@ -158,3 +139,3 @@

### Mixins:
## Mixins:

@@ -164,3 +145,3 @@ - **bp:** Use breakpoints directly in a class.

#### Example (bp):
### Example (bp):

@@ -185,5 +166,4 @@ ```scss

### Example (stretch):
#### Example (stretch):
```scss

@@ -198,24 +178,57 @@

}
// Stretch accepts a selector as parameter, it defaults to "> *"
.stretch {
@include g;
> .item {
@include i;
@include stretch(".stretched-items");
}
}
```
## Automatic Grid Layouts:
## Auto Grids:
An automatic grid modifier was included until v1.1.0 but then removed because of its inconsistency with the fallback-grid. It will be re-added when the fallback can be safely dropped. Example of automatic grids with pure flexbox:
Starting in v3.0.0, you can let flexbox work out the grid for you - on any breakpoint - by passing `auto` to the `i`-mixin.
### Example (Auto Grids):
```scss
.grid {
display: flex;
flex: 1 1 auto;
// Basic automatic grid
.auto {
@include g;
}
.grid-item {
flex: 1 1 0%;
.auto-item {
@include i(auto);
}
.grid-item.example {
flex: 0 0 auto;
width: 50%;
// Pinned elements will keep their width - while their surrounding elements change.
.auto-pinned {
@include g;
}
.auto-item--pinned {
@include i(1/3);
}
.auto-item {
@include i(auto);
}
// You can use automatic grids on any breakpoint you like
.auto--responsive {
@include g;
}
.auto-item--responsive {
@include i(1/2, md auto);
}
```

@@ -226,11 +239,22 @@ ## Browser Support:

- Firefox
- Safari **7+** *(Fallback 6+)*
- Android **4.4+** *(Fallback 2.3+)*
- IE **10+** *(Fallback 9+ / 8+ with polyfill & -rem)*
- Safari **6.1+**
- Android **4.4+**
- IE **10+**
- Opera **12+**
If you need support for older browsers, you can use the `2.x` version range of hagrid. You can install it by running:
```
npm install hagrid@2.0.2
bower install hagrid@2.0.2
```
## Prefixes:
Hagrid does not generate prefixes (`-webkit-`,`-ms-`) as it is designed to be integrated with common SASS workflows in mind (Gulp / Grunt with [Autoprefixer](https://github.com/postcss/autoprefixer)). A sample configuration for Autoprefixer is available in the [test build-file](https://github.com/felics/hagrid/blob/master/gulpfile.js#L22-L23). Be careful not to set browsers in a way that generates legacy flexbox syntax!
Hagrid does not generate prefixes (`-webkit-`,`-ms-`) as it is designed to be integrated with common SASS workflows in mind (Gulp / Grunt with [Autoprefixer](https://github.com/postcss/autoprefixer)). A sample configuration for Autoprefixer is available in the [test build-file](https://github.com/felics/hagrid/blob/master/gulpfile.js#L24). Be careful not to set browsers in a way that generates legacy flexbox syntax!
## Developing:
You can build the project with the default gulp-task. If you want to use sassdoc, you can build it by running `gulp sassdoc`.
## Credit:

@@ -245,3 +269,3 @@

Copyright © **2015 Felix Spöttel**
Copyright © **2016 Felix Spöttel**

@@ -248,0 +272,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

+23
-51
scss/_hagrid.scss
//////////////////////////////
// HAGRID
// MIT LICENSE © 2015 Felix Spöttel
//////////////////////////////
////
/// HAGRID
/// MIT-License © 2016
/// @author Felix Spöttel
/// @group Config
////
/// Gutters
/// Set gutters usable as modifiers
/// @property {Number}
// Configuration
//////////////////////////////
// * Gutters
// * Set gutters used in your project.
// * do not delete default!
//////////////////////////////
$hagrid-gutters: (
$hagrid-gutters:
(
default: 1.5rem,

@@ -21,10 +19,11 @@ full: 0,

wide: 3rem
);
);
// * Breakpoints
// * Can be used for the grid e.g. (@include i(breakpoint 2/3))
// * Can be used for MQs (@include bp(breakpoint){@content})
//////////////////////////////
/// Breakpoints
/// Can be used for the grid e.g. @include i(breakpoint 2/3)
/// Can be used for mediaqueries @include bp(breakpoint){@content}
/// @property {String}
$hagrid-breakpoints: (
$hagrid-breakpoints:
(
sm: "(min-width: 35.5em)",

@@ -34,40 +33,13 @@ md: "(min-width: 48em)",

xl: "(min-width: 80em)"
);
);
// * Gutter & Modifier Selector
// * Gutters and modifiers are applied to all items of each grid-container
// * By default, the selector `> *` is used. If you use a consistent selector for grid-items, you can set hagrid to use it here
//////////////////////////////
/// Gutter & Modifier Selector
/// Gutters and modifiers are applied to all children of each grid-container
/// By default, the selector `> *` is used. If you use a consistent selector for grid-items, you can set it here
/// @property {String}
$hagrid-item-selector: "> *";
// * Fallback Grid
// * Inline-block grid fallback if you need to support IE9 / Android 4.3-
// * !Some modifiers won't work on the fallback grid!
//////////////////////////////
$hagrid-fallback: false;
// * Display warnings if you use modifiers that behave different on the fallback
$hagrid-fallback-warnings: false;
// * By default, the whitespace issue is fixed the pure-way via letter-spacing / font-family
// * If you want to fix the issue via 0-whitespace HTML, set `$hagrid-fallback-fontfix` to false
$hagrid-fallback-fontfix: true;
// * If you are using the fontfix (recommended), reset your typeface here
$hagrid-fallback-font: sans-serif;
// * Internal
//////////////////////////////
// * When set to true, hagrid will extend shared properties among grids and grid-items
// * When set to false (default), the output will be better traceable but slightly larger (gzip will eat this up)
$hagrid-dry-mixins: false;
// Imports
//////////////////////////////
@import "hagrid/core";
@import "hagrid/functions";
@import "hagrid/modifiers";
+72
-80
scss/hagrid/_core.scss
//////////////////////////////
// CORE
//////////////////////////////
////
/// Core
/// MIT-License © 2016
/// @author Felix Spöttel
/// @access public
/// @group API
////
// Static Content
// 1. https://github.com/philipwalton/flexbugs#1-minimum-content-sizing-of-flex-items-not-honored
///////////////////////////////
/// Print grid-styles and properties of applied modifiers
/// @param {List} $modifiers - List of modifiers to apply to grid
/// @output Outputs grid core styles and properties of the applied modifiers
@mixin grid-static {
@include mixin-dryer("grid") {
display: flex;
flex: initial;
list-style: none;
padding: 0;
@mixin grid($modifiers...) {
display: flex;
flex: initial;
list-style: none;
@if $hagrid-fallback and $hagrid-fallback-fontfix {
font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;
letter-spacing: -0.31em;
text-rendering: optimizespeed;
}
}
@include grid-modifiers($modifiers...);
}
@mixin item-static {
@include mixin-dryer("item") {
box-sizing: border-box;
flex-shrink: 0; // * 1
/// Print item core-styles and widths for each breakpoint specified
/// @param {List} $widths - List of breakpoint / width-pairs
/// @output Outputs item core-styles and widths for each breakpoint specified
@if $hagrid-fallback {
display: inline-block;
zoom: 1;
@mixin item($widths...) {
box-sizing: border-box;
flex-shrink: 0;
@if $hagrid-fallback-fontfix {
font-family: $hagrid-fallback-font;
letter-spacing: normal;
text-rendering: auto;
}
}
}
@include grid-calc(width, $widths...);
}
@mixin push-pull-static {
@include mixin-dryer("push-pull") {
position: relative;
}
}
/// Push a grid-item to the left
/// @param {List} $widths - List of breakpoint / width-pairs
/// @output Outputs widths specified in the push directive
// Grid Wrapper
///////////////////////////////
@mixin push($widths...) {
position: relative;
@mixin grid($modifiers...) {
@include grid-static;
@include grid-modifiers($modifiers...);
@include grid-calc(left, $widths...);
}
// Grid Item
///////////////////////////////
/// Pull a grid-item to the right
/// @param {List} $widths - List of breakpoint / width-pairs
/// @output Outputs widths specified in the pull directive
@mixin item($widths...) {
@include item-static;
@include grid-calc(width, $widths...);
@mixin pull($widths...) {
position: relative;
@include grid-calc(right, $widths...);
}
// Push / Pull
///////////////////////////////
/// Make a grid-items' children fill the avaiable height
/// @param {String} $el
/// @output Outputs stretch-properties for the container and its children
@mixin pull($widths...) {
@include push-pull-static;
@include grid-calc(right, $widths...);
}
@mixin stretch($el: "> *") {
display: flex;
align-self: stretch;
flex-flow: row wrap;
@mixin push($widths...) {
@include push-pull-static;
@include grid-calc(left, $widths...);
#{$el} {
flex: 1 1 100%;
}
}
// Stretch
///////////////////////////////
/// Assign properties to a breakpoint or a list of breakpoints
/// @content Styles applied to the media-query
/// @param {List} $breakpoints
/// @output Outputs mediaqueries and @content belonging to them
@mixin stretch {
align-self: stretch;
display: flex;
flex-flow: row wrap;
@mixin bp($breakpoints...) {
@each $breakpoint in $breakpoints {
$bp: parse-breakpoint($breakpoint);
#{$hagrid-item-selector} {
flex: 1 1 100%;
@if $bp != false {
@media only screen and #{$bp} {
@content;
}
}
@if $hagrid-fallback and $hagrid-fallback-warnings {
@warn "Stretch won't work on fallback-grid!";
@else {
@warn "You are trying to call @bp with an unknown, unquoted breakpoint: #{$breakpoint}";
}
}
}
// Breakpoints
///////////////////////////////
/// Shorthand for grid-mixin
/// @alias grid
/// @param {List} $modifiers
/// @output grid- and modifier-styles
@mixin bp($breakpoints...) {
@mixin g($modifiers...) {
@include grid($modifiers...);
}
@each $breakpoint in $breakpoints {
$bp: parse-breakpoint($breakpoint);
/// Shorthand for item-mixin
/// @alias item
/// @param {List} $widths
/// @output calculated item-widths
@if $bp != false {
@media only screen and #{$bp} {
@content;
}
}
@else {
@warn "You are trying to call @bp with an unknown, unquoted breakpoint: #{$breakpoint}";
}
}
@mixin i($widths...) {
@include item($widths...);
}
+127
-140
scss/hagrid/_functions.scss
///////////////////////////////
// FUNCTIONS
///////////////////////////////
////
/// Functions
/// MIT-License © 2016
/// @author Felix Spöttel
/// @access private
/// @group Internal
////
/// Calculate all widths for a call from i, push or pull
/// @param {String} $prop - Can be *width*, *left* or *right*
/// @param {List} $widths - List of breakpoint / width-pairs
/// @output Widths and breakpoints for a mixin-call
// DRY Mixins @ atimport/toolkit
//////////////////////////////
@mixin grid-calc($prop, $widths...) {
$arg-length: length($widths);
$hagrid-placeholders: ();
// Placeholder Get/Set
//////////////////////////////
@function hagrid-placeholder-get($id) {
@return map-get($hagrid-placeholders, $id);
}
@function hagrid-placeholder-set($id) {
$unique-id: unique-id();
$hagrid-placeholders: map-merge($hagrid-placeholders, ($id: $unique-id)) !global;
@return $unique-id;
}
// Generate Placeholder Class and Extend
//////////////////////////////
@mixin dynamic-extend($id) {
$placeholder-id: hagrid-placeholder-get($id);
@if $placeholder-id == null {
$placeholder-id: hagrid-placeholder-set($id);
@at-root %#{$placeholder-id} {
@content;
}
@if $arg-length == 0 {
// * If no params are passed, default to mobile-first
@if $prop == width {
#{$prop}: 100%;
}
@extend %#{$placeholder-id};
}
// Static Mixin Helper
//////////////////////////////
@mixin mixin-dryer($id, $extend: $hagrid-dry-mixins) {
@if $extend == true {
@include dynamic-extend($id) {
@content;
}
}
@else {
@content;
@error "You need to pass at least one statement to push/pull";
}
}
}
// Main Parser
//////////////////////////////
@else {
$width-detected: false;
@mixin grid-calc($prop, $widths...) {
$arg-length: length($widths);
@for $i from 1 through length($widths) {
$width: nth($widths, $i);
@if $arg-length == 0 {
// * If no params are passed, default to mobile-first
@if $prop == width {
#{$prop}: 100%;
// * If a general width is passed in, use it
@if type-of($width) == number {
#{$prop}: calculate-width($width);
$width-detected: true;
}
// * If false is passed, assign no width
@elseif $width == false {
$width-detected: true;
}
// * If auto is passed, assign no width
@elseif $width == auto {
flex: 1 1 auto;
$width-detected: true;
}
// * Handle responsive args
@else {
// * "md 2/3"-synthax
$key: nth($width, 1);
$value: nth($width, 2);
// * Cater for "2/3 md"-synthax
@if type-of($key) == number {
$value: nth($width, 1);
$key: nth($width, 2);
}
@else {
@error "You need to pass at least one statement to push/pull";
}
}
@else {
$width-detected: false;
// * Cater for specific breakpoints
$bp: parse-breakpoint($key);
@for $i from 1 through length($widths) {
@if $bp != false {
@include bp(#{$key}) {
@if type-of($value) == number {
#{$prop}: calculate-width($value);
}
$width: nth($widths,$i);
// * If a general width is passed in, use it
@if type-of($width) == number or $width == auto {
#{$prop}: calculate-width($width);
$width-detected: true;
@else if $value == auto {
flex: 1 1 auto;
width: auto;
}
// * If false is passed, assign no width
@elseif $width == false {
$width-detected: true;
}
// * Handle responsive args
@else {
// * "md 2/3"-synthax
$key: nth($width, 1);
$value: nth($width, 2);
// * Cater for "2/3 md"-synthax
@if type-of($key) == number {
$value: nth($width, 1);
$key: nth($width, 2);
}
// * Cater for specific breakpoints
$bp: parse-breakpoint($key);
@if $bp != false {
@include bp(#{$key}) {
#{$prop}: calculate-width($value);
}
}
@else {
@warn "You are trying to assign a width to an unknown, unquoted breakpoint: #{$key}";
}
@else if $value == false {
@error "You cannot pass false to breakpoint #{$key}.";
}
}
}
// * If only responsive params are passed, default to mobile-first
@if $width-detected == false and $prop == width {
#{$prop}: 100%;
@else {
@warn "You are trying to assign a width to an unknown or invalid breakpoint: #{$key}";
}
}
}
// * If only responsive params are passed, default to mobile-first
@if $width-detected == false and $prop == width {
#{$prop}: 100%;
}
}
}
// Calculate Width (Fraction => Percentage)
//////////////////////////////
/// Calculate a percentage value from a fraction
/// @param {Number} $value
/// @return {Value}
@function calculate-width($value) {
@if $value == auto or unit($value) != "" {
@return $value;
}
@else {
@return ($value * 100 * 1%);
}
@if unit($value) != "" {
@return $value;
}
@else {
@return ($value * 100 * 1%);
}
}
// Gutter Modifier Functions
//////////////////////////////
/// Check if a reference exists in $hagrid-gutters
/// @param {String} $id
/// @return {Boolean}
@function hagrid-gutter-exists($id) {
@return map-has-key($hagrid-gutters, $id);
@return map-has-key($hagrid-gutters, $id);
}
/// Get a referenced item from $hagrid-gutters
/// @param {String} $id
/// @return {String}
@function hagrid-gutter-get($id) {
@return map-get($hagrid-gutters, $id);
@return map-get($hagrid-gutters, $id);
}
// Breakpoint Validity Checker
// Validated a breakpoint and returns itstype "ref" or "quoted" or false
//////////////////////////////
/// Validate a breakpoint-key and return itself, its value or false
/// @param {String} $key
/// @param {Boolean} $get-map
/// @return {String | Boolean}
@function parse-breakpoint($key, $get-map: true) {
@if map-has-key($hagrid-breakpoints, $key) {
@if $get-map == false {
@return $key;
}
@else {
@return map-get($hagrid-breakpoints, $key);
}
@if map-has-key($hagrid-breakpoints, $key) {
@if $get-map == false {
@return $key;
}
@elseif is-mq($key) {
@return $key;
}
@else {
@return false;
@return map-get($hagrid-breakpoints, $key);
}
}
@elseif is-mq($key) {
@return $key;
}
@else {
@return false;
}
}
/// Check if a string is a mediaquery
/// @param {String} $string
/// @return {Boolean}
@function is-mq($string) {
@if str-starts-with($string, unquote("(")) and str-end-with($string, unquote(")")) {
@return true;
}
@else {
@return false;
}
@if str-starts-with($string, unquote("(")) and str-end-with($string, unquote(")")) {
@return true;
}
@else {
@return false;
}
}
/// Check if a string starts with a substring
/// @param {String} $string
/// @param {String} $needle
/// @return {Boolean}
@function str-starts-with($string, $needle) {

@@ -189,2 +182,7 @@ @if type-of($string) != "string" {

/// Check if a string ends with a substring
/// @param {String} $string
/// @param {String} $needle
/// @return {Boolean}
@function str-ends-with($string, $needle) {

@@ -203,12 +201,1 @@ @if type-of($string) != "string" {

}
// Shorthands
//////////////////////////////
@mixin g($modifiers...) {
@include grid($modifiers...);
}
@mixin i($widths...) {
@include item($widths...);
}
+91
-140
scss/hagrid/_modifiers.scss
//////////////////////////////
// MODIFIERS
///////////////////////////////
////
/// Modifiers
/// MIT-License © 2016
/// @author Felix Spöttel
/// @group Modifiers
////
/// Parses list of mixins and applies modifier-styles
/// List of avaiable modifiers
/// - right
/// - center
/// - bottom
/// - middle
/// - space-around
/// - space-between
/// - rev
/// - flip
/// - gutters specified in $hagrid-gutters
/// @access private
/// @param {List} $modifiers - See README
/// @output Modifier-styles for a given call
@mixin grid-modifiers($modifiers...) {
$gutter: hagrid-gutter-get(default);
$is-y: false;
$is-wrap: false;
$is-not-spacing: true;
$gutter: hagrid-gutter-get(default);
$is-y: false;
$is-wrap: false;
$is-not-spacing: true;
@each $modifier in $modifiers {
// * Check for modifiers that collide with defaults
@if $modifier == bottom or $modifier == top or $modifier == middle {
$is-y: true;
}
@elseif $modifier == flip {
$is-wrap: true;
}
@elseif hagrid-gutter-exists($modifier) {
$is-not-spacing: false;
}
@include grid-modifier($modifier);
@each $modifier in $modifiers {
// * Check for modifiers that collide with defaults
@if $modifier == bottom or $modifier == top or $modifier == middle {
$is-y: true;
}
@if $is-y == false {
align-items: flex-start;
@elseif $modifier == flip {
$is-wrap: true;
}
@if $is-wrap == false {
flex-wrap: wrap;
@elseif hagrid-gutter-exists($modifier) {
$is-not-spacing: false;
}
@if $is-not-spacing == true {
margin: {
left: -$gutter;
};
}
@include grid-modifier($modifier);
}
// * Apply styles that differ from defaults
@if $is-y == false {
align-items: flex-start;
}
#{$hagrid-item-selector} {
@if $is-not-spacing == true {
padding: {
left: $gutter;
};
}
@if $is-wrap == false {
flex-wrap: wrap;
}
@if $is-y == false and $hagrid-fallback {
vertical-align: top;
}
@if $is-not-spacing == true {
margin-left: -$gutter;
}
#{$hagrid-item-selector} {
@if $is-not-spacing == true {
padding-left: $gutter;
}
}
}
@mixin grid-modifier($modifier) {
// * x-Axis Alignment
// x-Axis Alignment
//////////////////////////////
@if $modifier == right {
justify-content: flex-end;
}
@if $modifier == right {
justify-content: flex-end;
@elseif $modifier == center {
justify-content: center;
}
@if $hagrid-fallback {
text-align: right;
// * y-Axis Alignment
#{$hagrid-item-selector} {
text-align: left;
}
}
}
@elseif $modifier == bottom {
align-items: flex-end;
}
@elseif $modifier == center {
justify-content: center;
@elseif $modifier == middle {
align-items: center;
}
@if $hagrid-fallback {
text-align: center;
// * Flex Alignment
#{$hagrid-item-selector} {
text-align: left;
}
}
}
@elseif $modifier == space-around {
justify-content: space-around;
}
// * y-Axis Alignment
//////////////////////////////
@elseif $modifier == space-between {
justify-content: space-between;
}
@elseif $modifier == bottom {
align-items: flex-end;
// * Direction
@if $hagrid-fallback {
@elseif $modifier == rev {
flex-direction: row-reverse;
}
#{$hagrid-item-selector} {
vertical-align: bottom;
}
}
@elseif $modifier == flip {
flex-wrap: wrap-reverse;
// * Workaround for IE rendering diff, see: https://github.com/felics/hagrid/issues/13
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
align-items: flex-end;
}
}
@elseif $modifier == middle {
align-items: center;
@else {
// * Gutter Modifiers
@if $hagrid-fallback {
@if hagrid-gutter-exists($modifier) {
$gutter: hagrid-gutter-get($modifier);
margin-left: -$gutter;
#{$hagrid-item-selector} {
vertical-align: middle;
}
}
#{$hagrid-item-selector} {
padding-left: $gutter;
}
}
// Flex Alignment
///////////////////////////////
@elseif $modifier == space-around {
justify-content: space-around;
@if $hagrid-fallback and $hagrid-fallback-warnings {
@warn "Modifier #{$modifier} won't work on fallback-grid!";
}
}
@elseif $modifier == space-between {
justify-content: space-between;
@if $hagrid-fallback and $hagrid-fallback-warnings {
@warn "Modifier #{$modifier} won't work on fallback-grid!";
}
}
// Direction
///////////////////////////////
@elseif $modifier == rev {
@if $hagrid-fallback {
direction: rtl;
#{$hagrid-item-selector} {
direction: ltr;
text-align: left;
}
}
@else {
flex-direction: row-reverse;
}
}
@elseif $modifier == flip {
flex-wrap: wrap-reverse;
// * Workaround for IE rendering diff, see: https://github.com/felics/hagrid/issues/13
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
align-items: flex-end;
}
@if $hagrid-fallback and $hagrid-fallback-warnings {
@warn "Modifier #{$modifier} won't work on fallback-grid!";
}
}
@else {
// Gutter Modifiers
///////////////////////////////
@if hagrid-gutter-exists($modifier) {
$gutter: hagrid-gutter-get($modifier);
margin: {
left: -$gutter;
};
#{$hagrid-item-selector} {
padding: {
left: $gutter;
};
}
}
@else {
@error "Modifier #{ $modifier } does not exist.";
}
@error "Modifier #{$modifier} does not exist.";
}
}
}