Snippets
Revised by
Daniel Sokolowski
ca2a3c1
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 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 | /*
* Light Column Grid v2016-apr-25
* ##############################
*
* See: https://bitbucket.org/snippets/danielsokolowski/d68x/light-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 `.column-wrapper`
DS,2106-Apr-27-0135: changed to `visible` as popup menus fail to show
DS,2106-Apr-27-0138: since we should always use column-wrapper to clear columns we might as well avoid the below css
DS,2106-Apr-27-0152: `visible` causes elements with itesm bigger then 100% to create a horziontal scroll bar
*/
/*body * {
overflow: visible;
}*/
/* use this class to make parent 'wrap' our floated columns and clear our column rows */
.column-wrapper {
overflow: hidden;
clear: both;
}
/*
* 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%
}
.heroBannerTEMP {
max-height: 730px; /* video full height on 1920x1080 monitor */
}
.heroBannerTEMP .heroBannerBackgroundWrapper {
position: absolute;
}
|
You can clone a snippet to your computer for local editing. Learn more.