Gareth Jones 4foot30
4foot30
/ container.less
Created
September 11, 2016 20:46
For the Bootstrap grid: turn a .container into a .container-fluid (useful for full-width layouts on tablet)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // | |
| // ***** Apply fluid widths to containers (simulate .container-fluid) ***** | |
| // | |
| // | |
| .make-fluid(@breakpoint){ | |
| .fluid-@{breakpoint}{ | |
| width: auto; | |
| } | |
| } |
4foot30
/ gutter.less
Last active
September 11, 2016 20:43
For the Bootstrap grid: move an element into the grid's gutters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| // | |
| // ***** Classes to pull or push an element into the gutter(s) of its container ***** | |
| // | |
| // | |
| // .gutter-push-XX | |
| // Push the right edge of an element out | |
| // into the right gutter of its container | |
| // .gutter-push-double-XX |
4foot30
/ diagonal.less
Last active
August 29, 2015 14:27
Diagonal borders on any edge of an element, using SVG
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Give a block a slanted border | |
| // Adapted from @omgmog's https://blog.omgmog.net/post/some-approaches-for-creating-diagonal-section-separators-for-your-website/ | |
| // Default to 30px high right-aligned white triangle on top edge | |
| // See the comments after this mixin for diagrams of the positioning options | |
| .diagonal-border(@opposite: 30px, @edge: 'top', @alignment: 'right', @colour: '#fff', @inset: false, @element: before) { | |
| // Set relative positioning so you can use absolute positioning on the triangle | |
| position: relative; | |
| // Set polygon points for the triangles - outside the block | |
| .setPoints() when (@edge = 'top') and (@alignment = 'left') and (@inset = false) { | |
| @points: '0,0, 1,1, 0,1'; |
NewerOlder