Bootstrap Snippet layout using HTML CSS

/*------------------------------------*\ $CSSWIZARDRY-GRIDS \*------------------------------------*/ /** * CONTENTS * INTRODUCTION.........How the grid system works. * VARIABLES............Your settings. * MIXINS...............Library mixins. * GRID SETUP...........Build the grid structure. * WIDTHS...............Build our responsive widths around our breakpoints. * PUSH.................Push classes. * PULL.................Pull classes. */ /*------------------------------------*\ $INTRODUCTION \*------------------------------------*/ /** * csswizardry grids provides you with widths to suit a number of breakpoints * designed around devices of a size you specify. Out of the box, csswizardry * grids caters to the following types of device: * * palm -- palm-based devices, like phones and small tablets * lap -- lap-based devices, like iPads or laptops * portable -- all of the above * desk -- stationary devices, like desktop computers * regular -- any/all types of device * * These namespaces are then used in the library to give you the ability to * manipulate your layouts based around them, for example: * <div class="grid__item one-whole lap--one-half desk--one-third"> * * This would give you a grid item which is 100% width unless it is on a lap * device, at which point it become 50% wide, or it is on a desktop device, at * which point it becomes 33.333% width. * * csswizardry grids also has push and pull classes which allow you to nudge * grid items left and right by a defined amount. These follow the same naming * convention as above, but are prepended by either `push--` or `pull--`, for * example: * `class="grid__item one-half push--one-half"` * * This would give you a grid item which is 50% width and pushed over to the * right by 50%. * * All classes in csswizardry grids follow this patten, so you should fairly * quickly be able to piece together any combinations you can imagine, for * example: * `class="grid__item one-whole lap--one-half desk--one-third push--desk--one-third"` * `class="grid__item one-quarter palm--one-half push--palm--one-half"` * `class="grid__item palm--one-third desk--five-twelfths"` */ /*------------------------------------*\ $VARIABLES \*------------------------------------*/ /** * If you are building a non-responsive site but would still like to use * csswizardry-grids, set this to ‘false’: */ /** * Is this build mobile first? Setting to ‘true’ means that all grids will be * 100% width if you do not apply a more specific class to them. */ /** * Set the spacing between your grid items. */ /** * Would you like Sass’ silent classes, or regular CSS classes? */ /** * Would you like push and pull classes enabled? */ /** * Using `inline-block` means that the grid items need their whitespace removing * in order for them to work correctly. Set the following to true if you are * going to achieve this by manually removing/commenting out any whitespace in * your HTML yourself. * * Setting this to false invokes a hack which cannot always be guaranteed, * please see the following for more detail: * * github.com/csswizardry/csswizardry-grids/commit/744d4b23c9d2b77d605b5991e54a397df72e0688 * github.com/csswizardry/inuit.css/issues/170#issuecomment-14859371 */ /** * Define your breakpoints. The first value is the prefix that shall be used for * your classes (e.g. `.palm--one-half`), the second value is the media query * that the breakpoint fires at. */ /** * Define which namespaced breakpoints you would like to generate for each of * widths, push and pull. This is handy if you only need pull on, say, desk, or * you only need a new width breakpoint at mobile sizes. It allows you to only * compile as much CSS as you need. All are turned on by default, but you can * add and remove breakpoints at will. * * Push and pull shall only be used if `$push` and/or `$pull` and `$responsive` * have been set to ‘true’. */ /** * You do not need to edit anything from this line onward; csswizardry-grids is * good to go. Happy griddin’! */ /*------------------------------------*\ $MIXINS \*------------------------------------*/ /** * These mixins are for the library to use only, you should not need to modify * them at all. * * Enclose a block of code with a media query as named in `$breakpoints`. */ /** * Drop relative positioning into silent classes which can’t take advantage of * the `[class*="push--"]` and `[class*="pull--"]` selectors. */ /*------------------------------------*\ $GRID SETUP \*------------------------------------*/ /** * 1. Allow the grid system to be used on lists. * 2. Remove any margins and paddings that might affect the grid system. * 3. Apply a negative `margin-left` to negate the columns’ gutters. */ .grid, .grid--rev, .page, .grid--full, .footer, .grid--right, .grid--center { list-style: none; /* [1] */ margin: 0; /* [2] */ padding: 0; /* [2] */ margin-left: -18px; /* [3] */ } /** * 1. Cause columns to stack side-by-side. * 2. Space columns apart. * 3. Align columns to the tops of each other. * 4. Full-width unless told to behave otherwise. * 5. Required to combine fluid widths and fixed gutters. */ .grid__item, .content, .sub-content, .footer__item { display: inline-block; /* [1] */ padding-left: 18px; /* [2] */ vertical-align: top; /* [3] */ width: 100%; /* [4] */ -webkit-box-sizing: border-box; /* [5] */ -moz-box-sizing: border-box; /* [5] */ box-sizing: border-box; /* [5] */ } /** * Reversed grids allow you to structure your source in the opposite order to * how your rendered layout will appear. */ .grid--rev, .page { direction: rtl; text-align: left; } .grid--rev > .grid__item, .page > .grid__item, .grid--rev > .content, .page > .content, .grid--rev > .sub-content, .page > .sub-content, .grid--rev > .footer__item, .page > .footer__item { direction: ltr; text-align: left; } /** * Gutterless grids have all the properties of regular grids, minus any spacing. */ .grid--full, .footer { margin-left: 0; } .grid--full > .grid__item, .footer > .grid__item, .grid--full > .content, .footer > .content, .grid--full > .sub-content, .footer > .sub-content, .grid--full > .footer__item, .footer > .footer__item { padding-left: 0; } /** * Align the entire grid to the right. */ .grid--right { text-align: right; } .grid--right > .grid__item, .grid--right > .content, .grid--right > .sub-content, .grid--right > .footer__item { text-align: left; } /** * Centered grids align grid items centrally without needing to use push or pull * classes. */ .grid--center { text-align: center; } .grid--center > .grid__item, .grid--center > .content, .grid--center > .sub-content, .grid--center > .footer__item { text-align: left; } /*------------------------------------*\ $WIDTHS \*------------------------------------*/ /** * Create our width classes, prefixed by the specified namespace. */ /** * Our regular, non-responsive width classes. */ /** * Whole */ .one-whole { width: 100%; } /** * Halves */ .one-half, .two-quarters, .three-sixths, .four-eighths, .five-tenths, .six-twelfths { width: 50%; } /** * Thirds */ .one-third, .two-sixths, .four-twelfths { width: 33.333%; } .two-thirds, .four-sixths, .eight-twelfths { width: 66.666%; } /** * Quarters */ .one-quarter, .two-eighths, .three-twelfths { width: 25%; } .three-quarters, .six-eighths, .nine-twelfths { width: 75%; } /** * Fifths */ .one-fifth, .two-tenths { width: 20%; } .two-fifths, .four-tenths { width: 40%; } .three-fifths, .six-tenths { width: 60%; } .four-fifths, .eight-tenths { width: 80%; } /** * Sixths */ .one-sixth, .two-twelfths { width: 16.666%; } .five-sixths, .ten-twelfths { width: 83.333%; } /** * Eighths */ .one-eighth { width: 12.5%; } .three-eighths { width: 37.5%; } .five-eighths { width: 62.5%; } .seven-eighths { width: 87.5%; } /** * Tenths */ .one-tenth { width: 10%; } .three-tenths { width: 30%; } .seven-tenths { width: 70%; } .nine-tenths { width: 90%; } /** * Twelfths */ .one-twelfth { width: 8.333%; } .five-twelfths { width: 41.666%; } .seven-twelfths { width: 58.333%; } .eleven-twelfths { width: 91.666%; } /** * Our responsive classes, if we have enabled them. */ @media only screen and (max-width: 480px) { /** * Whole */ .palm--one-whole { width: 100%; } /** * Halves */ .palm--one-half, .palm--two-quarters, .palm--three-sixths, .palm--four-eighths, .palm--five-tenths, .palm--six-twelfths { width: 50%; } /** * Thirds */ .palm--one-third, .palm--two-sixths, .palm--four-twelfths { width: 33.333%; } .palm--two-thirds, .palm--four-sixths, .palm--eight-twelfths { width: 66.666%; } /** * Quarters */ .palm--one-quarter, .palm--two-eighths, .palm--three-twelfths { width: 25%; } .palm--three-quarters, .palm--six-eighths, .palm--nine-twelfths { width: 75%; } /** * Fifths */ .palm--one-fifth, .palm--two-tenths { width: 20%; } .palm--two-fifths, .palm--four-tenths { width: 40%; } .palm--three-fifths, .palm--six-tenths { width: 60%; } .palm--four-fifths, .palm--eight-tenths { width: 80%; } /** * Sixths */ .palm--one-sixth, .palm--two-twelfths { width: 16.666%; } .palm--five-sixths, .palm--ten-twelfths { width: 83.333%; } /** * Eighths */ .palm--one-eighth { width: 12.5%; } .palm--three-eighths { width: 37.5%; } .palm--five-eighths { width: 62.5%; } .palm--seven-eighths { width: 87.5%; } /** * Tenths */ .palm--one-tenth { width: 10%; } .palm--three-tenths { width: 30%; } .palm--seven-tenths { width: 70%; } .palm--nine-tenths { width: 90%; } /** * Twelfths */ .palm--one-twelfth { width: 8.333%; } .palm--five-twelfths { width: 41.666%; } .palm--seven-twelfths { width: 58.333%; } .palm--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 481px) and (max-width: 1023px) { /** * Whole */ .lap--one-whole { width: 100%; } /** * Halves */ .lap--one-half, .lap--two-quarters, .lap--three-sixths, .lap--four-eighths, .lap--five-tenths, .lap--six-twelfths, .footer__item { width: 50%; } /** * Thirds */ .lap--one-third, .lap--two-sixths, .lap--four-twelfths { width: 33.333%; } .lap--two-thirds, .lap--four-sixths, .lap--eight-twelfths { width: 66.666%; } /** * Quarters */ .lap--one-quarter, .lap--two-eighths, .lap--three-twelfths { width: 25%; } .lap--three-quarters, .lap--six-eighths, .lap--nine-twelfths { width: 75%; } /** * Fifths */ .lap--one-fifth, .lap--two-tenths { width: 20%; } .lap--two-fifths, .lap--four-tenths { width: 40%; } .lap--three-fifths, .lap--six-tenths { width: 60%; } .lap--four-fifths, .lap--eight-tenths { width: 80%; } /** * Sixths */ .lap--one-sixth, .lap--two-twelfths { width: 16.666%; } .lap--five-sixths, .lap--ten-twelfths { width: 83.333%; } /** * Eighths */ .lap--one-eighth { width: 12.5%; } .lap--three-eighths { width: 37.5%; } .lap--five-eighths { width: 62.5%; } .lap--seven-eighths { width: 87.5%; } /** * Tenths */ .lap--one-tenth { width: 10%; } .lap--three-tenths, .sub-content { width: 30%; } .lap--seven-tenths, .content { width: 70%; } .lap--nine-tenths { width: 90%; } /** * Twelfths */ .lap--one-twelfth { width: 8.333%; } .lap--five-twelfths { width: 41.666%; } .lap--seven-twelfths { width: 58.333%; } .lap--eleven-twelfths { width: 91.666%; } } @media only screen and (max-width: 1023px) { /** * Whole */ .portable--one-whole { width: 100%; } /** * Halves */ .portable--one-half, .portable--two-quarters, .portable--three-sixths, .portable--four-eighths, .portable--five-tenths, .portable--six-twelfths { width: 50%; } /** * Thirds */ .portable--one-third, .portable--two-sixths, .portable--four-twelfths { width: 33.333%; } .portable--two-thirds, .portable--four-sixths, .portable--eight-twelfths { width: 66.666%; } /** * Quarters */ .portable--one-quarter, .portable--two-eighths, .portable--three-twelfths { width: 25%; } .portable--three-quarters, .portable--six-eighths, .portable--nine-twelfths { width: 75%; } /** * Fifths */ .portable--one-fifth, .portable--two-tenths { width: 20%; } .portable--two-fifths, .portable--four-tenths { width: 40%; } .portable--three-fifths, .portable--six-tenths { width: 60%; } .portable--four-fifths, .portable--eight-tenths { width: 80%; } /** * Sixths */ .portable--one-sixth, .portable--two-twelfths { width: 16.666%; } .portable--five-sixths, .portable--ten-twelfths { width: 83.333%; } /** * Eighths */ .portable--one-eighth { width: 12.5%; } .portable--three-eighths { width: 37.5%; } .portable--five-eighths { width: 62.5%; } .portable--seven-eighths { width: 87.5%; } /** * Tenths */ .portable--one-tenth { width: 10%; } .portable--three-tenths { width: 30%; } .portable--seven-tenths { width: 70%; } .portable--nine-tenths { width: 90%; } /** * Twelfths */ .portable--one-twelfth { width: 8.333%; } .portable--five-twelfths { width: 41.666%; } .portable--seven-twelfths { width: 58.333%; } .portable--eleven-twelfths { width: 91.666%; } } @media only screen and (min-width: 1024px) { /** * Whole */ .desk--one-whole { width: 100%; } /** * Halves */ .desk--one-half, .desk--two-quarters, .desk--three-sixths, .desk--four-eighths, .desk--five-tenths, .desk--six-twelfths { width: 50%; } /** * Thirds */ .desk--one-third, .desk--two-sixths, .desk--four-twelfths { width: 33.333%; } .desk--two-thirds, .desk--four-sixths, .desk--eight-twelfths { width: 66.666%; } /** * Quarters */ .desk--one-quarter, .desk--two-eighths, .desk--three-twelfths, .footer__item { width: 25%; } .desk--three-quarters, .desk--six-eighths, .desk--nine-twelfths { width: 75%; } /** * Fifths */ .desk--one-fifth, .desk--two-tenths { width: 20%; } .desk--two-fifths, .desk--four-tenths, .sub-content { width: 40%; } .desk--three-fifths, .desk--six-tenths, .content { width: 60%; } .desk--four-fifths, .desk--eight-tenths { width: 80%; } /** * Sixths */ .desk--one-sixth, .desk--two-twelfths { width: 16.666%; } .desk--five-sixths, .desk--ten-twelfths { width: 83.333%; } /** * Eighths */ .desk--one-eighth { width: 12.5%; } .desk--three-eighths { width: 37.5%; } .desk--five-eighths { width: 62.5%; } .desk--seven-eighths { width: 87.5%; } /** * Tenths */ .desk--one-tenth { width: 10%; } .desk--three-tenths { width: 30%; } .desk--seven-tenths { width: 70%; } .desk--nine-tenths { width: 90%; } /** * Twelfths */ .desk--one-twelfth { width: 8.333%; } .desk--five-twelfths { width: 41.666%; } .desk--seven-twelfths { width: 58.333%; } .desk--eleven-twelfths { width: 91.666%; } } /*------------------------------------*\ $PUSH \*------------------------------------*/ /** * Push classes, to move grid items over to the right by certain amounts. */ /** * Not a particularly great selector, but the DRYest way to do things. */ [class*="push--"] { position: relative; } /** * Whole */ .push--one-whole { left: 100%; } /** * Halves */ .push--one-half, .push--two-quarters, .push--three-sixths, .push--four-eighths, .push--five-tenths, .push--six-twelfths { left: 50%; } /** * Thirds */ .push--one-third, .push--two-sixths, .push--four-twelfths { left: 33.333%; } .push--two-thirds, .push--four-sixths, .push--eight-twelfths { left: 66.666%; } /** * Quarters */ .push--one-quarter, .push--two-eighths, .push--three-twelfths { left: 25%; } .push--three-quarters, .push--six-eighths, .push--nine-twelfths { left: 75%; } /** * Fifths */ .push--one-fifth, .push--two-tenths { left: 20%; } .push--two-fifths, .push--four-tenths { left: 40%; } .push--three-fifths, .push--six-tenths { left: 60%; } .push--four-fifths, .push--eight-tenths { left: 80%; } /** * Sixths */ .push--one-sixth, .push--two-twelfths { left: 16.666%; } .push--five-sixths, .push--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--one-eighth { left: 12.5%; } .push--three-eighths { left: 37.5%; } .push--five-eighths { left: 62.5%; } .push--seven-eighths { left: 87.5%; } /** * Tenths */ .push--one-tenth { left: 10%; } .push--three-tenths { left: 30%; } .push--seven-tenths { left: 70%; } .push--nine-tenths { left: 90%; } /** * Twelfths */ .push--one-twelfth { left: 8.333%; } .push--five-twelfths { left: 41.666%; } .push--seven-twelfths { left: 58.333%; } .push--eleven-twelfths { left: 91.666%; } @media only screen and (max-width: 480px) { /** * Whole */ .push--palm--one-whole { left: 100%; } /** * Halves */ .push--palm--one-half, .push--palm--two-quarters, .push--palm--three-sixths, .push--palm--four-eighths, .push--palm--five-tenths, .push--palm--six-twelfths { left: 50%; } /** * Thirds */ .push--palm--one-third, .push--palm--two-sixths, .push--palm--four-twelfths { left: 33.333%; } .push--palm--two-thirds, .push--palm--four-sixths, .push--palm--eight-twelfths { left: 66.666%; } /** * Quarters */ .push--palm--one-quarter, .push--palm--two-eighths, .push--palm--three-twelfths { left: 25%; } .push--palm--three-quarters, .push--palm--six-eighths, .push--palm--nine-twelfths { left: 75%; } /** * Fifths */ .push--palm--one-fifth, .push--palm--two-tenths { left: 20%; } .push--palm--two-fifths, .push--palm--four-tenths { left: 40%; } .push--palm--three-fifths, .push--palm--six-tenths { left: 60%; } .push--palm--four-fifths, .push--palm--eight-tenths { left: 80%; } /** * Sixths */ .push--palm--one-sixth, .push--palm--two-twelfths { left: 16.666%; } .push--palm--five-sixths, .push--palm--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--palm--one-eighth { left: 12.5%; } .push--palm--three-eighths { left: 37.5%; } .push--palm--five-eighths { left: 62.5%; } .push--palm--seven-eighths { left: 87.5%; } /** * Tenths */ .push--palm--one-tenth { left: 10%; } .push--palm--three-tenths { left: 30%; } .push--palm--seven-tenths { left: 70%; } .push--palm--nine-tenths { left: 90%; } /** * Twelfths */ .push--palm--one-twelfth { left: 8.333%; } .push--palm--five-twelfths { left: 41.666%; } .push--palm--seven-twelfths { left: 58.333%; } .push--palm--eleven-twelfths { left: 91.666%; } } @media only screen and (min-width: 481px) and (max-width: 1023px) { /** * Whole */ .push--lap--one-whole { left: 100%; } /** * Halves */ .push--lap--one-half, .push--lap--two-quarters, .push--lap--three-sixths, .push--lap--four-eighths, .push--lap--five-tenths, .push--lap--six-twelfths { left: 50%; } /** * Thirds */ .push--lap--one-third, .push--lap--two-sixths, .push--lap--four-twelfths { left: 33.333%; } .push--lap--two-thirds, .push--lap--four-sixths, .push--lap--eight-twelfths { left: 66.666%; } /** * Quarters */ .push--lap--one-quarter, .push--lap--two-eighths, .push--lap--three-twelfths { left: 25%; } .push--lap--three-quarters, .push--lap--six-eighths, .push--lap--nine-twelfths { left: 75%; } /** * Fifths */ .push--lap--one-fifth, .push--lap--two-tenths { left: 20%; } .push--lap--two-fifths, .push--lap--four-tenths { left: 40%; } .push--lap--three-fifths, .push--lap--six-tenths { left: 60%; } .push--lap--four-fifths, .push--lap--eight-tenths { left: 80%; } /** * Sixths */ .push--lap--one-sixth, .push--lap--two-twelfths { left: 16.666%; } .push--lap--five-sixths, .push--lap--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--lap--one-eighth { left: 12.5%; } .push--lap--three-eighths { left: 37.5%; } .push--lap--five-eighths { left: 62.5%; } .push--lap--seven-eighths { left: 87.5%; } /** * Tenths */ .push--lap--one-tenth { left: 10%; } .push--lap--three-tenths { left: 30%; } .push--lap--seven-tenths { left: 70%; } .push--lap--nine-tenths { left: 90%; } /** * Twelfths */ .push--lap--one-twelfth { left: 8.333%; } .push--lap--five-twelfths { left: 41.666%; } .push--lap--seven-twelfths { left: 58.333%; } .push--lap--eleven-twelfths { left: 91.666%; } } @media only screen and (max-width: 1023px) { /** * Whole */ .push--portable--one-whole { left: 100%; } /** * Halves */ .push--portable--one-half, .push--portable--two-quarters, .push--portable--three-sixths, .push--portable--four-eighths, .push--portable--five-tenths, .push--portable--six-twelfths { left: 50%; } /** * Thirds */ .push--portable--one-third, .push--portable--two-sixths, .push--portable--four-twelfths { left: 33.333%; } .push--portable--two-thirds, .push--portable--four-sixths, .push--portable--eight-twelfths { left: 66.666%; } /** * Quarters */ .push--portable--one-quarter, .push--portable--two-eighths, .push--portable--three-twelfths { left: 25%; } .push--portable--three-quarters, .push--portable--six-eighths, .push--portable--nine-twelfths { left: 75%; } /** * Fifths */ .push--portable--one-fifth, .push--portable--two-tenths { left: 20%; } .push--portable--two-fifths, .push--portable--four-tenths { left: 40%; } .push--portable--three-fifths, .push--portable--six-tenths { left: 60%; } .push--portable--four-fifths, .push--portable--eight-tenths { left: 80%; } /** * Sixths */ .push--portable--one-sixth, .push--portable--two-twelfths { left: 16.666%; } .push--portable--five-sixths, .push--portable--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--portable--one-eighth { left: 12.5%; } .push--portable--three-eighths { left: 37.5%; } .push--portable--five-eighths { left: 62.5%; } .push--portable--seven-eighths { left: 87.5%; } /** * Tenths */ .push--portable--one-tenth { left: 10%; } .push--portable--three-tenths { left: 30%; } .push--portable--seven-tenths { left: 70%; } .push--portable--nine-tenths { left: 90%; } /** * Twelfths */ .push--portable--one-twelfth { left: 8.333%; } .push--portable--five-twelfths { left: 41.666%; } .push--portable--seven-twelfths { left: 58.333%; } .push--portable--eleven-twelfths { left: 91.666%; } } @media only screen and (min-width: 1024px) { /** * Whole */ .push--desk--one-whole { left: 100%; } /** * Halves */ .push--desk--one-half, .push--desk--two-quarters, .push--desk--three-sixths, .push--desk--four-eighths, .push--desk--five-tenths, .push--desk--six-twelfths { left: 50%; } /** * Thirds */ .push--desk--one-third, .push--desk--two-sixths, .push--desk--four-twelfths { left: 33.333%; } .push--desk--two-thirds, .push--desk--four-sixths, .push--desk--eight-twelfths { left: 66.666%; } /** * Quarters */ .push--desk--one-quarter, .push--desk--two-eighths, .push--desk--three-twelfths { left: 25%; } .push--desk--three-quarters, .push--desk--six-eighths, .push--desk--nine-twelfths { left: 75%; } /** * Fifths */ .push--desk--one-fifth, .push--desk--two-tenths { left: 20%; } .push--desk--two-fifths, .push--desk--four-tenths { left: 40%; } .push--desk--three-fifths, .push--desk--six-tenths { left: 60%; } .push--desk--four-fifths, .push--desk--eight-tenths { left: 80%; } /** * Sixths */ .push--desk--one-sixth, .push--desk--two-twelfths { left: 16.666%; } .push--desk--five-sixths, .push--desk--ten-twelfths { left: 83.333%; } /** * Eighths */ .push--desk--one-eighth { left: 12.5%; } .push--desk--three-eighths { left: 37.5%; } .push--desk--five-eighths { left: 62.5%; } .push--desk--seven-eighths { left: 87.5%; } /** * Tenths */ .push--desk--one-tenth { left: 10%; } .push--desk--three-tenths { left: 30%; } .push--desk--seven-tenths { left: 70%; } .push--desk--nine-tenths { left: 90%; } /** * Twelfths */ .push--desk--one-twelfth { left: 8.333%; } .push--desk--five-twelfths { left: 41.666%; } .push--desk--seven-twelfths { left: 58.333%; } .push--desk--eleven-twelfths { left: 91.666%; } } /*------------------------------------*\ $PULL \*------------------------------------*/ /** * Pull classes, to move grid items back to the left by certain amounts. */ /** * Not a particularly great selector, but the DRYest way to do things. */ [class*="pull--"] { position: relative; } /** * Whole */ .pull--one-whole { right: 100%; } /** * Halves */ .pull--one-half, .pull--two-quarters, .pull--three-sixths, .pull--four-eighths, .pull--five-tenths, .pull--six-twelfths { right: 50%; } /** * Thirds */ .pull--one-third, .pull--two-sixths, .pull--four-twelfths { right: 33.333%; } .pull--two-thirds, .pull--four-sixths, .pull--eight-twelfths { right: 66.666%; } /** * Quarters */ .pull--one-quarter, .pull--two-eighths, .pull--three-twelfths { right: 25%; } .pull--three-quarters, .pull--six-eighths, .pull--nine-twelfths { right: 75%; } /** * Fifths */ .pull--one-fifth, .pull--two-tenths { right: 20%; } .pull--two-fifths, .pull--four-tenths { right: 40%; } .pull--three-fifths, .pull--six-tenths { right: 60%; } .pull--four-fifths, .pull--eight-tenths { right: 80%; } /** * Sixths */ .pull--one-sixth, .pull--two-twelfths { right: 16.666%; } .pull--five-sixths, .pull--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--one-eighth { right: 12.5%; } .pull--three-eighths { right: 37.5%; } .pull--five-eighths { right: 62.5%; } .pull--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--one-tenth { right: 10%; } .pull--three-tenths { right: 30%; } .pull--seven-tenths { right: 70%; } .pull--nine-tenths { right: 90%; } /** * Twelfths */ .pull--one-twelfth { right: 8.333%; } .pull--five-twelfths { right: 41.666%; } .pull--seven-twelfths { right: 58.333%; } .pull--eleven-twelfths { right: 91.666%; } @media only screen and (max-width: 480px) { /** * Whole */ .pull--palm--one-whole { right: 100%; } /** * Halves */ .pull--palm--one-half, .pull--palm--two-quarters, .pull--palm--three-sixths, .pull--palm--four-eighths, .pull--palm--five-tenths, .pull--palm--six-twelfths { right: 50%; } /** * Thirds */ .pull--palm--one-third, .pull--palm--two-sixths, .pull--palm--four-twelfths { right: 33.333%; } .pull--palm--two-thirds, .pull--palm--four-sixths, .pull--palm--eight-twelfths { right: 66.666%; } /** * Quarters */ .pull--palm--one-quarter, .pull--palm--two-eighths, .pull--palm--three-twelfths { right: 25%; } .pull--palm--three-quarters, .pull--palm--six-eighths, .pull--palm--nine-twelfths { right: 75%; } /** * Fifths */ .pull--palm--one-fifth, .pull--palm--two-tenths { right: 20%; } .pull--palm--two-fifths, .pull--palm--four-tenths { right: 40%; } .pull--palm--three-fifths, .pull--palm--six-tenths { right: 60%; } .pull--palm--four-fifths, .pull--palm--eight-tenths { right: 80%; } /** * Sixths */ .pull--palm--one-sixth, .pull--palm--two-twelfths { right: 16.666%; } .pull--palm--five-sixths, .pull--palm--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--palm--one-eighth { right: 12.5%; } .pull--palm--three-eighths { right: 37.5%; } .pull--palm--five-eighths { right: 62.5%; } .pull--palm--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--palm--one-tenth { right: 10%; } .pull--palm--three-tenths { right: 30%; } .pull--palm--seven-tenths { right: 70%; } .pull--palm--nine-tenths { right: 90%; } /** * Twelfths */ .pull--palm--one-twelfth { right: 8.333%; } .pull--palm--five-twelfths { right: 41.666%; } .pull--palm--seven-twelfths { right: 58.333%; } .pull--palm--eleven-twelfths { right: 91.666%; } } @media only screen and (min-width: 481px) and (max-width: 1023px) { /** * Whole */ .pull--lap--one-whole { right: 100%; } /** * Halves */ .pull--lap--one-half, .pull--lap--two-quarters, .pull--lap--three-sixths, .pull--lap--four-eighths, .pull--lap--five-tenths, .pull--lap--six-twelfths { right: 50%; } /** * Thirds */ .pull--lap--one-third, .pull--lap--two-sixths, .pull--lap--four-twelfths { right: 33.333%; } .pull--lap--two-thirds, .pull--lap--four-sixths, .pull--lap--eight-twelfths { right: 66.666%; } /** * Quarters */ .pull--lap--one-quarter, .pull--lap--two-eighths, .pull--lap--three-twelfths { right: 25%; } .pull--lap--three-quarters, .pull--lap--six-eighths, .pull--lap--nine-twelfths { right: 75%; } /** * Fifths */ .pull--lap--one-fifth, .pull--lap--two-tenths { right: 20%; } .pull--lap--two-fifths, .pull--lap--four-tenths { right: 40%; } .pull--lap--three-fifths, .pull--lap--six-tenths { right: 60%; } .pull--lap--four-fifths, .pull--lap--eight-tenths { right: 80%; } /** * Sixths */ .pull--lap--one-sixth, .pull--lap--two-twelfths { right: 16.666%; } .pull--lap--five-sixths, .pull--lap--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--lap--one-eighth { right: 12.5%; } .pull--lap--three-eighths { right: 37.5%; } .pull--lap--five-eighths { right: 62.5%; } .pull--lap--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--lap--one-tenth { right: 10%; } .pull--lap--three-tenths { right: 30%; } .pull--lap--seven-tenths { right: 70%; } .pull--lap--nine-tenths { right: 90%; } /** * Twelfths */ .pull--lap--one-twelfth { right: 8.333%; } .pull--lap--five-twelfths { right: 41.666%; } .pull--lap--seven-twelfths { right: 58.333%; } .pull--lap--eleven-twelfths { right: 91.666%; } } @media only screen and (max-width: 1023px) { /** * Whole */ .pull--portable--one-whole { right: 100%; } /** * Halves */ .pull--portable--one-half, .pull--portable--two-quarters, .pull--portable--three-sixths, .pull--portable--four-eighths, .pull--portable--five-tenths, .pull--portable--six-twelfths { right: 50%; } /** * Thirds */ .pull--portable--one-third, .pull--portable--two-sixths, .pull--portable--four-twelfths { right: 33.333%; } .pull--portable--two-thirds, .pull--portable--four-sixths, .pull--portable--eight-twelfths { right: 66.666%; } /** * Quarters */ .pull--portable--one-quarter, .pull--portable--two-eighths, .pull--portable--three-twelfths { right: 25%; } .pull--portable--three-quarters, .pull--portable--six-eighths, .pull--portable--nine-twelfths { right: 75%; } /** * Fifths */ .pull--portable--one-fifth, .pull--portable--two-tenths { right: 20%; } .pull--portable--two-fifths, .pull--portable--four-tenths { right: 40%; } .pull--portable--three-fifths, .pull--portable--six-tenths { right: 60%; } .pull--portable--four-fifths, .pull--portable--eight-tenths { right: 80%; } /** * Sixths */ .pull--portable--one-sixth, .pull--portable--two-twelfths { right: 16.666%; } .pull--portable--five-sixths, .pull--portable--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--portable--one-eighth { right: 12.5%; } .pull--portable--three-eighths { right: 37.5%; } .pull--portable--five-eighths { right: 62.5%; } .pull--portable--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--portable--one-tenth { right: 10%; } .pull--portable--three-tenths { right: 30%; } .pull--portable--seven-tenths { right: 70%; } .pull--portable--nine-tenths { right: 90%; } /** * Twelfths */ .pull--portable--one-twelfth { right: 8.333%; } .pull--portable--five-twelfths { right: 41.666%; } .pull--portable--seven-twelfths { right: 58.333%; } .pull--portable--eleven-twelfths { right: 91.666%; } } @media only screen and (min-width: 1024px) { /** * Whole */ .pull--desk--one-whole { right: 100%; } /** * Halves */ .pull--desk--one-half, .pull--desk--two-quarters, .pull--desk--three-sixths, .pull--desk--four-eighths, .pull--desk--five-tenths, .pull--desk--six-twelfths { right: 50%; } /** * Thirds */ .pull--desk--one-third, .pull--desk--two-sixths, .pull--desk--four-twelfths { right: 33.333%; } .pull--desk--two-thirds, .pull--desk--four-sixths, .pull--desk--eight-twelfths { right: 66.666%; } /** * Quarters */ .pull--desk--one-quarter, .pull--desk--two-eighths, .pull--desk--three-twelfths { right: 25%; } .pull--desk--three-quarters, .pull--desk--six-eighths, .pull--desk--nine-twelfths { right: 75%; } /** * Fifths */ .pull--desk--one-fifth, .pull--desk--two-tenths { right: 20%; } .pull--desk--two-fifths, .pull--desk--four-tenths { right: 40%; } .pull--desk--three-fifths, .pull--desk--six-tenths { right: 60%; } .pull--desk--four-fifths, .pull--desk--eight-tenths { right: 80%; } /** * Sixths */ .pull--desk--one-sixth, .pull--desk--two-twelfths { right: 16.666%; } .pull--desk--five-sixths, .pull--desk--ten-twelfths { right: 83.333%; } /** * Eighths */ .pull--desk--one-eighth { right: 12.5%; } .pull--desk--three-eighths { right: 37.5%; } .pull--desk--five-eighths { right: 62.5%; } .pull--desk--seven-eighths { right: 87.5%; } /** * Tenths */ .pull--desk--one-tenth { right: 10%; } .pull--desk--three-tenths { right: 30%; } .pull--desk--seven-tenths { right: 70%; } .pull--desk--nine-tenths { right: 90%; } /** * Twelfths */ .pull--desk--one-twelfth { right: 8.333%; } .pull--desk--five-twelfths { right: 41.666%; } .pull--desk--seven-twelfths { right: 58.333%; } .pull--desk--eleven-twelfths { right: 91.666%; } } /*------------------------------------*\ MAIN CSS \*------------------------------------*/ * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @charset "UTF-8"; html { font: 0.75em/1.5 'Open Sans', Ubuntu, sans-serif; background-color: #f9f9f9; color: #444; } body { /*max-width: 1200px;*/ margin: 0 auto; padding: 0 0; } img { max-width: 100%; } a { color: #f43059; font-weight: 400; text-decoration: none; } a:hover { text-decoration: underline; } .demo-block { background-color: #f43059; color: #fff; padding: 18px; margin-top: 20px; } /*------------------------------------*\ CONTENT CONTAINER WRAPPER \*------------------------------------*/ .container { max-width: 1100px; margin: 0 auto; z-index: 200; } @media screen and (max-width: 1024px) { .container { padding: 0 2%; } } /*------------------------------------*\ TOP NAVIGATION \*------------------------------------*/ .top-nav { min-width: 100%; display: block; background-color: #f9f9f9; min-height: 60px; } .logo { font-size: 2em; font-weight: 600; padding-left: 0; line-height: 60px; } .logo-palette-one { color: #222; } .logo-palette-two { color: #1B9772;/*#d12e90;*/ } .nav-item { color: #222; font-size: 1.2em; text-align: center; text-transform: uppercase; line-height: 34px; border-right: solid 1px #e9e9e9; padding-right: 18px; -webkit-transition-property:color, background; -webkit-transition-duration: 0.2s, 0.2s; -webkit-transition-timing-function: ease-in, ease-in; } .nav-item a { color: #222; text-align: center; text-transform: uppercase; line-height: 34px; -webkit-transition-property:color; -webkit-transition-duration: 0.2s; -webkit-transition-timing-function: ease-in; } /*Transition notes taken from https://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/ */ .nav-item:hover { color:#1B9772; background:#e3e3e3; } .nav-item a:hover { color:#1B9772; text-decoration: none; } @media screen and (max-width: 1024px) { .logo { font-size: 1.4em; padding-left: 0px; line-height: 60px; } .nav-item { font-size: 1.1em; } } @media screen and (min-width:480px) { .nav-item { text-align: center; line-height: 60px; } .nav-menu { border-left: solid 1px #e9e9e9; } } @media screen and (max-width:480px) { .logo, .nav-item { text-align: center; border-right: 0px; } .logo { padding-left: 0px; } .nav-menu { border-left: solid 0px #e9e9e9; } } /*------------------------------------*\ HERO SECTION \*------------------------------------*/ .hero { text-align: center; padding: 24px 0; background-color: #1B9772; } .hero-home { text-align: center; padding: 54px 0; background-color: #1B9772; z-index: 200; background-color: #0585a3; background-repeat: no-repeat; background-position: center center; background-size: cover; background-image: url(https://reflectionsworld.co.uk/assets/images/bathkitchen-hero-bk.jpg); opacity: .9; min-height: 400px; } @media screen and (max-width: 480px) { .hero-home { min-height: 300px; } } .hero p { font-size: 1.333em; margin: 0; } .hero h1, .hero-home h1 { font-size: 4em; font-weight: 400; text-align: center; margin: 0; line-height: 1.2; text-shadow: 0 -1px rgba(0, 0, 0, 0.25); color: #eee; } @media screen and (max-width: 1024px) { .hero h1 { font-size: 3em; } } .hero h2 { font-size: 1.4em; line-height: 1.2em; padding: 10px; margin: 0; color: #333; font-weight: 600; } .hero-home h1 { background: rgba(0, 0, 0, 0.4); font-size: 4.2em; font-weight: 400; text-align: right; margin: 0px; padding: 10px 20px; line-height: 1.4; text-shadow: 0 -1px rgba(0, 0, 0, 0.25); color: #fff; } @media screen and (max-width: 1024px) { .hero-home h1 { font-size: 2.6em; } } @media screen and (max-width: 480px) { .hero-home h1 { font-size: 2em; } } .hero-home h2 { background: rgba(27, 151, 114, 0.6); font-size: 2em; font-weight: 400; text-align: right; margin: 20px 0; padding: 10px 20px; line-height: 1.4; text-shadow: 0 -1px rgba(0, 0, 0, 0.25); color: #fff; } @media screen and (max-width: 1024px) { .hero-home h2 { font-size: 1.6em; } } @media screen and (max-width: 480px) { .hero-home h2 { font-size: 1.4em; } } .sidekick { margin-bottom: 20px; } /*------------------------------------*\ CATEGORY SECTION \*------------------------------------*/ /* This is to make the footer appears to be lower when content is coming soon */ .cat { min-height: 700px; } @media screen and (max-width: 480px) { .cat { min-height: 400px; } } .cat-item { background-color: #f9f9f9; color: #333; padding: 0px; margin-top: 20px; border: 0px solid #e9e9e9; } .cat-item img { width: 100%; border-radius: } .cat-item-name { font-size: 1.6em; font-weight: 400; margin: 0 0 0em 0; padding: 10px 0px; background-color: #f9f9f9; border-top: 1px solid #c9c9c9; border-left: 0px solid #e9e9e9; border-right: 0px solid #c9c9c9; color: #666; text-align: center; text-transform: uppercase; } .cat-item-desc { font-size: 1.1em; margin: 0 0 0em 0; padding: 10px; background-color: #333; color: #f6f6f6; text-align: center; } .svgicon { height: 400px; color: #666; }

"layout"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"layout" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"layout"
Bootstrap 3.0.0 Snippet by evarevirus