======================================= handy css to solve annoying ui issues ======================================= /* set default font size of 1rem */ html { font-size: 16px; } /* prevent text select */ html, body { user-select: none; } /* add class to change pointer */ .pointer { cursor: pointer; } /* prevent scrolling on touchable elements */ input, select, textarea, button { touch-action: none; } /* always show scrollbars */ html, body, select, textarea { overflow: scroll; } /* prevent page scrolling when a scrolled element reaches its boundary */ html, select, select, textarea { overscroll-behavior: contain; } /* adding a font */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: url('/fonts/open-sans-v17-latin-300.eot'); /* IE9 Compat Modes */ src: local('Open Sans Light'), local('OpenSans-Light'), url('/fonts/open-sans-v17-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('/fonts/open-sans-v17-latin-300.woff2') format('woff2'), /* Super Modern Browsers */ url('/fonts/open-sans-v17-latin-300.woff') format('woff'), /* Modern Browsers */ url('/fonts/open-sans-v17-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */ url('/fonts/open-sans-v17-latin-300.svg#OpenSans') format('svg'); /* Legacy iOS */ } /* bootstrap */ /* square corners everywhere */ /* pro tip: use jquery to define css and vendor prefixes are handled automatically... $('*').css('border-radius', '0 !important'); */ * { -webkit-border-radius: 0 !important; -moz-border-radius: 0 !important; border-radius: 0 !important; } /* remove bootstrap ugly blue highlight on input elements */ input, input:focus, input:active, textarea, textarea:focus, textarea:active, button, button:focus, button:active, select, select:focus, select:active, .form-control, .form-control:focus, .form-control:active, .form-select, .form-select:focus, .form-select:active, .form-check-input, .form-check-input:focus, .form-check-input:active, .btn, .btn:focus, .btn:active { outline: none !important; box-shadow: none !important; text-decoration: none !important; } /* show dropdown menu on hover */ .dropdown:hover > .dropdown-menu { display: block; } /* prevent pointer interaction on dropdown menu */ .dropdown > .dropdown-toggle:active { pointer-events: none; } /* enable dropdown menu to scroll */ .dropdown-menu { max-height: 90vh; overflow-y: auto; } /* add class to allow table columns to wrap */ td.wrap { white-space: normal; } /* bootstrap useful classes (css & js) */ text-nowrap // prevent text from wrapping text-wrap // allow text to wrap text-break // allow long text strings to wrap text-truncate // truncate text in an element and show ellipsis text-uppercase // uppercase text text-lowercase // lowercase text text-capitalize // capitalize the first letter of each word clear-fix // clear floated elements

fixed-top // fix an element to the top of the viewport fixed-bottom // fix an element to the bottom of the viewport sticky-top // prevent an element from scrolling above the top of the viewport sticky-bottom // prevent an element from scrolling below the bottom of the viewport stretched link // extend a link to its containing block visible // element takes up space and is invisiblee invisible // element is visible as normal d-block // element is displayed as normal d-none // element is not displayed and takes up no space z-* // -1 through 3 to control z-index of element /* bootstrap popular layout with fixed navbar, sticky footer, and scrollspy */

target 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

target 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

target 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.