HelpLess/frameless-plugin.less at master · sylbal/HelpLess · 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
/*
	Frameless			<http://framelessgrid.com/>
	by Joni Korpi 		<http://jonikorpi.com/>
	licensed under CC0	<http://creativecommons.org/publicdomain/zero/1.0/>

	Adapted by Sylvain Balbous (https://github.com/sylbal) for H5BP-Less plugin
	- Removed Reset and Normalize parts
	- Added helper functions for margin
	- Added namespace #fl
		* to use vars in your mixin, import the namespace, ie.:
			.mixin {
				#fl;
				width:@4cols;
			}
		* to use functions, call it via the mixin, ie.:
			.mixin {
				#fl > .width (4);
*/

#fl {
    //
    // Configuration
    //

    @font-size: 16; 		// Your base font-size in pixels
    @em: @font-size*1em;	// Shorthand for outputting ems, e.g. "12/@em"

    @column: 60;	// The column-width of your grid in pixels
    @gutter: 20;	// The gutter-width of your grid in pixels


    //
    // Column-widths in variables, in ems
    //

     @1cols: ( 1 * (@column + @gutter) - @gutter) / @em; @1col: @1cols;
     @2cols: ( 2 * (@column + @gutter) - @gutter) / @em;
     @3cols: ( 3 * (@column + @gutter) - @gutter) / @em;
     @4cols: ( 4 * (@column + @gutter) - @gutter) / @em;
     @5cols: ( 5 * (@column + @gutter) - @gutter) / @em;
     @6cols: ( 6 * (@column + @gutter) - @gutter) / @em;
     @7cols: ( 7 * (@column + @gutter) - @gutter) / @em;
     @8cols: ( 8 * (@column + @gutter) - @gutter) / @em;
     @9cols: ( 9 * (@column + @gutter) - @gutter) / @em;
    @10cols: (10 * (@column + @gutter) - @gutter) / @em;
    @11cols: (11 * (@column + @gutter) - @gutter) / @em;
    @12cols: (12 * (@column + @gutter) - @gutter) / @em;
    @13cols: (13 * (@column + @gutter) - @gutter) / @em;
    @14cols: (14 * (@column + @gutter) - @gutter) / @em;
    @15cols: (15 * (@column + @gutter) - @gutter) / @em;
    @16cols: (16 * (@column + @gutter) - @gutter) / @em;


    //
    // Column-widths in a function, in ems
    //

    .width (@cols:1) {
    	width: (@cols * (@column + @gutter) - @gutter) / @em;
    }

    //
    // Left margin in a function, in ems
    //
    .margin-left () {
        margin-left: @gutter/@em;
    }

    //
    // Prefix function to add some "blank" columns before the content column
    // The prefix includes all the necessary gutters
    //
    .prefix (@cols:1) {
        padding-left: (@cols * (@column + @gutter)) / @em;
    }
}