Skip to content

Commit

Permalink
tweaks to follow wordpress css cs
Browse files Browse the repository at this point in the history
  • Loading branch information
garrettw committed Nov 23, 2016
1 parent dfef09e commit b5d0dd7
Show file tree
Hide file tree
Showing 4 changed files with 143 additions and 133 deletions.
4 changes: 3 additions & 1 deletion LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
MIT License

Copyright (c) 2016 Garrett W.
Copyright © Nicolas Gallagher and Jonathan Neal and John Albin Wilkins
Copyright (c) 2016 Garrett Whitehorn


Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
7 changes: 6 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# ![Vitals](https://raw.githubusercontent.com/garrettw/vitals/master/vitals-logo-b.png)

A few tools for building modern, flexible websites.
A few Sass tools for building modern, flexible websites.

The goal is to be compatible with the most common browsers and versions currently
in use. For example, older versions of IE (like 6-8) are intentionally not
Expand Down Expand Up @@ -45,6 +45,11 @@ resembled Bootstrap.
I figured surely it wouldn't take much to adapt Batch into something that would
allow better semantics. So that's what I've done here.

You'll notice that there's no compiled version of the grid system.
That's intentional; my entire purpose for making it was for it to be used with
Sass to generate grid code for semantic CSS selectors. That's just not possible
with pure CSS. So if you want a pure CSS flexbox grid system, check out [Batch](http://martskin.github.io/batch/).

# Is that it?

Yes, for now. I think there are some existing projects that adequately address
Expand Down
46 changes: 23 additions & 23 deletions scss/_grid.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ $vg-border-color: #666 !default;

// Grid wrapper
%vitals-grid {
display: flex;
align-items: stretch;
flex-flow: row wrap;
display: flex;
flex-flow: row wrap;
align-items: stretch;
}

// Grid modifiers
Expand All @@ -23,58 +23,58 @@ $vg-border-color: #666 !default;
}

@mixin vg-reverse {
flex-direction: row-reverse;
flex-direction: row-reverse;
}

@mixin vg-valign-top {
align-items: flex-start;
align-items: flex-start;
}

@mixin vg-valign-center {
align-items: center;
align-items: center;
}

@mixin vg-valign-bottom {
align-items: flex-end;
align-items: flex-end;
}

@mixin vg-align-left {
justify-content: flex-start;
justify-content: flex-start;
}

@mixin vg-align-center {
justify-content: center;
justify-content: center;
}

@mixin vg-align-right {
justify-content: flex-end;
justify-content: flex-end;
}

// Cell setup/modifiers
@mixin vg-cell($num, $denom, $gutter: false, $guttersize: $vg-gutter) {
$cell-size-percentage: (percentage($num / $denom));
flex: 1 0 auto; /* forces usage of min-width, width, max-width instead */

@if $gutter == true {
margin: ($guttersize / 2);
width: calc(#{$cell-size-percentage} - #{$guttersize});
} @else {
width: $cell-size-percentage;
}
$cell-size-percentage: (percentage($num / $denom));
flex: 1 0 auto; /* forces usage of min-width, width, max-width instead */

@if $gutter == true {
margin: ($guttersize / 2);
width: calc(#{$cell-size-percentage} - #{$guttersize});
} @else {
width: $cell-size-percentage;
}
}

@mixin vg-cell-border($size: $vg-border, $color: $vg-border-color) {
border: $size solid $color;
border: $size solid $color;
}

@mixin vg-cell-valign-top {
align-self: flex-start;
align-self: flex-start;
}

@mixin vg-cell-valign-bottom {
align-self: flex-end;
align-self: flex-end;
}

@mixin vg-cell-valign-center {
align-self: center;
align-self: center;
}
Loading

0 comments on commit b5d0dd7

Please sign in to comment.