Snippets
Revised by
Daniel Sokolowski
cfb4b73
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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 | /*
* Light Column Grid v2016-apr-25
* ##############################
*
* See: https://bitbucket.org/snippets/danielsokolowski/d68x/simple-wrapperless-column-gird-system
*
* Example:
*
* ```
* <section class="column 4/12">
* ...
* </section>
* <section class="column-last width-8/12">
* <!-- assuming `display: inline-block` for img-->
* <p>
* <img class="width-4/12" ... >Lorem lipsum</p>
* </p>
* </section>
* ```
*/
/*
* Make padding grow in-ward
* =========================
*
* Apply a natural box layout model to all elements, but allowing components to change, which is
* required for our column (`width-*`) classes to ensure padding does not effect their total width.
*
* If below `html` conflicts with your exisiting layout comment it out and add `box-sizing: border-box` to `.cloumn` definition.
*/
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
/*
* Automatically make elements that wrap our columns grow
* ======================================================
*/
/* DS,2016-Apr-26: more testing for below is needed, but if it is too aggresive in your existing style comment it out and use `.floatWrapFix` */
/*body * {
overflow: hidden;
}*/
/* use this class to make parent 'wrap' our floated columns */
.column-wrapper {
overflow: auto;
}
/*
* The 12 column based grid
*
* Class name leverage escaping of characters - see: https://mathiasbynens.be/notes/css-escapes, Note that these can be used without the column class
*/
.column
,.column-last {
float: left;
padding-right: 1em;
/*box-sizing: border-box;*/
}
/* our last column in a row should not have right padding */
.column:last-of-type /* automatically handles a case where all columns add up to 100% in one wrapping element, ex. in a `row` class div */
,.column-last /* add this class manually to remove padding on right */
,.width-12\/12 /* full width column should not have padding on right */
{
padding-right: 0;
}
.width-1\/12 {
width: calc(100% / 12)
}
.width-2\/12 {
width: calc(200% / 12)
}
.width-3\/12 {
width: calc(300% / 12)
}
.width-4\/12 {
width: calc(400% / 12);
}
.width-5\/12 {
width: calc(500% / 12)
}
.width-6\/12 {
width: calc(600% / 12)
}
.width-7\/12 {
width: calc(700% / 12)
}
.width-8\/12 {
width: calc(800% / 12)
}
.width-9\/12 {
width: calc(900% / 12)
}
.width-10\/12 {
width: calc(1000% / 12)
}
.width-11\/12 {
width: calc(1100% / 12)
}
.width-12\/12 {
width: 100%
}
|
You can clone a snippet to your computer for local editing. Learn more.