diff --git a/README.md b/README.md index 1176505..ecf5b81 100644 --- a/README.md +++ b/README.md @@ -3,12 +3,12 @@ A simple, lightweight and modular CSS front-end framework for styling websites q # Documentation -View the Getting Started Guide at http://blastpad.co/ui/release/beta/documentation/ +View the Getting Started Guide at http://blastpad.co/ui/documentation/ # Examples -View the examples at http://blastpad.co/ui/release/beta/example/ +View the examples at http://blastpad.co/ui/example/ diff --git a/asset/module/css/blastpad_ui.css b/asset/module/css/blastpad_ui.css index d41e315..ca731d7 100644 --- a/asset/module/css/blastpad_ui.css +++ b/asset/module/css/blastpad_ui.css @@ -440,41 +440,75 @@ body { } /* Headings */ -h1 { font-size: 2em;} -h2 { font-size: 1.8em;} -h3 { font-size: 1.6em;} -h4 { font-size: 1.4em;} -h5 { font-size: 1.2em;} -h6 { font-size: 1em;} +h1 { + font-size: 2.4em; + line-height: 1.2em; +} + +h2 { + font-size: 1.8em; + line-height: 1.2em; +} + +h3 { + font-size: 1.2em; + line-height: 1.8em; +} + +h4 { + font-size: 1em; + line-height: 1.8em; +} + +h5 { + font-size: 0.9em; + line-height: 1.8em; +} + +h6 { + font-size: 0.8em; + line-height: 1.8em; +} + +/* Paragraph */ +p { + line-height: 1.8em; +} /* Font size. */ .bp_extra_extra_small_text { - font-size: 0.7em; + font-size: 0.6em; + line-height: 1.8em; } .bp_extra_small_text { - font-size: 0.8em; + font-size: 0.7em; + line-height: 1.8em; } .bp_small_text { font-size: 0.9em; - line-height: 0.9em; + line-height: 1.8em; } .bp_medium_text { font-size: 1em; + line-height: 1.8em; } .bp_large_text { - font-size: 2em; + font-size: 1.8em; + line-height: 1.2em; } .bp_extra_large_text { - font-size: 3em; + font-size: 2.4em; + line-height: 1.2em; } .bp_extra_extra_large_text { - font-size: 4em; + font-size: 4.8em; + line-height: 1.2em; } /* Flashcard */ diff --git a/asset/module/css/blastpad_ui.min.css b/asset/module/css/blastpad_ui.min.css index f343d22..33060c1 100644 --- a/asset/module/css/blastpad_ui.min.css +++ b/asset/module/css/blastpad_ui.min.css @@ -1 +1 @@ -/* Reset */html {box-sizing: border-box;-moz-osx-font-smoothing: grayscale;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;}*, *:before, *:after {box-sizing: inherit;}body {font-size: 16px;margin: 0; }h1,h2,h3,h4,h5,h6,p,blockquote,figure,ol,ul {margin: 0;padding: 0;}h1,h2,h3,h4,h5,h6, {font-size: inherit;}a {transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;}img {border: 0;height: auto;max-width: 100%;}/* Defines the new HTML5 elements for older browsers. */article, aside, figure, footer, header, hgroup, main, menu, nav, section { display: block; }/* General default */main {clear: both;margin: auto;max-width: 100%;}hr {border: 0;background: #efefef;height: 0.1em;}code {background-color: #fefefe;border: 0.1em solid #efefef;overflow: auto;padding: 0.1em;white-space: pre;}p {line-height: 2em;}a:link, a:visited, a:active {text-decoration: none;}/* Footer */footer {width: 100%;}/* General extra */.bp_message {background-color: #ffffc8;border: 0.1em solid #ffff84;margin: auto;text-align: center;}.bp_brand {font-size: 3em;}.bp_logo {font-size: 2em;}.bp_snippet {background-color: #fcfcfc;display: block;font-size: 1em;margin: 1em;padding: 0.5em;width: 100%;}.bp_resizable {overflow: auto;resize: both;}.bp_footer {margin: auto;width: 100%;}/* Position */.bp_relative{position: relative;}/* Visibility */.bp_hidden {visibility: hidden;}.bp_visible {visibility: visible;}/* Space */.bp_small_break {height: 1em;}.bp_medium_break {height: 2em;}.bp_large_break {height: 5em;}/* Rounded corner */.bp_rounded_corner {border-radius: 5px;}/* Grid default */html {height: 100%;}body {height: 100%;width: 100%;}main {height: 100%;width: 100%;}section {/*height: 100%;*/width: 100%;/*padding: 1em;*/}.bp_container {height: 90%;max-width: 100%;margin: auto;position: relative;width: 100%;}/* Grid extra *//* Layout extra */.bp_clear {clear: both;overflow: auto;}/* Position */.bp_top_right {position: absolute;right: 1.5em;}/* Container Size *//* Full */.bp_full {height: auto;min-height: 100%;max-width: 100%;width: 100%;}.bp_full_width {max-width: 100%;width: 100%;}.bp_full_height {height: 100%;min-height: 100%;}/* Panes. */.bp_left_pane {float: left; width: 20%; }.bp_main_pane {}.bp_right_pane {float: right;width: 20%;}/* Fluid width */.bp_fluid {max-width: 100%;}.bp_extra_extra_wide {max-width: 100%;width: 1920px;}.bp_extra_wide {max-width: 1260px;}.bp_wide {max-width: 1080px;}.bp_narrow {max-width: 720px;}.bp_extra_narrow {max-width: 640px;}.bp_extra_extra_narrow {max-width: 320px;}/* Spacing. */.bp_extra_extra_tight {padding: 0;}.bp_extra_tight {padding: 0.25em;}.bp_tight {padding: 0.5em;}.bp_loose {padding: 1em;}.bp_extra_loose {padding: 1.5em;}.bp_extra_extra_loose {padding: 2em;}/* Alignment. */.bp_center {margin: auto;}.bp_left {float: left;width: 50%;}.bp_right {float: left;width: 50%;}/*.bp_middle {height: 50%;left: 50%;max-width: 100%;margin: auto;min-width: 320px;position: absolute;top: 50%;transform: translateY(-50%);width: 50%;}*/.bp_middle {position: relative;top: 50%;transform: translateY(-50%);}/* Border. */.bp_border {border: 0.1em solid #efefef;margin: 0.5em;padding: 0.5em;}.bp_tight_border {border: 0.1em solid #efefef;}/* Scrollbar. */.bp_not_scrollable {position: absolute;top: 0;bottom: 0;z-index: -1;overflow: hidden;}.bp_scrollable {position: absolute;overflow-y: scroll;top: 0;height: 100%;padding-top: 10px;}/* Rows. */.bp_row {}/* Columns. */.bp_column_1 {float: left;width: 100%;}.bp_column_2 {float: left;width: 50%;}.bp_column_3 {float: left;width: 33%;}.bp_column_4 {float: left;width: 25%;}.bp_column_5 {float: left;width: 20%;}.bp_column_6 {float: left;width: 16%;}.bp_column_7 {float: left;width: 14%;}.bp_column_8 {float: left;width: 12%;}.bp_column_9 {float: left;width: 11%;}.bp_column_10 {float: left;width: 10%;}.bp_column_11 {float: left;width: 9%;}.bp_column_12 {float: left;width: 8%;}/* Mobile */@media screen and (max-width: 800px) {.bp_column_1, .bp_column_2, .bp_column_3, .bp_column_4, .bp_column_5, .bp_column_6,.bp_column_7, .bp_column_8, .bp_column_9, .bp_column_10, .bp_column_11, .bp_column_12 {float: none;margin-right: 0;width: auto;}}a {color: inherit;}body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}/* Headings */h1 {font-size: 2em;}h2 {font-size: 1.8em;}h3 {font-size: 1.6em;}h4 {font-size: 1.4em;}h5 {font-size: 1.2em;}h6 {font-size: 1em;}/* Font size. */.bp_extra_extra_small_text {font-size: 0.7em;}.bp_extra_small_text {font-size: 0.8em;}.bp_small_text {font-size: 0.9em;line-height: 0.9em;}.bp_medium_text {font-size: 1em;}.bp_large_text {font-size: 2em;}.bp_extra_large_text {font-size: 3em;}.bp_extra_extra_large_text {font-size: 4em;}/* Flashcard */.bp_flashcard {display: inline-block; height: 60%;font-size: 50em;position: absolute;text-align: center;transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);top: 50%;left: 50%;white-space: nowrap;width: 100%;}/* Font style. */.bp_normal { font-style: normal;}.bp_italic {font-style: italic;}.bp_oblique {font-style: oblique;}.bp_underline {text-decoration: underline;}.bp_bold {font-weight: bold;}/* Justify. */.bp_left_justify {text-align: left;}.bp_right_justify {text-align: right;}.bp_center_justify{text-align: center;}/**/.bp_brand {}/* Colors default *//* Colors extra *//* Text color. */.bp_light_text {color: #ffffff;}.bp_neutral_text {opacity: 0.5;}.bp_dark_text {color: #000000;}/* Colors */.bp_transparent{ background-color: transparent;}.bp_white { background-color: #ffffff;}.bp_magenta { background-color: #ff0097;}.bp_red { background-color: #ff4136;}.bp_orange { background-color: #ff851b;}.bp_yellow { background-color: #ffdc00;}.bp_olive { background-color: #3d9970;}.bp_green { background-color: #2ecc40;}.bp_teal { background-color: #39cccc;}.bp_blue { background-color: #0074d9;}.bp_violet { background-color: #ee82ee;}.bp_purple { background-color: #b10dc9;}.bp_pink { background-color: #ffb6c1;}.bp_brown { background-color: #a05000;}.bp_gray, .bp_grey { background-color: #aaaaaa;}.bp_black { background-color: #000000;}.bp_navy { background-color: #001f3f;}.bp_aqua { background-color: #7fdbff;}.bp_lime { background-color: #01ff70;}.bp_maroon { background-color: #85144b;}.bp_fuchsia { background-color: #f012be;}.bp_silver { background-color: #dddddd;}/* Form default */input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea, select {border: 0.1em solid #efefef;font-size: 1em;margin: 0.5em 0 0 0;padding: 0.8em;width: 100%;}label {font-size: 1em;font-weight: bold;padding: 0.5em;}/* Button */button, input[ type="submit" ], input[ type="button" ] {background-color: #ffffff;border: 0.1em solid #666666;color: #666666;font-size: 1em;font-weight: bold;margin: auto;padding: 0.8em 1em 0.8em 1em;}/* Form extra */.bp_form {padding: 0.5em;}/* Text area */.bp_editor {border: 0.1em solid #cccccc;font-family: "Courier New", Courier, monospace;font-size: 1em;height: 90%;width: 95%;}/* x Close button */.bp_close_small:after {content: "\00D7";font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";}.bp_close:after {content: "\2715";/* Multiplication symbol */font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";position: absolute;right: 0.5em;top: 0.5em;text-decoration: none;}.bp_close_bold:after {content: "\2716";/* Heavy multiplication symbol */font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";position: absolute;right: 0.5em;top: 0.5em;text-decoration: none;}/* Button */.bp_call_to_action {background-color: #f9cc46;border: none;color: #ffffff;font-size: 1.1em;}.bp_pill {border: 0.1em solid #efefef;border-radius: 0;-moz-border-radius: 0;padding-top: 0.5em;padding-bottom: 0.5em;}.bp_tab {border: 0.1em solid #efefef;border-radius: 0;-moz-border-radius: 0;}.bp_cancel {background-color: #f0f0f0;}.bp_disabled {background-color: #f0f0f0;}.bp_gradient_button {background-color: #f7f5f6; background-image: -webkit-gradient( linear, left top, left bottom, from( #f7f5f6 ), to( #dddddd ));background-image: -webkit-linear-gradient( top, #f7f5f6, #dddddd );background-image: -moz-linear-gradient( top, #f7f5f6, #dddddd );background-image: -ms-linear-gradient( top, #f7f5f6, #dddddd );background-image: -o-linear-gradient( top, #f7f5f6, #dddddd );background-image: linear-gradient( to bottom, #f7f5f6, #dddddd );filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#f7f5f6, endcolorstr=#dddddd );border: 0.1em solid #cccccc;-webkit-box-shadow: #feffff 0 0.1em 0.1em;-moz-box-shadow: #feffff 0 0.1em 0.1em; box-shadow: #feffff 0 0.1em 0.1em; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em;border-radius: 0.3em;color: #4a4a4a;display: inline-block;font-weight: bold; padding: 1em; text-decoration: none; text-shadow: 0 0.1em 0 rgba( 255, 255, 255, 1 );}.bp_gradient_button:hover {background-color: #e0e0e0; background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#bdbbbc));background-image: -webkit-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -moz-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -ms-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -o-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: linear-gradient( to bottom, #e0e0e0, #bdbbbc );filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#e0e0e0, endcolorstr=#bdbbbc );border: 0.1em solid #adadad;}.bp_menu_top {float: right;}.bp_nav {background: -webkit-linear-gradient(top, #f8f8f8, #eee);background: -moz-linear-gradient(top, #f8f8f8, #eee);background: linear-gradient(top, #f8f8f8, #eee);float: left;font-size: 0.9em;font-weight: bold;width: 100%;}.bp_menu_toolbar {background: -webkit-linear-gradient(top, #f8f8f8, #eee);background: -moz-linear-gradient(top, #f8f8f8, #eee);background: linear-gradient(top, #f8f8f8, #eee);bottom: 0;padding: 0.25em;width: 100%;}.bp_bar_container {background-color: #ffffff;margin: auto;width: 100%;z-index: 1;}.bp_bar_container a {text-decoration: none;}.bp_bar {margin: auto;width: 100%;}.bp_logo {float: left;}.bp_menu {text-align: right;}.bp_menu ul {list-style: none;}.bp_menu li{display: inline;font-size: 0.9em;margin: 0.5em;}/* Sticky */.bp_sticky_top { position: fixed;}.bp_sticky_bottom {bottom: 0;position: fixed;}/* Bottom bar */.bp_bottom_bar_wrapper {min-height: 100%;position: relative;}.bp_bottom_bar {background-color: #f9f9f9;bottom: 0;display: block;padding: 0.5em;position: fixed;width: 100%;}/* Table rows. */.bp_table_striped > tbody > tr:nth-child(odd) > td, .bp_table_striped > tbody > tr:nth-child(odd) > th {background-color: #ffffff; } .bp_table_striped > tbody > tr:nth-child(even)> td, .bp_table_striped > tbody > tr:nth-child(even)> th {background-color: #D3EE9F; }/* Container default *//* Container extra *//* Box */.bp_panel {border: 0.1em solid #77eeff;}.bp_panel > h1, .bp_panel > h2, .bp_panel > h3,.bp_panel > h4, .bp_panel > h5, .bp_panel > h6 {background-color: #77eeff;} .bp_translucent_box {background-color: rgba( 220, 220, 220, 0.1 );border: solid #efefef 0.1em;margin: 0.1em;padding: 0.5em;padding-top: 1em;padding-bottom: 1em;}/* Shape */.bp_square {height: 10em;padding: 10em;width: 10em;}.bp_small_square {height: 10em;width: 10em;}.bp_medium_square {height: 25em;width: 25em;}.bp_large_square {height: 50em;width: 50em;}.bp_rectangle {height: 200px;/*padding-bottom: 50%;*/width: 50%;}/* Modal */.bp_modal {background-color: #ffffff;display: none;padding: 1em;}/* Sticky bottom button. */.bp_credit a {background-color: #000000;color: #ffffff;font-size: 0.8em;position: absolute;bottom: 0;right: 0;padding: 10px;opacity: .50;}/* Panes. */.bp_pane {background-color: #f9f9f9;overflow: auto;position: relative;resize: both;}.bp_main_pane {overflow: hidden;}.bp_left_pane {height: 93%;padding-bottom: 5em;width: 30%;}.bp_right_pane {height: 93%;padding: 0.3em;width: 30%; }.bp_top_pane {top: 3em;height: 30%;margin: 0.1em;position: fixed;resize: both;width: 100%;}.bp_top_pane_wrapper, .bp_bottom_pane_wrapper {min-height: 100%;position: relative;width: 100%;}.bp_bottom_pane {bottom: 0;height: 30%;margin: 0.1em;position: fixed;width: 100%;}/* Toolbar */.bp_toolbar {background-color: #f9f9f9;display: block;padding: 0.3em;}/* Media extra */.bp_cover {background-size: cover;height: 100%;}/* Image */img.full_screen {height: 100%;position: absolute;text-align: middle;width: 100%;}img.bp_circle {border-radius: 50%;}img.bp_small {height: 10em;width: 10em;}img.bp_medium {height: 20em;width: 20em;}img.bp_large {height: 50em;width: 50em;}/* Video */.bp_video {height: 100%;left: 0;width: 100%;}/* Rounded corners */input, textarea, button, code, form, .bp_message, .bp_border, .bp_tight_border, .bp_content, .bp_panel {border-radius: 0.5em;-moz-border-radius: 0.5em;-webkit-border-radius: 0.5em;} \ No newline at end of file +/* Reset */html {box-sizing: border-box;-moz-osx-font-smoothing: grayscale;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;-webkit-font-smoothing: antialiased;}*, *:before, *:after {box-sizing: inherit;}body {font-size: 16px;margin: 0; }h1,h2,h3,h4,h5,h6,p,blockquote,figure,ol,ul {margin: 0;padding: 0;}h1,h2,h3,h4,h5,h6, {font-size: inherit;}a {transition: .3s;-moz-transition: .3s;-webkit-transition: .3s;}img {border: 0;height: auto;max-width: 100%;}/* Defines the new HTML5 elements for older browsers. */article, aside, figure, footer, header, hgroup, main, menu, nav, section { display: block; }/* General default */main {clear: both;margin: auto;max-width: 100%;}hr {border: 0;background: #efefef;height: 0.1em;}code {background-color: #fefefe;border: 0.1em solid #efefef;overflow: auto;padding: 0.1em;white-space: pre;}p {line-height: 2em;}a:link, a:visited, a:active {text-decoration: none;}/* Footer */footer {width: 100%;}/* General extra */.bp_message {background-color: #ffffc8;border: 0.1em solid #ffff84;margin: auto;text-align: center;}.bp_brand {font-size: 3em;}.bp_logo {font-size: 2em;}.bp_snippet {background-color: #fcfcfc;display: block;font-size: 1em;margin: 1em;padding: 0.5em;width: 100%;}.bp_resizable {overflow: auto;resize: both;}.bp_footer {margin: auto;width: 100%;}/* Position */.bp_relative{position: relative;}/* Visibility */.bp_hidden {visibility: hidden;}.bp_visible {visibility: visible;}/* Space */.bp_small_break {height: 1em;}.bp_medium_break {height: 2em;}.bp_large_break {height: 5em;}/* Rounded corner */.bp_rounded_corner {border-radius: 5px;}/* Grid default */html {height: 100%;}body {height: 100%;width: 100%;}main {height: 100%;width: 100%;}section {/*height: 100%;*/width: 100%;/*padding: 1em;*/}.bp_container {height: 90%;max-width: 100%;margin: auto;position: relative;width: 100%;}/* Grid extra *//* Layout extra */.bp_clear {clear: both;overflow: auto;}/* Position */.bp_top_right {position: absolute;right: 1.5em;}/* Container Size *//* Full */.bp_full {height: auto;min-height: 100%;max-width: 100%;width: 100%;}.bp_full_width {max-width: 100%;width: 100%;}.bp_full_height {height: 100%;min-height: 100%;}/* Panes. */.bp_left_pane {float: left; width: 20%; }.bp_main_pane {}.bp_right_pane {float: right;width: 20%;}/* Fluid width */.bp_fluid {max-width: 100%;}.bp_extra_extra_wide {max-width: 100%;width: 1920px;}.bp_extra_wide {max-width: 1260px;}.bp_wide {max-width: 1080px;}.bp_narrow {max-width: 720px;}.bp_extra_narrow {max-width: 640px;}.bp_extra_extra_narrow {max-width: 320px;}/* Spacing. */.bp_extra_extra_tight {padding: 0;}.bp_extra_tight {padding: 0.25em;}.bp_tight {padding: 0.5em;}.bp_loose {padding: 1em;}.bp_extra_loose {padding: 1.5em;}.bp_extra_extra_loose {padding: 2em;}/* Alignment. */.bp_center {margin: auto;}.bp_left {float: left;width: 50%;}.bp_right {float: left;width: 50%;}/*.bp_middle {height: 50%;left: 50%;max-width: 100%;margin: auto;min-width: 320px;position: absolute;top: 50%;transform: translateY(-50%);width: 50%;}*/.bp_middle {position: relative;top: 50%;transform: translateY(-50%);}/* Border. */.bp_border {border: 0.1em solid #efefef;margin: 0.5em;padding: 0.5em;}.bp_tight_border {border: 0.1em solid #efefef;}/* Scrollbar. */.bp_not_scrollable {position: absolute;top: 0;bottom: 0;z-index: -1;overflow: hidden;}.bp_scrollable {position: absolute;overflow-y: scroll;top: 0;height: 100%;padding-top: 10px;}/* Rows. */.bp_row {}/* Columns. */.bp_column_1 {float: left;width: 100%;}.bp_column_2 {float: left;width: 50%;}.bp_column_3 {float: left;width: 33%;}.bp_column_4 {float: left;width: 25%;}.bp_column_5 {float: left;width: 20%;}.bp_column_6 {float: left;width: 16%;}.bp_column_7 {float: left;width: 14%;}.bp_column_8 {float: left;width: 12%;}.bp_column_9 {float: left;width: 11%;}.bp_column_10 {float: left;width: 10%;}.bp_column_11 {float: left;width: 9%;}.bp_column_12 {float: left;width: 8%;}/* Mobile */@media screen and (max-width: 800px) {.bp_column_1, .bp_column_2, .bp_column_3, .bp_column_4, .bp_column_5, .bp_column_6,.bp_column_7, .bp_column_8, .bp_column_9, .bp_column_10, .bp_column_11, .bp_column_12 {float: none;margin-right: 0;width: auto;}}a {color: inherit;}body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;}/* Headings */h1 {font-size: 2.4em;line-height: 1.2em;}h2 {font-size: 1.8em;line-height: 1.2em;}h3 { font-size: 1.2em;line-height: 1.8em;}h4 {font-size: 1em;line-height: 1.8em;}h5 {font-size: 0.9em;line-height: 1.8em;}h6 {font-size: 0.8em;line-height: 1.8em;}/* Paragraph */p { line-height: 1.8em; }/* Font size. */.bp_extra_extra_small_text {font-size: 0.6em;line-height: 1.8em;}.bp_extra_small_text {font-size: 0.7em;line-height: 1.8em;}.bp_small_text {font-size: 0.9em;line-height: 1.8em;}.bp_medium_text {font-size: 1em;line-height: 1.8em;}.bp_large_text {font-size: 1.8em;line-height: 1.2em;}.bp_extra_large_text {font-size: 2.4em;line-height: 1.2em;}.bp_extra_extra_large_text {font-size: 4.8em;line-height: 1.2em;}/* Flashcard */.bp_flashcard {display: inline-block; height: 60%;font-size: 50em;position: absolute;text-align: center;transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);top: 50%;left: 50%;white-space: nowrap;width: 100%;}/* Font style. */.bp_normal { font-style: normal;}.bp_italic {font-style: italic;}.bp_oblique {font-style: oblique;}.bp_underline {text-decoration: underline;}.bp_bold {font-weight: bold;}/* Justify. */.bp_left_justify {text-align: left;}.bp_right_justify {text-align: right;}.bp_center_justify{text-align: center;}/**/.bp_brand {}/* Colors default *//* Colors extra *//* Text color. */.bp_light_text {color: #ffffff;}.bp_neutral_text {opacity: 0.5;}.bp_dark_text {color: #000000;}/* Colors */.bp_transparent{ background-color: transparent;}.bp_white { background-color: #ffffff;}.bp_magenta { background-color: #ff0097;}.bp_red { background-color: #ff4136;}.bp_orange { background-color: #ff851b;}.bp_yellow { background-color: #ffdc00;}.bp_olive { background-color: #3d9970;}.bp_green { background-color: #2ecc40;}.bp_teal { background-color: #39cccc;}.bp_blue { background-color: #0074d9;}.bp_violet { background-color: #ee82ee;}.bp_purple { background-color: #b10dc9;}.bp_pink { background-color: #ffb6c1;}.bp_brown { background-color: #a05000;}.bp_gray, .bp_grey { background-color: #aaaaaa;}.bp_black { background-color: #000000;}.bp_navy { background-color: #001f3f;}.bp_aqua { background-color: #7fdbff;}.bp_lime { background-color: #01ff70;}.bp_maroon { background-color: #85144b;}.bp_fuchsia { background-color: #f012be;}.bp_silver { background-color: #dddddd;}/* Form default */input[ type="text" ], input[ type="password" ], input[ type="email" ], textarea, select {border: 0.1em solid #efefef;font-size: 1em;margin: 0.5em 0 0 0;padding: 0.8em;width: 100%;}label {font-size: 1em;font-weight: bold;padding: 0.5em;}/* Button */button, input[ type="submit" ], input[ type="button" ] {background-color: #ffffff;border: 0.1em solid #666666;color: #666666;font-size: 1em;font-weight: bold;margin: auto;padding: 0.8em 1em 0.8em 1em;}/* Form extra */.bp_form {padding: 0.5em;}/* Text area */.bp_editor {border: 0.1em solid #cccccc;font-family: "Courier New", Courier, monospace;font-size: 1em;height: 90%;width: 95%;}/* x Close button */.bp_close_small:after {content: "\00D7";font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";}.bp_close:after {content: "\2715";/* Multiplication symbol */font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";position: absolute;right: 0.5em;top: 0.5em;text-decoration: none;}.bp_close_bold:after {content: "\2716";/* Heavy multiplication symbol */font-family: Garamond, "Apple Garamond", "Lucida Sans Unicode";position: absolute;right: 0.5em;top: 0.5em;text-decoration: none;}/* Button */.bp_call_to_action {background-color: #f9cc46;border: none;color: #ffffff;font-size: 1.1em;}.bp_pill {border: 0.1em solid #efefef;border-radius: 0;-moz-border-radius: 0;padding-top: 0.5em;padding-bottom: 0.5em;}.bp_tab {border: 0.1em solid #efefef;border-radius: 0;-moz-border-radius: 0;}.bp_cancel {background-color: #f0f0f0;}.bp_disabled {background-color: #f0f0f0;}.bp_gradient_button {background-color: #f7f5f6; background-image: -webkit-gradient( linear, left top, left bottom, from( #f7f5f6 ), to( #dddddd ));background-image: -webkit-linear-gradient( top, #f7f5f6, #dddddd );background-image: -moz-linear-gradient( top, #f7f5f6, #dddddd );background-image: -ms-linear-gradient( top, #f7f5f6, #dddddd );background-image: -o-linear-gradient( top, #f7f5f6, #dddddd );background-image: linear-gradient( to bottom, #f7f5f6, #dddddd );filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#f7f5f6, endcolorstr=#dddddd );border: 0.1em solid #cccccc;-webkit-box-shadow: #feffff 0 0.1em 0.1em;-moz-box-shadow: #feffff 0 0.1em 0.1em; box-shadow: #feffff 0 0.1em 0.1em; -webkit-border-radius: 0.3em; -moz-border-radius: 0.3em;border-radius: 0.3em;color: #4a4a4a;display: inline-block;font-weight: bold; padding: 1em; text-decoration: none; text-shadow: 0 0.1em 0 rgba( 255, 255, 255, 1 );}.bp_gradient_button:hover {background-color: #e0e0e0; background-image: -webkit-gradient(linear, left top, left bottom, from(#e0e0e0), to(#bdbbbc));background-image: -webkit-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -moz-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -ms-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: -o-linear-gradient( top, #e0e0e0, #bdbbbc );background-image: linear-gradient( to bottom, #e0e0e0, #bdbbbc );filter: progid:dximagetransform.microsoft.gradient( gradienttype=0,startcolorstr=#e0e0e0, endcolorstr=#bdbbbc );border: 0.1em solid #adadad;}.bp_menu_top {float: right;}.bp_nav {background: -webkit-linear-gradient(top, #f8f8f8, #eee);background: -moz-linear-gradient(top, #f8f8f8, #eee);background: linear-gradient(top, #f8f8f8, #eee);float: left;font-size: 0.9em;font-weight: bold;width: 100%;}.bp_menu_toolbar {background: -webkit-linear-gradient(top, #f8f8f8, #eee);background: -moz-linear-gradient(top, #f8f8f8, #eee);background: linear-gradient(top, #f8f8f8, #eee);bottom: 0;padding: 0.25em;width: 100%;}.bp_bar_container {background-color: #ffffff;margin: auto;width: 100%;z-index: 1;}.bp_bar_container a {text-decoration: none;}.bp_bar {margin: auto;width: 100%;}.bp_logo {float: left;}.bp_menu {text-align: right;}.bp_menu ul {list-style: none;}.bp_menu li{display: inline;font-size: 0.9em;margin: 0.5em;}/* Sticky */.bp_sticky_top { position: fixed;}.bp_sticky_bottom {bottom: 0;position: fixed;}/* Bottom bar */.bp_bottom_bar_wrapper {min-height: 100%;position: relative;}.bp_bottom_bar {background-color: #f9f9f9;bottom: 0;display: block;padding: 0.5em;position: fixed;width: 100%;}/* Table rows. */.bp_table_striped > tbody > tr:nth-child(odd) > td, .bp_table_striped > tbody > tr:nth-child(odd) > th {background-color: #ffffff; } .bp_table_striped > tbody > tr:nth-child(even)> td, .bp_table_striped > tbody > tr:nth-child(even)> th {background-color: #D3EE9F; }/* Container default *//* Container extra *//* Box */.bp_panel {border: 0.1em solid #77eeff;}.bp_panel > h1, .bp_panel > h2, .bp_panel > h3,.bp_panel > h4, .bp_panel > h5, .bp_panel > h6 {background-color: #77eeff;} .bp_translucent_box {background-color: rgba( 220, 220, 220, 0.1 );border: solid #efefef 0.1em;margin: 0.1em;padding: 0.5em;padding-top: 1em;padding-bottom: 1em;}/* Shape */.bp_square {height: 10em;padding: 10em;width: 10em;}.bp_small_square {height: 10em;width: 10em;}.bp_medium_square {height: 25em;width: 25em;}.bp_large_square {height: 50em;width: 50em;}.bp_rectangle {height: 200px;/*padding-bottom: 50%;*/width: 50%;}/* Modal */.bp_modal {background-color: #ffffff;display: none;padding: 1em;}/* Sticky bottom button. */.bp_credit a {background-color: #000000;color: #ffffff;font-size: 0.8em;position: absolute;bottom: 0;right: 0;padding: 10px;opacity: .50;}/* Panes. */.bp_pane {background-color: #f9f9f9;overflow: auto;position: relative;resize: both;}.bp_main_pane {overflow: hidden;}.bp_left_pane {height: 93%;padding-bottom: 5em;width: 30%;}.bp_right_pane {height: 93%;padding: 0.3em;width: 30%; }.bp_top_pane {top: 3em;height: 30%;margin: 0.1em;position: fixed;resize: both;width: 100%;}.bp_top_pane_wrapper, .bp_bottom_pane_wrapper {min-height: 100%;position: relative;width: 100%;}.bp_bottom_pane {bottom: 0;height: 30%;margin: 0.1em;position: fixed;width: 100%;}/* Toolbar */.bp_toolbar {background-color: #f9f9f9;display: block;padding: 0.3em;}/* Media extra */.bp_cover {background-size: cover;height: 100%;}/* Image */img.full_screen {height: 100%;position: absolute;text-align: middle;width: 100%;}img.bp_circle {border-radius: 50%;}img.bp_small {height: 10em;width: 10em;}img.bp_medium {height: 20em;width: 20em;}img.bp_large {height: 50em;width: 50em;}/* Video */.bp_video {height: 100%;left: 0;width: 100%;}/* Rounded corners */input, textarea, button, code, form, .bp_message, .bp_border, .bp_tight_border, .bp_content, .bp_panel {border-radius: 0.5em;-moz-border-radius: 0.5em;-webkit-border-radius: 0.5em;} \ No newline at end of file diff --git a/asset/module/css/typography/default.css b/asset/module/css/typography/default.css index fad34ed..bb4d2fa 100644 --- a/asset/module/css/typography/default.css +++ b/asset/module/css/typography/default.css @@ -7,9 +7,37 @@ body { } /* Headings */ -h1 { font-size: 2em;} -h2 { font-size: 1.8em;} -h3 { font-size: 1.6em;} -h4 { font-size: 1.4em;} -h5 { font-size: 1.2em;} -h6 { font-size: 1em;} +h1 { + font-size: 2.4em; + line-height: 1.2em; +} + +h2 { + font-size: 1.8em; + line-height: 1.2em; +} + +h3 { + font-size: 1.2em; + line-height: 1.8em; +} + +h4 { + font-size: 1em; + line-height: 1.8em; +} + +h5 { + font-size: 0.9em; + line-height: 1.8em; +} + +h6 { + font-size: 0.8em; + line-height: 1.8em; +} + +/* Paragraph */ +p { + line-height: 1.8em; +} diff --git a/asset/module/css/typography/extra.css b/asset/module/css/typography/extra.css index 6171b79..bcd8bd3 100644 --- a/asset/module/css/typography/extra.css +++ b/asset/module/css/typography/extra.css @@ -1,32 +1,38 @@ /* Font size. */ .bp_extra_extra_small_text { - font-size: 0.7em; + font-size: 0.6em; + line-height: 1.8em; } .bp_extra_small_text { - font-size: 0.8em; + font-size: 0.7em; + line-height: 1.8em; } .bp_small_text { font-size: 0.9em; - line-height: 0.9em; + line-height: 1.8em; } .bp_medium_text { font-size: 1em; + line-height: 1.8em; } .bp_large_text { - font-size: 2em; + font-size: 1.8em; + line-height: 1.2em; } .bp_extra_large_text { - font-size: 3em; + font-size: 2.4em; + line-height: 1.2em; } .bp_extra_extra_large_text { - font-size: 4em; + font-size: 4.8em; + line-height: 1.2em; } /* Flashcard */ diff --git a/asset/motif/layout/full_width/index.htm b/asset/motif/layout/full_width/index.htm index eb8abca..9711561 100644 --- a/asset/motif/layout/full_width/index.htm +++ b/asset/motif/layout/full_width/index.htm @@ -13,7 +13,7 @@ - +
diff --git a/asset/motif/layout/left_sidebar/index.htm b/asset/motif/layout/left_sidebar/index.htm index f9cd63d..93ed84a 100644 --- a/asset/motif/layout/left_sidebar/index.htm +++ b/asset/motif/layout/left_sidebar/index.htm @@ -13,7 +13,7 @@ - +
diff --git a/asset/motif/layout/right_sidebar/index.htm b/asset/motif/layout/right_sidebar/index.htm index 94227d3..9555830 100644 --- a/asset/motif/layout/right_sidebar/index.htm +++ b/asset/motif/layout/right_sidebar/index.htm @@ -13,7 +13,7 @@ - +
diff --git a/asset/motif/layout/three_columns/index.htm b/asset/motif/layout/three_columns/index.htm index 57b374d..9a6cc41 100644 --- a/asset/motif/layout/three_columns/index.htm +++ b/asset/motif/layout/three_columns/index.htm @@ -13,7 +13,7 @@ - +
diff --git a/asset/motif/layout/wide/index.htm b/asset/motif/layout/wide/index.htm index af2df05..7d62c13 100644 --- a/asset/motif/layout/wide/index.htm +++ b/asset/motif/layout/wide/index.htm @@ -13,7 +13,7 @@ - +
diff --git a/example/article/index.htm b/example/article/index.htm index b8064ba..ce744d3 100644 --- a/example/article/index.htm +++ b/example/article/index.htm @@ -10,7 +10,7 @@ - + - +
diff --git a/example/grid/index.htm b/example/grid/index.htm index 53c8313..c3d23a1 100644 --- a/example/grid/index.htm +++ b/example/grid/index.htm @@ -10,8 +10,7 @@ - - + diff --git a/example/index.htm b/example/index.htm index 54e3662..dcf3364 100644 --- a/example/index.htm +++ b/example/index.htm @@ -10,11 +10,10 @@ - - - + + @@ -28,8 +27,8 @@
diff --git a/example/login/index.htm b/example/login/index.htm index f317d3a..6d13f37 100644 --- a/example/login/index.htm +++ b/example/login/index.htm @@ -10,7 +10,7 @@ - + diff --git a/example/one_page/index.htm b/example/one_page/index.htm index 7686a93..afc2b6e 100644 --- a/example/one_page/index.htm +++ b/example/one_page/index.htm @@ -10,12 +10,11 @@ - - + - - - + + +
diff --git a/example/register/index.htm b/example/register/index.htm index 64d1c5a..d008cf8 100644 --- a/example/register/index.htm +++ b/example/register/index.htm @@ -10,7 +10,7 @@ - + diff --git a/example/typography/index.htm b/example/typography/index.htm index ce4b144..2a7ede4 100644 --- a/example/typography/index.htm +++ b/example/typography/index.htm @@ -11,7 +11,7 @@ - + @@ -21,22 +21,26 @@

BlastPad UI

A lightweight CSS front-end framework.
+

+

Typography examples

-

Colors

+

+

Colors

-

 

 

+

 

WhiteRedOrangeYellowOliveGreenTealBlueVioletPink
-

 

 

+

 

GrayAquaLimeFuchsiaSilverMaroonPurpleNavyBrownBlack
-

 

+ +

+
-

Headings

+

Headings

-

 

Heading 1

Heading 2

Heading 3

@@ -46,21 +50,25 @@
Heading 6
+

+
-

Text Size

+

Text Size

-
This is tiny text.
+
This is extra, extra small text.
+
This is extra small text.
This is small text.
-
This is normal text.
This is medium text.
-
This is big text.
-
This is huge text.
-
This is jumbo text.
+
This is large text.
+
This is extra large text.
+
This is extra extra large text.
+

+
-

Forms

+

Forms

@@ -74,22 +82,33 @@
Heading 6
+

+

Checkboxes

+
+
+ +

+

Radio buttons

+
- +

+

Submit buttons

+ +

diff --git a/index.htm b/index.htm index 17ab7bd..e2ef7dd 100644 --- a/index.htm +++ b/index.htm @@ -12,8 +12,8 @@ - - + + @@ -27,8 +27,8 @@
@@ -51,8 +51,8 @@

BlastPad UI

Include only what you need, leave what you don't.

- - + +