foundation-hashgrid/_foundation-hashgrid.scss at master · mpalpha/foundation-hashgrid · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
//@import"foundation/scss/foundation/components/grid"; include foundation's grid
//@import"./config/settings"; include foundation settings

/*
 * todo:
 * 1) make it responsive with specified breakpoints
 * 2) generate custom placeholder grid
*/

// parse integer function
@function parseInt($n) {
    @return $n / ($n * 0 + 1);
}
// calculate rem to px
@function px-calc($values) {
    $list: ();
    @each $value in $values {
        $unit: unit($value);
        $val: parseInt($value);
        @if ($unit'rem') {
            $list: append($list, ($val * $rem-base));
        }
        @else {
            @warn'#{$unit} is not a rem, try rem-calc();';
        }
    }
    @return $list();
}
// Grid
$grid-columns: $total-columns;
$grid-gutter-width: $column-gutter;
$grid-margin: ($row-width / $total-columns) - $column-gutter;
$grid-baseline-height-output: $rem-base;
$grid-gutter-width-output: px-calc($grid-gutter-width);
$grid-margin-output: px-calc($grid-margin);
$grid-width-output: px-calc($row-width);
$columns-width: ($row-width - $grid-margin - ($grid-columns - 1) * $grid-gutter-width) / $grid-columns;
$columns-width-output: px-calc($columns-width);
// Hashgrid Config
%hgb * {
    content: "" !important;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#grid {
    @extend %hgb;
    position: absolute;
    top: 0;
    z-index: 10000;
    div {
        &.vert-container {
            outline: solid rgba(206, 0, 0, 0.3);
            outline-width: 1px;
        }
        &.horiz-container {
            margin: 0 auto !important;
            width: 100%;
        }
        &.vert > span {
            outline: solid rgba(0, 206, 209, 0.3);
            outline-width: 1px;
            background: rgba(255, 0, 0, 0.05);
        }
        &.horiz {
            height: $rem-base;
            border-bottom: 1px dotted rgba(100, 100, 100, 0.2);
            margin: 0 !important;
            padding: 0 !important;
        }
    }
    &:after {
        position: fixed;
        bottom: 1em;
        right: 1em;
        content: "Baseline Height: #{$grid-baseline-height-output}  \A         Columns: #{$grid-columns}  \A      Grid Width: #{$grid-width-output}  \A    Column Width: #{$columns-width-output}  \A    Gutter Width: #{$grid-gutter-width-output}  \A    Margin Width: #{$grid-margin-output}";
        white-space: pre;
        display: block;
        padding: 3px;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 10px;
        font-family: monospace;
        z-index: 9999;
    }
}