Last active
August 29, 2015 14:22
-
-
Save jonathanhculver/31e4e12e4b473c2e0c20 to your computer and use it in GitHub Desktop.
Front End Onboarding// source http://jsbin.com/piyuze
This file contains 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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <script src="https://ajax.googleapis.com/ajax/libs/prototype/1/prototype.js"></script> | |
| <meta charset="utf-8"> | |
| <title>Front End Onboarding</title> | |
| <script type="text/javascript"> | |
| document.observe("dom:loaded", function() { | |
| nxj.frontend.init(); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div id="frontendContainer"> | |
| <div class="frame_12 os"> | |
| <div class="wall pad_10"> | |
| <div class="grid_8 push_4 margin_b_20"> | |
| <div class="tile wall" data-grid="8"></div> | |
| </div> | |
| <div class="grid_clear"></div> | |
| <div class="grid_4"> | |
| <div class="tile wall" data-grid="4"></div> | |
| </div> | |
| <div class="grid_8"> | |
| <div class="tile wall" data-grid="8"></div> | |
| </div> | |
| <div class="grid_clear"></div> | |
| <div class="grid_8 margin_t_20"> | |
| <div class="tile wall" style="height: 69px" data-grid="8"></div> | |
| </div> | |
| <div class="wall floatRight margin_t_20"> | |
| <div class="grid_4 margin_b_10"> | |
| <div class="tile wall" data-grid="4"></div> | |
| </div> | |
| <div class="grid_clear"></div> | |
| <div class="grid_4"> | |
| <div class="tile wall" data-grid="4"></div> | |
| </div> | |
| </div> | |
| <div class="grid_clear"></div> | |
| <div class="grid_12 margin_t_20"> | |
| <div class="tile wall" data-grid="12"></div> | |
| </div> | |
| <div class="grid_clear"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains 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
| .grid_1, | |
| .grid_2, | |
| .grid_3, | |
| .grid_4, | |
| .grid_5, | |
| .grid_6, | |
| .grid_7, | |
| .grid_8, | |
| .grid_9, | |
| .grid_10, | |
| .grid_11, | |
| .grid_12 { | |
| background-color: #E6E2EB; | |
| outline: 1px solid #C9C0D5; | |
| } | |
| .frame_12 { | |
| outline: 1px solid #C9C0D5; | |
| } | |
| .tile { | |
| padding: 10px 0px; | |
| text-align: center; | |
| width: 100%; | |
| } | |
| #frontendContainer { | |
| color: #333; | |
| } | |
| /* Global style sheet */ | |
| /* Table of content | |
| * FONTS | |
| * COLORS | |
| * HEADERS | |
| * GRID | |
| */ | |
| /* $FONTS */ | |
| @font-face { | |
| font-family:'GillSans'; | |
| font-style:normal; | |
| font-weight:normal; | |
| src: url('/static/css/GillSans/gillsans.eot'); | |
| src: url('/static/css/GillSans/gillsans.eot?#iefix') format('embedded-opentype') | |
| ,url('/static/css/GillSans/gillsans.woff') format('woff') | |
| ,url('/static/css/GillSans/gillsans.ttf') format('truetype') | |
| ,url('/static/css/GillSans/gillsans.svg#webfont') format('svg'); | |
| } | |
| @font-face { | |
| font-family:'GillSansBold'; | |
| font-style:normal; | |
| font-weight:bold; | |
| src: url('/static/css/GillSans/gillsansb.eot'); | |
| src: url('/static/css/GillSans/gillsansb.eot?#iefix') format('embedded-opentype') | |
| ,url('/static/css/GillSans/gillsansb.woff') format('woff') | |
| ,url('/static/css/GillSans/gillsansb.ttf') format('truetype') | |
| ,url('/static/css/GillSans/gillsansb.svg#webfont') format('svg'); | |
| } | |
| @font-face{ | |
| font-family:'OpenSans'; | |
| font-style:normal; | |
| font-variant:normal; | |
| font-weight:normal; | |
| src:url('/static/css/OpenSans/OpenSans-Regular-webfont.eot'); | |
| src:url('/static/css/OpenSans/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/OpenSans/OpenSans-Regular-webfont.woff') format('woff'), | |
| url('/static/css/OpenSans/OpenSans-Regular-webfont.ttf') format('truetype'), | |
| url('/static/css/OpenSans/OpenSans-Regular-webfont.svg#webfont') format('svg'); | |
| } | |
| @font-face{ | |
| font-family:'OpenSansLight'; | |
| font-style:normal; | |
| font-variant:normal; | |
| font-weight:normal; | |
| src:url('/static/css/OpenSans/OpenSans-Light-webfont.eot'); | |
| src:url('/static/css/OpenSans/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/OpenSans/OpenSans-Light-webfont.woff') format('woff'), | |
| url('/static/css/OpenSans/OpenSans-Light-webfont.ttf') format('truetype'), | |
| url('/static/css/OpenSans/OpenSans-Light-webfont.svg#webfont') format('svg'); | |
| } | |
| @font-face{ | |
| font-family:'OpenSansBold'; | |
| font-style:normal; | |
| font-variant:normal; | |
| font-weight:normal; | |
| src:url('/static/css/OpenSans/OpenSans-Bold-webfont.eot'); | |
| src:url('/static/css/OpenSans/OpenSans-Bold-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/OpenSans/OpenSans-Bold-webfont.woff') format('woff'), | |
| url('/static/css/OpenSans/OpenSans-Bold-webfont.ttf') format('truetype'), | |
| url('/static/css/OpenSans/OpenSans-Bold-webfont.svg#webfont') format('svg'); | |
| } | |
| @font-face { | |
| font-family: 'RobotoLight'; | |
| font-style:normal; | |
| font-variant:normal; | |
| font-weight:normal; | |
| src:url('/static/css/Roboto/Roboto-Light-webfont.eot'); | |
| src:url('/static/css/Roboto/Roboto-Light-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/Roboto/Roboto-Light-webfont.woff') format('woff'), | |
| url('/static/css/Roboto/Roboto-Light-webfont.ttf') format('truetype'), | |
| url('/static/css/Roboto/Roboto-Light-webfont.svg#webfont') format('svg'); | |
| } | |
| @font-face{ | |
| font-family:'Roboto'; | |
| font-style:normal; | |
| font-variant:normal; | |
| font-weight:normal; | |
| src:url('/static/css/Roboto/Roboto-Regular-webfont.eot'); | |
| src:url('/static/css/Roboto/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/Roboto/Roboto-Regular-webfont.woff') format('woff'), | |
| url('/static/css/Roboto/Roboto-Regular-webfont.ttf') format('truetype'), | |
| url('/static/css/Roboto/Roboto-Regular-webfont.svg#webfont') format('svg'); | |
| } | |
| @font-face{ | |
| font-family:'RobotoBold'; | |
| font-style:normal; | |
| font-variant:normal; | |
| font-weight:normal; | |
| src:url('/static/css/Roboto/Roboto-Bold-webfont.eot'); | |
| src:url('/static/css/Roboto/Roboto-Bold-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/Roboto/Roboto-Bold-webfont.woff') format('woff'), | |
| url('/static/css/Roboto/Roboto-Bold-webfont.ttf') format('truetype'), | |
| url('/static/css/Roboto/Roboto-Bold-webfont.svg#webfont') format('svg'); | |
| } | |
| /* NOTE: Currently trying out Novecento Book as the definition for both Novecento and NovecentoBook for consistency.*/ | |
| /* Eventually we should remove the definition of one and pick a name, but for now this shouldn't break anything. */ | |
| @font-face { | |
| font-family:'Novecento'; | |
| src:url('/static/css/Novecento/novecentowide-book-webfont.eot'); | |
| src:url('/static/css/Novecento/novecentowide-book-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/Novecento/novecentowide-book-webfont.woff') format('woff'), | |
| url('/static/css/Novecento/novecentowide-book-webfont.ttf') format('truetype'), | |
| url('/static/css/Novecento/novecentowide-book-webfont.svg#novecento_wide_lightregular') format('svg'); | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| @font-face { | |
| font-family:'NovecentoBook'; | |
| src:url('/static/css/Novecento/novecentowide-book-webfont.eot'); | |
| src:url('/static/css/Novecento/novecentowide-book-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/Novecento/novecentowide-book-webfont.woff') format('woff'), | |
| url('/static/css/Novecento/novecentowide-book-webfont.ttf') format('truetype'), | |
| url('/static/css/Novecento/novecentowide-book-webfont.svg#novecento_wide_lightregular') format('svg'); | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| @font-face { | |
| font-family:'NovecentoLight'; | |
| src:url('/static/css/Novecento/novecentowide-light-webfont.eot'); | |
| src:url('/static/css/Novecento/novecentowide-light-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/Novecento/novecentowide-light-webfont.woff') format('woff'), | |
| url('/static/css/Novecento/novecentowide-light-webfont.ttf') format('truetype'), | |
| url('/static/css/Novecento/novecentowide-light-webfont.svg#novecento_wide_lightregular') format('svg'); | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| @font-face { | |
| font-family:'NovecentoBold'; | |
| src:url('/static/css/Novecento/novecentowide-bold-webfont.eot'); | |
| src:url('/static/css/Novecento/novecentowide-bold-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/Novecento/novecentowide-bold-webfont.woff') format('woff'), | |
| url('/static/css/Novecento/novecentowide-bold-webfont.ttf') format('truetype'), | |
| url('/static/css/Novecento/novecentowide-bold-webfont.svg#novecento_wide_boldregular') format('svg'); | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| @font-face { | |
| font-family: 'SourceSansLight'; | |
| src: url('/static/css/SourceSansNew/source_sans_light.eot'); | |
| src: url('/static/css/SourceSansNew/source_sans_light.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/SourceSansNew/source_sans_light.woff') format('woff'); | |
| } | |
| @font-face { | |
| font-family: 'SourceSans'; | |
| src: url('/static/css/SourceSansNew/source_sans_regular.eot'); | |
| src: url('/static/css/SourceSansNew/source_sans_regular.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/SourceSansNew/source_sans_regular.woff') format('woff'); | |
| } | |
| @font-face { | |
| font-family: 'SourceSansBold'; | |
| src: url('/static/css/SourceSansNew/source_sans_semibold.eot'); | |
| src: url('/static/css/SourceSansNew/source_sans_semibold.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/SourceSansNew/source_sans_semibold.woff') format('woff'); | |
| } | |
| @font-face { | |
| font-family: 'SourceSansItalic'; | |
| src: url('/static/css/SourceSansNew/source_sans_regular_italic.eot'); | |
| src: url('/static/css/SourceSansNew/source_sans_regular_italic.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/SourceSansNew/source_sans_regular_italic.woff') format('woff'); | |
| } | |
| @font-face { | |
| font-family: 'BebasNeue'; | |
| font-style: normal; | |
| font-weight: normal; | |
| src: url('/static/css/BebasNeue/BebasNeue-webfont.eot'); | |
| src: url('/static/css/BebasNeue/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/BebasNeue/BebasNeue-webfont.woff') format('woff'), | |
| url('/static/css/BebasNeue/BebasNeue-webfont.ttf') format('truetype'), | |
| url('/static/css/BebasNeue/BebasNeue-webfont.svg#BebasNeueRegular') format('svg'); | |
| } | |
| @font-face { | |
| font-family: 'Mohave'; | |
| font-style: normal; | |
| font-weight: normal; | |
| src: url('/static/css/MohaveTypeface/mohave-webfont.eot'); | |
| src: url('/static/css/MohaveTypeface/mohave-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/MohaveTypeface/Mohave.otf') format('truetype'); | |
| } | |
| @font-face { | |
| font-family: 'MohaveBold'; | |
| font-style: normal; | |
| font-weight: bold; | |
| src: url('/static/css/MohaveTypeface/mohave-webfont.eot'); | |
| src: url('/static/css/MohaveTypeface/mohave-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/MohaveTypeface/Mohave.otf') format('truetype'); | |
| } | |
| @font-face { | |
| font-family: 'MohaveBoldNew'; | |
| font-style: normal; | |
| font-weight: bold; | |
| src: url('/static/css/MohaveTypeface/mohave-bold-webfont.eot'); | |
| src: url('/static/css/MohaveTypeface/mohave-bold-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/MohaveTypeface/Mohave-Bold.otf') format('truetype'); | |
| } | |
| @font-face { | |
| font-family:'NotoSerif'; | |
| src:url('/static/css/NotoSerif/NotoSerif-Regular-webfont.eot'); | |
| src:url('/static/css/NotoSerif/NotoSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/NotoSerif/NotoSerif-Regular-webfont.woff') format('woff'), | |
| url('/static/css/NotoSerif/NotoSerif-Regular-webfont.ttf') format('truetype'), | |
| url('/static/css/NotoSerif/NotoSerif-Regular-webfont.svg#NotoSerifRegular') format('svg'); | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| @font-face { | |
| font-family:'NotoSerifItalic'; | |
| src:url('/static/css/NotoSerif/NotoSerif-Italic-webfont.eot'); | |
| src:url('/static/css/NotoSerif/NotoSerif-Italic-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/NotoSerif/NotoSerif-Italic-webfont.woff') format('woff'), | |
| url('/static/css/NotoSerif/NotoSerif-Italic-webfont.ttf') format('truetype'), | |
| url('/static/css/NotoSerif/NotoSerif-Italic-webfont.svg#NotoSerif_Italicregular') format('svg'); | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| @font-face { | |
| font-family:'NotoSerifBoldItalic'; | |
| src:url('/static/css/NotoSerif/NotoSerif-BoldItalic-webfont.eot'); | |
| src:url('/static/css/NotoSerif/NotoSerif-BoldItalic-webfont.eot?#iefix') format('embedded-opentype'), | |
| url('/static/css/NotoSerif/NotoSerif-BoldItalic-webfont.woff') format('woff'), | |
| url('/static/css/NotoSerif/NotoSerif-BoldItalic-webfont.ttf') format('truetype'), | |
| url('/static/css/NotoSerif/NotoSerif-BoldItalic-webfont.svg#NotoSerif_BoldItalicregular') format('svg'); | |
| font-weight:normal; | |
| font-style:normal; | |
| } | |
| /* anti aliased fonts for chrome */ | |
| /* Read more at http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/#MQ0KgI6PIcCzFpO8.99*/ | |
| @media screen and (-webkit-min-device-pixel-ratio:0) { | |
| @font-face { | |
| font-family: 'Novecento'; | |
| src: url('/static/css/Novecento/novecentowide-book-webfont.svg#novecento_wide_bookregular') format('svg'); | |
| } | |
| @font-face { | |
| font-family: 'NovecentoBook'; | |
| src: url('/static/css/Novecento/novecentowide-book-webfont.svg#novecento_wide_bookregular') format('svg'); | |
| } | |
| @font-face { | |
| font-family: 'NovecentoLight'; | |
| src: url('/static/css/Novecento/novecentowide-light-webfont.svg#novecento_wide_bookregular') format('svg'); | |
| } | |
| @font-face { | |
| font-family: 'NovecentoBold'; | |
| src: url('/static/css/Novecento/novecentowide-bold-webfont.svg#novecento_wide_bookbold') format('svg'); | |
| } | |
| @font-face{ | |
| font-family:'OpenSansBold'; | |
| src: url('/static/css/OpenSans/OpenSans-Bold-webfont.svg#OpenSansBold') format('svg'); | |
| } | |
| @font-face{ | |
| font-family:'RobotoBold'; | |
| src: url('/static/css/Roboto/Roboto-Bold-webfont.svg#RobotoBold') format('svg'); | |
| } | |
| @font-face { | |
| font-family: 'RobotoLight'; | |
| src: url('/static/css/Roboto/Roboto-Light-webfont.svg#RobotoLight') format('svg'); | |
| } | |
| } | |
| /* quick reference classes */ | |
| .os{font-family:'OpenSans', Arial, sans-serif;} | |
| .osLight{font-family:'OpenSansLight', Arial, sans-serif;} | |
| .osBold{font-family:'OpenSansBold', Arial, sans-serif;} | |
| .roboto{font-family:'Roboto', Arial, sans-serif;} | |
| .robotoBold{font-family:'RobotoBold', Arial, sans-serif;} | |
| .robotoLight{font-family:'RobotoLight', Arial, sans-serif;} | |
| .novecento {font-family: 'NovecentoBook', Arial, sans-serif;} | |
| .novecentoLight {font-family: 'NovecentoLight', Arial, sans-serif;} | |
| .novecentoBold {font-family: 'NovecentoBold', Arial, sans-serif;} | |
| .sourceSans {font-family: 'SourceSans', Arial, sans-serif;} | |
| .sourceSansLight {font-family: 'SourceSansLight', Arial, sans-serif;} | |
| .sourceSansBold {font-family: 'SourceSansBold', Arial, sans-serif;font-weight:normal;} | |
| .sourceSansItalic {font-family: 'SourceSansItalic', Arial, sans-serif;} | |
| .notoSerif {font-family: 'NotoSerif', Georgia, sans-serif;} | |
| .notoSerifItalic {font-family: 'NotoSerifItalic', Georgia, sans-serif;} | |
| .notoSerifBoldItalic {font-family: 'NotoSerifBoldItalic', Georgia, sans-serif;} | |
| .mohave {font-family: 'Mohave', Arial, sans-serif;font-weight:normal;text-transform: uppercase;} | |
| .mohaveBold {font-family: 'MohaveBoldNew', Arial, sans-serif;font-weight:normal;text-transform: uppercase;} | |
| /* $COLORS */ | |
| /* ^orange */ | |
| .g_orange { /* NOTE: not used */ | |
| color:#F15E22; | |
| } | |
| /* ^blue - NOTE: used only on the dashboard */ | |
| .g_base_link { | |
| color:#1758ce; | |
| } | |
| .g_alt_link { | |
| color:#1D6ECE; | |
| } | |
| .g_light_blue { | |
| color:#1F6CE0; | |
| } | |
| /* ^gray - NOTE: used sporadially */ | |
| .g_light_gray { | |
| color:#999999; | |
| } | |
| .g_mid_gray { | |
| color:#777777; | |
| } | |
| .g_dark_gray { | |
| color:#222222; | |
| } | |
| .g_outline_gray { | |
| color:#D1D1D1; | |
| } | |
| /* ^green - NOTE: used only on the dashboard */ | |
| .g_inpath_green { | |
| color:#7AB142; | |
| } | |
| /* $HEADERS - NOTE: not used */ | |
| .g_h1, .g_h2, .g_h3 { | |
| font-family:'GillSansBold', Arial, sans-serif; | |
| font-weight:bold; | |
| text-transform:uppercase; | |
| } | |
| .g_h4, .g_h5, .g_h6 { | |
| font-family:'GillSans', Arial, sans-serif; | |
| text-transform:uppercase; | |
| } | |
| .g_h1 { font-size:32px; } | |
| .g_h2 { font-size:28px; } | |
| .g_h3 { font-size:24px; } | |
| .g_h4 { font-size:18px; } | |
| .g_h5 { font-size:14px; } | |
| .g_h6 { font-size:12px; } | |
| /* NOTE: currently in use*/ | |
| .h1 { font-size:32px; } | |
| .h2 { font-size:28px; } | |
| .h3 { font-size:24px; } | |
| .h4 { font-size:18px; } | |
| .h5 { font-size:16px; } | |
| .h6 { font-size:13px; } | |
| .tiny{ font-size:10px; } | |
| .align_l{ text-align:left; } | |
| .align_c{ text-align:center; } | |
| .align_r{ text-align:right; } | |
| /* $PADDING */ | |
| .pad_0 {padding:0;} | |
| .pad_4 {padding:4px;} | |
| .pad_5 {padding:5px;} | |
| .pad_6 {padding:6px;} | |
| .pad_8 {padding:8px;} | |
| .pad_10 {padding:10px;} | |
| .pad_15 {padding:15px;} | |
| .pad_20 {padding:20px;} | |
| .pad_30 {padding:30px;} | |
| .pad_t{ padding-top:10px !important; } | |
| .pad_l{ padding-left:10px !important; } | |
| .pad_r{ padding-right:10px !important; } | |
| .pad_b{ padding-bottom:10px !important; } | |
| .pad_t_5{ padding-top:5px !important; } | |
| .pad_l_5{ padding-left:5px !important; } | |
| .pad_r_5{ padding-right:5px !important; } | |
| .pad_b_5{ padding-bottom:5px !important; } | |
| .pad_t_15{ padding-top:15px !important; } | |
| .pad_l_15{ padding-left:15px !important; } | |
| .pad_r_15{ padding-right:15px !important; } | |
| .pad_b_15{ padding-bottom:15px !important; } | |
| .pad_t_20{ padding-top:20px !important; } | |
| .pad_l_20{ padding-left:20px !important; } | |
| .pad_r_20{ padding-right:20px !important; } | |
| .pad_b_20{ padding-bottom:20px !important; } | |
| .pad_t_30{ padding-top:30px !important; } | |
| .pad_l_30{ padding-left:30px !important; } | |
| .pad_r_30{ padding-right:30px !important; } | |
| .pad_b_30{ padding-bottom:30px !important; } | |
| .pad_t_0{ padding-top:0 !important; } | |
| .pad_l_0{ padding-left:0 !important; } | |
| .pad_r_0{ padding-right:0 !important; } | |
| .pad_b_0{ padding-bottom:0 !important; } | |
| /* $MARGINS */ | |
| .margin_t{ margin-top:10px !important; } | |
| .margin_l{ margin-left:10px !important; } | |
| .margin_r{ margin-right:10px !important; } | |
| .margin_b{ margin-bottom:10px !important; } | |
| .margin_10{ margin:10px; } | |
| .margin_t_10{ margin-top:10px !important; } | |
| .margin_l_10{ margin-left:10px !important; } | |
| .margin_r_10{ margin-right:10px !important; } | |
| .margin_b_10{ margin-bottom:10px !important; } | |
| .margin_15{ margin:15px; } | |
| .margin_t_15{ margin-top:15px !important; } | |
| .margin_l_15{ margin-left:15px !important; } | |
| .margin_r_15{ margin-right:15px !important; } | |
| .margin_b_15{ margin-bottom:15px !important; } | |
| .margin_20{ margin:20px; } | |
| .margin_t_20{ margin-top:20px !important; } | |
| .margin_l_20{ margin-left:20px !important; } | |
| .margin_r_20{ margin-right:20px !important; } | |
| .margin_b_20{ margin-bottom:20px !important; } | |
| .margin_30{ margin:30px; } | |
| .margin_t_30{ margin-top:30px !important; } | |
| .margin_l_30{ margin-left:30px !important; } | |
| .margin_r_30{ margin-right:30px !important; } | |
| .margin_b_30{ margin-bottom:30px !important; } | |
| .margin_40{ margin:40px; } | |
| .margin_t_40{ margin-top:40px !important; } | |
| .margin_l_40{ margin-left:40px !important; } | |
| .margin_r_40{ margin-right:40px !important; } | |
| .margin_b_40{ margin-bottom:40px !important; } | |
| .margin_50{ margin:50px; } | |
| .margin_t_50{ margin-top:50px !important; } | |
| .margin_l_50{ margin-left:50px !important; } | |
| .margin_r_50{ margin-right:50px !important; } | |
| .margin_b_50{ margin-bottom:50px !important; } | |
| .margin_5{ margin:5px; } | |
| .margin_t_5{ margin-top:5px !important; } | |
| .margin_l_5{ margin-left:5px !important; } | |
| .margin_r_5{ margin-right:5px !important; } | |
| .margin_b_5{ margin-bottom:5px !important; } | |
| .margin_3{ margin:3px; } | |
| .margin_t_3{ margin-top:3px !important; } | |
| .margin_l_3{ margin-left:3px !important; } | |
| .margin_r_3{ margin-right:3px !important; } | |
| .margin_b_3{ margin-bottom:3px !important; } | |
| .margin_0{ margin:0px; } | |
| .margin_t_0{ margin-top:0 !important; } | |
| .margin_l_0{ margin-left:0 !important; } | |
| .margin_r_0{ margin-right:0 !important; } | |
| .margin_b_0{ margin-bottom:0 !important; } | |
| /* FLOATS */ | |
| /* Pulled from sitestyles*/ | |
| .floatRight {float: right;} | |
| .floatLeft {float: left;} | |
| /* $DIVIDER | |
| * Use as clear for floats or add inline height for vertical spacer. | |
| * */ | |
| .g_divider { | |
| width: 100%; | |
| font-size: 0px; | |
| line-height: 0px; | |
| overflow:hidden; | |
| clear: both; | |
| } | |
| /* | |
| $GRID | |
| Next Jump Grid - based on 960 Grid System ~ Core CSS. | |
| Learn more ~ https://wiki.nextjump.com/wiki/index.php/CSS_Grid | |
| */ | |
| /* ^frame - Outer wrapper that defines number of columns */ | |
| .frame_12 { | |
| margin-left: auto; | |
| margin-right: auto; | |
| width: 960px; | |
| } | |
| /* ^grid >> global */ | |
| .grid_1, | |
| .grid_2, | |
| .grid_3, | |
| .grid_4, | |
| .grid_5, | |
| .grid_6, | |
| .grid_7, | |
| .grid_8, | |
| .grid_9, | |
| .grid_10, | |
| .grid_11, | |
| .grid_12 { | |
| display: inline; | |
| float: left; | |
| margin-left: 10px; | |
| margin-right: 10px; | |
| } | |
| .wall { | |
| display: inline; | |
| float: left; | |
| margin: 0; | |
| } | |
| .push_1, .pull_1, | |
| .push_2, .pull_2, | |
| .push_3, .pull_3, | |
| .push_4, .pull_4, | |
| .push_5, .pull_5, | |
| .push_6, .pull_6, | |
| .push_7, .pull_7, | |
| .push_8, .pull_8, | |
| .push_9, .pull_9, | |
| .push_10, .pull_10, | |
| .push_11, .pull_11 { | |
| position: relative; | |
| } | |
| /* grid >> children (^alpha ~ first, ^omega ~ last) */ | |
| .alpha {margin-left: 0;} | |
| .omega { margin-right: 0;} | |
| /* ^grid >> 12 columns */ | |
| .frame_12 .grid_1 {width: 60px;} | |
| .frame_12 .grid_2 {width: 140px;} | |
| .frame_12 .grid_3 {width: 220px;} | |
| .frame_12 .grid_4 {width: 300px;} | |
| .frame_12 .grid_5 {width: 380px;} | |
| .frame_12 .grid_6 {width: 460px;} | |
| .frame_12 .grid_7 {width: 540px;} | |
| .frame_12 .grid_8 {width: 620px;} | |
| .frame_12 .grid_9 {width: 700px;} | |
| .frame_12 .grid_10 {width: 780px;} | |
| .frame_12 .grid_11 {width: 860px;} | |
| .frame_12 .grid_12 {width: 940px;} | |
| /* ^push space >> 12 columns */ | |
| .frame_12 .push_half {left: 40px;} | |
| .frame_12 .push_1 {left: 80px;} | |
| .frame_12 .push_2 {left: 160px;} | |
| .frame_12 .push_3 {left: 240px;} | |
| .frame_12 .push_4 {left: 320px;} | |
| .frame_12 .push_5 {left: 400px;} | |
| .frame_12 .push_6 {left: 480px;} | |
| .frame_12 .push_7 {left: 560px;} | |
| .frame_12 .push_8 {left: 640px;} | |
| .frame_12 .push_9 {left: 720px;} | |
| .frame_12 .push_10 {left: 800px;} | |
| .frame_12 .push_11 {left: 880px;} | |
| /* ^pull space >> 12 columns */ | |
| .frame_12 .pull_half {left: -40px;} | |
| .frame_12 .pull_1 {left: -80px;} | |
| .frame_12 .pull_2 {left: -160px;} | |
| .frame_12 .pull_3 {left: -240px;} | |
| .frame_12 .pull_4 {left: -320px;} | |
| .frame_12 .pull_5 {left: -400px;} | |
| .frame_12 .pull_6 {left: -480px;} | |
| .frame_12 .pull_7 {left: -560px;} | |
| .frame_12 .pull_8 {left: -640px;} | |
| .frame_12 .pull_9 {left: -720px;} | |
| .frame_12 .pull_10 {left: -800px;} | |
| .frame_12 .pull_11 {left: -880px;} | |
| /* ^prefix space >> 12 columns */ | |
| .frame_12 .prefix_half {padding-left: 40px;} | |
| .frame_12 .prefix_1 {padding-left: 80px;} | |
| .frame_12 .prefix_2 {padding-left: 160px;} | |
| .frame_12 .prefix_3 {padding-left: 240px;} | |
| .frame_12 .prefix_4 {padding-left: 320px;} | |
| .frame_12 .prefix_5 {padding-left: 400px;} | |
| .frame_12 .prefix_6 {padding-left: 480px;} | |
| .frame_12 .prefix_7 {padding-left: 560px;} | |
| .frame_12 .prefix_8 {padding-left: 640px;} | |
| .frame_12 .prefix_9 {padding-left: 720px;} | |
| .frame_12 .prefix_10 {padding-left: 800px;} | |
| .frame_12 .prefix_11 {padding-left: 880px;} | |
| /* ^suffix space >> 12 columns */ | |
| .frame_12 .suffix_half {padding-right: 40px;} | |
| .frame_12 .suffix_1 {padding-right: 80px;} | |
| .frame_12 .suffix_2 {padding-right: 160px;} | |
| .frame_12 .suffix_3 {padding-right: 240px;} | |
| .frame_12 .suffix_4 {padding-right: 320px;} | |
| .frame_12 .suffix_5 {padding-right: 400px;} | |
| .frame_12 .suffix_6 {padding-right: 480px;} | |
| .frame_12 .suffix_7 {padding-right: 560px;} | |
| .frame_12 .suffix_8 {padding-right: 640px;} | |
| .frame_12 .suffix_9 {padding-right: 720px;} | |
| .frame_12 .suffix_10 {padding-right: 800px;} | |
| .frame_12 .suffix_11 {padding-right: 880px;} | |
| /* ^clear floated elements */ | |
| .grid_clear { | |
| clear: both; | |
| display: block; | |
| overflow: hidden; | |
| visibility: hidden; | |
| width: 0; | |
| height: 0; | |
| } | |
| .grid_clearfix:before, | |
| .grid_clearfix:after, | |
| .frame_12:before, | |
| .frame_12:after { | |
| content: '.'; | |
| display: block; | |
| overflow: hidden; | |
| visibility: hidden; | |
| font-size: 0; | |
| line-height: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .grid_clearfix:after, | |
| .frame_12:after { | |
| clear: both; | |
| } | |
| /* | |
| The following zoom:1 rule is specifically for IE6 + IE7. | |
| Move to separate stylesheet if invalid CSS is a problem. | |
| */ | |
| .grid_clearfix, | |
| .frame_12 { | |
| zoom: 1; | |
| } | |
| /* Container specific code. Generic padding and margins go here. */ | |
| .grid_container { | |
| position: relative; | |
| overflow: hidden; | |
| float: left; | |
| } | |
| .hidden { | |
| display: none!important; | |
| } |
This file contains 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
| var nxj = window.nxj || {}; | |
| nxj.frontend = (function(){ | |
| var self = {}, | |
| tiles = $$('.tile'); | |
| self.init = function() { | |
| populateTiles(); | |
| }; | |
| var populateTiles = function() { | |
| for(var i = 0; i<tiles.length; i++) { | |
| var gridLen = tiles[i].getAttribute('data-grid'); | |
| tiles[i].innerHTML = "grid_"+gridLen; | |
| } | |
| }; | |
| return self; | |
| })(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment