diff --git a/css/grid.css b/css/grid.css new file mode 100644 index 0000000..347ba14 --- /dev/null +++ b/css/grid.css @@ -0,0 +1,209 @@ +/* + Grid + ======================================== +*/ + +:root { + --grid-gutter: 24px; +} + +/* Container */ +.container { + width: 100%; + padding: 0 calc(var(--grid-gutter) / 2); + margin: 0 auto; +} + +@media (min-width: 576px) { .container { max-width: 540px; } } +@media (min-width: 768px) { .container { max-width: 720px; } } +@media (min-width: 992px) { .container { max-width: 960px; } } +@media (min-width: 1200px) { .container { max-width: 1140px; } } + +.container-fluid { + width: 100%; + padding: 0 calc(var(--grid-gutter) / 2); + margin: 0 auto; +} + +/* Row */ +.row { + display: flex; + flex-wrap: wrap; + margin: 0 calc(var(--grid-gutter) / -2); +} + +/* Base column styles */ +[class*="col"] { + padding: 0 calc(var(--grid-gutter) / 2); +} + +.col { + flex: 1 0 0%; +} + +.col-auto { + flex: 0 0 auto; + width: auto; +} + +/* Column widths */ +.col-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } +.col-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } +.col-3 { flex: 0 0 25%; max-width: 25%; } +.col-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } +.col-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } +.col-6 { flex: 0 0 50%; max-width: 50%; } +.col-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } +.col-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } +.col-9 { flex: 0 0 75%; max-width: 75%; } +.col-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } +.col-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } +.col-12 { flex: 0 0 100%; max-width: 100%; } + +/* Offset classes */ +.offset-1 { margin-left: 8.33333%; } +.offset-2 { margin-left: 16.66667%; } +.offset-3 { margin-left: 25%; } +.offset-4 { margin-left: 33.33333%; } +.offset-5 { margin-left: 41.66667%; } +.offset-6 { margin-left: 50%; } +.offset-7 { margin-left: 58.33333%; } +.offset-8 { margin-left: 66.66667%; } +.offset-9 { margin-left: 75%; } +.offset-10 { margin-left: 83.33333%; } +.offset-11 { margin-left: 91.66667%; } + +/* Small breakpoint (576px and up) */ +@media (min-width: 576px) { + .col-sm { flex: 1 0 0%; } + .col-sm-auto { flex: 0 0 auto; width: auto; } + .col-sm-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } + .col-sm-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } + .col-sm-3 { flex: 0 0 25%; max-width: 25%; } + .col-sm-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } + .col-sm-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } + .col-sm-6 { flex: 0 0 50%; max-width: 50%; } + .col-sm-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } + .col-sm-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } + .col-sm-9 { flex: 0 0 75%; max-width: 75%; } + .col-sm-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } + .col-sm-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } + .col-sm-12 { flex: 0 0 100%; max-width: 100%; } + + .offset-sm-0 { margin-left: 0; } + .offset-sm-1 { margin-left: 8.33333%; } + .offset-sm-2 { margin-left: 16.66667%; } + .offset-sm-3 { margin-left: 25%; } + .offset-sm-4 { margin-left: 33.33333%; } + .offset-sm-5 { margin-left: 41.66667%; } + .offset-sm-6 { margin-left: 50%; } + .offset-sm-7 { margin-left: 58.33333%; } + .offset-sm-8 { margin-left: 66.66667%; } + .offset-sm-9 { margin-left: 75%; } + .offset-sm-10 { margin-left: 83.33333%; } + .offset-sm-11 { margin-left: 91.66667%; } +} + +/* Medium breakpoint (768px and up) */ +@media (min-width: 768px) { + .col-md { flex: 1 0 0%; } + .col-md-auto { flex: 0 0 auto; width: auto; } + .col-md-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } + .col-md-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } + .col-md-3 { flex: 0 0 25%; max-width: 25%; } + .col-md-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } + .col-md-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } + .col-md-6 { flex: 0 0 50%; max-width: 50%; } + .col-md-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } + .col-md-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } + .col-md-9 { flex: 0 0 75%; max-width: 75%; } + .col-md-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } + .col-md-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } + .col-md-12 { flex: 0 0 100%; max-width: 100%; } + + .offset-md-0 { margin-left: 0; } + .offset-md-1 { margin-left: 8.33333%; } + .offset-md-2 { margin-left: 16.66667%; } + .offset-md-3 { margin-left: 25%; } + .offset-md-4 { margin-left: 33.33333%; } + .offset-md-5 { margin-left: 41.66667%; } + .offset-md-6 { margin-left: 50%; } + .offset-md-7 { margin-left: 58.33333%; } + .offset-md-8 { margin-left: 66.66667%; } + .offset-md-9 { margin-left: 75%; } + .offset-md-10 { margin-left: 83.33333%; } + .offset-md-11 { margin-left: 91.66667%; } +} + +/* Large breakpoint (992px and up) */ +@media (min-width: 992px) { + .col-lg { flex: 1 0 0%; } + .col-lg-auto { flex: 0 0 auto; width: auto; } + .col-lg-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } + .col-lg-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } + .col-lg-3 { flex: 0 0 25%; max-width: 25%; } + .col-lg-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } + .col-lg-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } + .col-lg-6 { flex: 0 0 50%; max-width: 50%; } + .col-lg-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } + .col-lg-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } + .col-lg-9 { flex: 0 0 75%; max-width: 75%; } + .col-lg-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } + .col-lg-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } + .col-lg-12 { flex: 0 0 100%; max-width: 100%; } + + .offset-lg-0 { margin-left: 0; } + .offset-lg-1 { margin-left: 8.33333%; } + .offset-lg-2 { margin-left: 16.66667%; } + .offset-lg-3 { margin-left: 25%; } + .offset-lg-4 { margin-left: 33.33333%; } + .offset-lg-5 { margin-left: 41.66667%; } + .offset-lg-6 { margin-left: 50%; } + .offset-lg-7 { margin-left: 58.33333%; } + .offset-lg-8 { margin-left: 66.66667%; } + .offset-lg-9 { margin-left: 75%; } + .offset-lg-10 { margin-left: 83.33333%; } + .offset-lg-11 { margin-left: 91.66667%; } +} + +/* Extra large breakpoint (1200px and up) */ +@media (min-width: 1200px) { + .col-xl { flex: 1 0 0%; } + .col-xl-auto { flex: 0 0 auto; width: auto; } + .col-xl-1 { flex: 0 0 8.33333%; max-width: 8.33333%; } + .col-xl-2 { flex: 0 0 16.66667%; max-width: 16.66667%; } + .col-xl-3 { flex: 0 0 25%; max-width: 25%; } + .col-xl-4 { flex: 0 0 33.33333%; max-width: 33.33333%; } + .col-xl-5 { flex: 0 0 41.66667%; max-width: 41.66667%; } + .col-xl-6 { flex: 0 0 50%; max-width: 50%; } + .col-xl-7 { flex: 0 0 58.33333%; max-width: 58.33333%; } + .col-xl-8 { flex: 0 0 66.66667%; max-width: 66.66667%; } + .col-xl-9 { flex: 0 0 75%; max-width: 75%; } + .col-xl-10 { flex: 0 0 83.33333%; max-width: 83.33333%; } + .col-xl-11 { flex: 0 0 91.66667%; max-width: 91.66667%; } + .col-xl-12 { flex: 0 0 100%; max-width: 100%; } + + .offset-xl-0 { margin-left: 0; } + .offset-xl-1 { margin-left: 8.33333%; } + .offset-xl-2 { margin-left: 16.66667%; } + .offset-xl-3 { margin-left: 25%; } + .offset-xl-4 { margin-left: 33.33333%; } + .offset-xl-5 { margin-left: 41.66667%; } + .offset-xl-6 { margin-left: 50%; } + .offset-xl-7 { margin-left: 58.33333%; } + .offset-xl-8 { margin-left: 66.66667%; } + .offset-xl-9 { margin-left: 75%; } + .offset-xl-10 { margin-left: 83.33333%; } + .offset-xl-11 { margin-left: 91.66667%; } +} + +/* Utility classes */ +.no-gutters { + margin-right: 0; + margin-left: 0; +} + +.no-gutters > [class*="col"] { + padding-right: 0; + padding-left: 0; +} diff --git a/css/navbar.css b/css/navbar.css new file mode 100644 index 0000000..c8fe45e --- /dev/null +++ b/css/navbar.css @@ -0,0 +1,63 @@ +/* Variables */ +:root { + --navbar-height: 40px; + --navbar-bg: #fafafa; + --navbar-bg-highlight: #f2f2f2; + --navbar-bg-active-top: #f2f2f2; + --navbar-bg-active-highlight: #e6e6e6; + --navbar-border: #d4d4d4; + --navbar-link: #777; + --navbar-link-hover: #333; + --navbar-link-active: #555; + --navbar-active: #08c; + --navbar-active-bg: transparent; + --navbar-brand-color: var(--navbar-link); +} + +/* Navbar Base */ +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + min-height: var(--navbar-height); + margin-bottom: 1.25rem; + padding: 0 1.25rem; + background-color: var(--navbar-bg); + background-image: linear-gradient(to bottom, white, var(--navbar-bg-highlight)); + border: 1px solid var(--navbar-border); + border-radius: 4px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); +} + +.navbar .nav-group { + display: flex; + align-items: center; +} + +.navbar .nav-menu { + display: flex; + align-items: center; + + li { + display: inline-flex; + margin-right: 1rem; + } + + li.active { + background-image: linear-gradient(to bottom, var(--navbar-bg-active-top), var(--navbar-bg-active-highlight)); + color: var(--navbar-link-active); + } +} + +.navbar .brand { + display: block; + font-size: 20px; + font-weight: 200; + color: var(--navbar-brand-color); + margin-right: 1.25rem; + text-shadow: 0 1px 0 white; + + &:hover, &:focus { + text-decoration: none; + } +} diff --git a/css/reset.css b/css/reset.css new file mode 100644 index 0000000..bbea20d --- /dev/null +++ b/css/reset.css @@ -0,0 +1,121 @@ +/* + Reset + ======================================== +*/ + +/* Box sizing normalization */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* Document basics */ +html { + font-size: 100%; + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; +} + +/* Reset margins */ +body, +h1, h2, h3, h4, h5, h6, +p, blockquote, pre, +dl, dd, ol, ul, +form, fieldset, legend, +figure, figcaption { + margin: 0; + padding: 0; +} + +/* Body defaults */ +body { + line-height: 1.5; + font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", sans-serif; +} + +/* Lists */ +ul, ol { + list-style: none; +} + +/* Tables */ +table { + border-collapse: collapse; + border-spacing: 0; +} + +/* Media elements */ +img, svg, video, canvas, audio, iframe, embed, object { + display: block; + max-width: 100%; + height: auto; +} + +/* Form elements */ +button, +input, +select, +textarea { + font: inherit; + color: inherit; + margin: 0; +} + +/* Button defaults */ +button { + background: transparent; + border: 0; + padding: 0; + cursor: pointer; +} + +/* Links */ +a { + color: inherit; + text-decoration: none; +} + +/* Pre/Code formatting */ +pre, code, kbd, samp { + font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; + font-size: 1em; +} + +/* Subscript/Superscript */ +sub, sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Horizontal rule */ +hr { + height: 0; + border: 0; + border-top: 1px solid #e5e5e5; +} + +/* Accessibility improvements */ +[tabindex="-1"]:focus { + outline: none !important; +} + +/* Remove animations for users who prefer reduced motion */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + animation-duration: 0.01ms !important; + animation-iteration-count: 1 !important; + transition-duration: 0.01ms !important; + scroll-behavior: auto !important; + } +} diff --git a/docs/grid.md b/docs/grid.md new file mode 100644 index 0000000..73ca252 --- /dev/null +++ b/docs/grid.md @@ -0,0 +1,118 @@ +# Grid Documentation + +## Features + +- 12-column layout system +- Responsive breakpoints: sm (576px), md (768px), lg (992px), xl (1200px) +- Fluid and fixed-width containers +- Offsets for column positioning +- No-gutters option to remove spacing +- Based on Flexbox for modern layout capabilities + +## Basic Usage + +### Container + +Wrap your content in a container: + +```html +
+ +
+``` + +For full-width container: + +```html +
+ +
+``` + +### Rows and Columns + +Structure your layout with rows and columns: + +```html +
+
Equal width
+
Equal width
+
Equal width
+
+``` + +### Specific Column Sizes + +Specify column widths using the 12-column system: + +```html +
+
4 columns
+
8 columns
+
+``` + +### Responsive Columns + +Columns change width at different breakpoints: + +```html +
+
+ +
+
+``` + +### Offset Columns + +Push columns to the right: + +```html +
+
Centered column
+
+``` + +### No Gutters + +Remove spacing between columns: + +```html +
+
No spacing
+
No spacing
+
+``` + +## Customization + +Adjust the gutter size by modifying the CSS variable: + +```css +:root { + --grid-gutter: 30px; /* Change from default 24px */ +} +``` + +## Available Classes + +### Container Classes +- `.container` - Responsive fixed-width container +- `.container-fluid` - Full-width container + +### Row Class +- `.row` - Flex container for columns + +### Column Classes +- `.col` - Equal width column +- `.col-auto` - Auto-sized column based on content +- `.col-1` through `.col-12` - Specific width columns +- `.col-sm-*`, `.col-md-*`, `.col-lg-*`, `.col-xl-*` - Responsive width columns + +### Offset Classes +- `.offset-1` through `.offset-11` - Push columns right +- `.offset-sm-*`, `.offset-md-*`, `.offset-lg-*`, `.offset-xl-*` - Responsive offsets + +### Utility Classes +- `.no-gutters` - Remove spacing between columns diff --git a/docs/navbar.md b/docs/navbar.md new file mode 100644 index 0000000..414a483 --- /dev/null +++ b/docs/navbar.md @@ -0,0 +1,40 @@ +# Navbar Documentation + +A lightweight navbar inspired by Bootstrap 2 with cleaner HTML and easier customization. + +## Features + +- Simple, semantic HTML structure +- CSS variables for easy theming +- No dependencies +- Responsive design +- CSS-only dropdowns + +## Usage + +1. Include the CSS and JS files: +```html + + +``` + +2. Add the navbar HTML to your page: +```html + +``` + +## Variants + +### Standard Navbar +Default navbar with rounded corners and bottom margin. + +### Fixed Navbar +Add class `navbar-fixed` to the navbar element to make it stick to the top of the viewport. + +### Static Top Navbar +Add class `navbar-static-top` to the navbar element for a full-width navbar without rounded corners. diff --git a/js/navbar.js b/js/navbar.js new file mode 100644 index 0000000..2f562d4 --- /dev/null +++ b/js/navbar.js @@ -0,0 +1,15 @@ +/* + Navbar JavaScript + ======================================== +*/ +document.addEventListener('DOMContentLoaded', function() { + // Mobile menu toggle + const btnNavbar = document.querySelector('.btn-navbar'); + const navCollapse = document.querySelector('.nav-collapse'); + + if (btnNavbar && navCollapse) { + btnNavbar.addEventListener('click', function() { + navCollapse.classList.toggle('active'); + }); + } +}); diff --git a/tests/buttons.html b/tests/buttons.html deleted file mode 100644 index fc442d1..0000000 --- a/tests/buttons.html +++ /dev/null @@ -1,133 +0,0 @@ - - - - - - Buttons · Bootstrap - - - - - - - - - - - - -
- -

Dropups

-
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - - -
-
- - -
- - - - - - - - - - - - - - - - - - - - diff --git a/tests/css-tests.css b/tests/css-tests.css deleted file mode 100644 index 0f5604e..0000000 --- a/tests/css-tests.css +++ /dev/null @@ -1,150 +0,0 @@ -/*! - * Bootstrap CSS Tests - */ - - -/* Remove background image */ -body { - background-image: none; -} - -/* Space out subhead */ -.subhead { - margin-bottom: 36px; -} -/*h4 { - margin-bottom: 5px; -} -*/ - -.type-test { - margin-bottom: 20px; - padding: 0 20px 20px; - background: url(../../docs/assets/img/grid-baseline-20px.png); -} -.type-test h1, -.type-test h2, -.type-test h3, -.type-test h4, -.type-test h5, -.type-test h6 { - background-color: rgba(255,0,0,.2); -} - - -/* colgroup tests */ -.col1 { - background-color: rgba(255,0,0,.1); -} -.col2 { - background-color: rgba(0,255,0,.1); -} -.col3 { - background-color: rgba(0,0,255,.1); -} - - -/* Fluid row inputs */ -#rowInputs .row > [class*=span], -#fluidRowInputs .row-fluid > [class*=span] { - background-color: rgba(255,0,0,.1); -} - - -/* Fluid grid */ -.fluid-grid { - margin-bottom: 45px; -} -.fluid-grid .row { - height: 40px; - padding-top: 10px; - margin-top: 10px; - color: #ddd; - text-align: center; -} -.fluid-grid .span1 { - background-color: #999; -} - - -/* Gradients */ - -[class^="gradient-"] { - width: 100%; - height: 400px; - margin: 20px 0; - -webkit-border-radius: 5px; - -moz-border-radius: 5px; - border-radius: 5px; -} - -.gradient-horizontal { - background-color: #333333; - background-image: -moz-linear-gradient(left, #555555, #333333); - background-image: -webkit-gradient(linear, 0 0, 100% 0, from(#555555), to(#333333)); - background-image: -webkit-linear-gradient(left, #555555, #333333); - background-image: -o-linear-gradient(left, #555555, #333333); - background-image: linear-gradient(to right, #555555, #333333); - background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=1); -} - -.gradient-vertical { - background-color: #474747; - background-image: -moz-linear-gradient(top, #555555, #333333); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333)); - background-image: -webkit-linear-gradient(top, #555555, #333333); - background-image: -o-linear-gradient(top, #555555, #333333); - background-image: linear-gradient(to bottom, #555555, #333333); - background-repeat: repeat-x; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff555555', endColorstr='#ff333333', GradientType=0); -} - -.gradient-directional { - background-color: #333333; - background-image: -moz-linear-gradient(45deg, #555555, #333333); - background-image: -webkit-linear-gradient(45deg, #555555, #333333); - background-image: -o-linear-gradient(45deg, #555555, #333333); - background-image: linear-gradient(45deg, #555555, #333333); - background-repeat: repeat-x; -} - -.gradient-vertical-three { - background-color: #8940a5; - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f)); - background-image: -webkit-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f); - background-image: -moz-linear-gradient(top, #00b3ee, #7a43b6 50%, #c3325f); - background-image: -o-linear-gradient(#00b3ee, #7a43b6 50%, #c3325f); - background-image: linear-gradient(#00b3ee, #7a43b6 50%, #c3325f); - background-repeat: no-repeat; - filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ff00b3ee', endColorstr='#ffc3325f', GradientType=0); -} - -.gradient-radial { - background-color: #333333; - background-image: -webkit-gradient(radial, center center, 0, center center, 460, from(#555555), to(#333333)); - background-image: -webkit-radial-gradient(circle, #555555, #333333); - background-image: -moz-radial-gradient(circle, #555555, #333333); - background-image: -o-radial-gradient(circle, #555555, #333333); - background-repeat: no-repeat; -} - -.gradient-striped { - background-color: #555555; - background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); - background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); - background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -} - -.gradient-horizontal-three { - background-color: #00b3ee; - background-image: -webkit-gradient(left, linear, 0 0, 0 100%, from(#00b3ee), color-stop(50%, #7a43b6), to(#c3325f)); - background-image: -webkit-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f); - background-image: -moz-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f); - background-image: -o-linear-gradient(left, #00b3ee, #7a43b6 50%, #c3325f); - background-image: linear-gradient(to right, #00b3ee, #7a43b6 50%, #c3325f); - background-repeat: no-repeat; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b3ee', endColorstr='#c3325f', GradientType=0); -} diff --git a/tests/css-tests.html b/tests/css-tests.html deleted file mode 100644 index 3ffaf4f..0000000 --- a/tests/css-tests.html +++ /dev/null @@ -1,1376 +0,0 @@ - - - - - - CSS Tests - - - - - - - - - - - - - - -
-
-
- Bootstrap -
-
-
- - - -
-
-

CSS Tests

-

One stop shop for quick debugging and edge-case tests of CSS.

-
-
- - -
- -
- - - - - -
-

Typography

-
- -
-
-
-

h1. Heading 1

-

h2. Heading 2

-

h3. Heading 3

-

h4. Heading 4

-
h5. Heading 5
-
h6. Heading 6
-

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet - non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus - mus.

-
-
-
-
-

h1. Heading 1

-

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet - non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus - mus.

-

h2. Heading 2

-

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet - non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus - mus.

-

h3. Heading 3

-

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet - non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus - mus.

-

h4. Heading 4

-

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet - non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus - mus.

-
h5. Heading 5
-

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet - non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus - mus.

-
h6. Heading 6
-

Sed posuere consectetur est at lobortis. Maecenas sed diam eget risus varius blandit sit amet - non magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus - mus.

-
-
-
- - - - - -
-

Responsive images

-
- -
-
- -
-
- -
-
- -
-
- -
- -
-
- -
-
- -
-
- -
-
- -

- - - - - - -
-

Fluid grids

-
- -
-
-
12 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
-
-
11 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
1 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
-
-
10 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
2 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
-
-
9 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
3 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
-
-
8 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
4 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
-
-
7 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
5 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
-
-
6 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
6 -
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
1
-
-
-
-
- - - - - -
-

Tables

-
- -
-
-

Bordered without thead

- - - - - - - - - - - - - - - - - - -
123
123
123
-

Bordered without thead, with caption

- - - - - - - - - - - - - - - - - - - -
Table caption
123
123
123
-

Bordered without thead, with colgroup

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
123
123
123
369
-

Bordered with thead, with colgroup

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ABC
123
123
123
369
-
-
-

Bordered with thead and caption

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Table caption
123
123
123
123
369
-

Bordered with rowspan and colspan

- - - - - - - - - - - - - - - - - - - - - - - - - - -
123
1 and 23
123
13
2 and 3
-
-
- - -

Grid sizing

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
123
1 and 23
123
13
2 and 3
-
-
- -

Nesting and striping

- - - - - - - - - - - -
Test
- - - - - - - - - - - - - - - - - - - - - -
TestTest
- test - - test -
- test - - test -
- test - - test -
-
- -

Fluid grid sizing

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
123
1 and 23
123
13
2 and 3
-
-
- - - - - -
-

Forms

-
- -

Buttons and button groups

-
- - -
- - User - - - -
-
- -

Horizontal form errors

-
-
- -
- - Please correct the error -
-
-
- -
-
-

Prepend and append on inputs

-
-
-
- @ - -
-
-
-
- - @ -
-
-
-
- $ - - .00 -
-
-
-
-
-

Prepend and append with uneditable

-
-
- $ - Some value here -
-
- Some value here - .00 -
-
- $ - Some value here - .00 -
-
-
-
-

Prepend with type="submit"

-
-
- - -
-
-
- - -
-
- - - -
-
-
- -

Fluid prepended and appended inputs

-
-
-
-
-
- @ -
-
-
-
- @ -
-
-
-
- $.00 -
-
-
-
-
- -

Fixed row with inputs

-

Inputs should not extend past the light red background, set on their parent, a .span* - column.

- -
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -

Fluid row with inputs

-

Inputs should not extend past the light red background, set on their parent, a .span* - column.

-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
- -
- -

Inline form in fluid row

- -
-
-
- - - - -
-
-
- - -
- - -

Fluid textarea at .span12

-
-
- -
-
- - -
- - -

Selects

-
- -
- - -
- - - - - - -
-

Dropdowns

-
- -

Dropdown link with hash URL

- - -

Dropdown link with custom URL and data-target

- - -

Dropdown on a button

-
- - -
- -
- - - - -
-

Thumbnails

-
- -

Default thumbnails (no grid sizing)

- - -

Standard grid sizing

- - -

Fluid thumbnails

-
-
- -
-
- - - - - -
-

Tabs

-
- -
- -
-
-

I'm in Section 1.

- -
- -
-
-

I'm in Section 1.1.

-
-
-

I'm in Section 1.2.

-
-
-

I'm in Section 1.3.

-
-
-
-
-
-

Howdy, I'm in Section 2.

-
-
-

What up girl, this is Section 3.

-
-
-
- -
- - - - -
-

Labels

-
- -
-
-

Inline label

-

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas sed diam Label name eget risus varius blandit sit amet non magna. - Fusce .class-name dapibus, tellus ac cursus commodo, tortor mauris condimentum - nibh, ut fermentum massa justo sit amet risus.

-
-
-
- - Hey! Read this. -
-
-
- - -
-
- -
- - - - -
-

Buttons

-
- - - - - - - - -
- Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Donec - ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, - tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. - -
- - - - -
-
- -

Mini buttons: text and icon

-
- - -
- -
- - - - - -
-

Responsive utility classes

-
- -

Visible on...

- - - -

Hidden on...

- - - - - - - -
-

Gradients

-
- -

Horizontal

-
- -

Vertical

-
- -

Directional

-
- -

Three colors

-
- -

Radial

-
- -

Striped

-
- -

Horizontal three colors

-
- - - -
-

Alerts

-
- -

Alert default

-
- - Alert! Best check yourself, you're not looking too good. -
-
- -

Alert! Best check yourself, you're not looking too good.

-
- -

Success

-
- - Success! Best check yourself, you're not looking too good. -
-
- -

Success! Best check yourself, you're not looking too good.

-
- -

Info

-
- - Info! Best check yourself, you're not looking too good. -
-
- -

Info! Best check yourself, you're not looking too good.

-
- -

Warning

-
- - Warning! Best check yourself, you're not looking too good. -
-
- -

Warning! Best check yourself, you're not looking too good.

-
- -

Error

-
- - Error! Best check yourself, you're not looking too good. -
-
- -

Error! Best check yourself, you're not looking too good.

-
- - -
- - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - diff --git a/tests/forms-responsive.html b/tests/forms-responsive.html deleted file mode 100644 index c9c8020..0000000 --- a/tests/forms-responsive.html +++ /dev/null @@ -1,64 +0,0 @@ - - - - - - Bootstrap - - - - - - - - - - - -
- -
-

Fixed grid

-
- -

Vertical alignment

- - - span1 - -

Width across elements

-
- -
-
- -
-
- span2 -
- - -
-

Fluid grid

-
- -
- - - span1 -
- -
- - diff --git a/tests/forms.html b/tests/forms.html deleted file mode 100644 index 76952bc..0000000 --- a/tests/forms.html +++ /dev/null @@ -1,165 +0,0 @@ - - - - - - Bootstrap - - - - - - - - - - - -
-
-

Form controls

-
- -
-
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
-
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
-
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
- - - - -
-
- -
- - diff --git a/tests/grid.html b/tests/grid.html new file mode 100644 index 0000000..7512134 --- /dev/null +++ b/tests/grid.html @@ -0,0 +1,175 @@ + + + + + + Grid + + + + + +
+
+
+ 12 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+ +
+
+ 11 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+ 1 +
+
+ +
+
+ 10 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+ 2 +
+
1/2
+
1/2
+
+
+
+ +
+
+ 9 +
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
1
+
+
+
+ 3 +
+
1/3
+
1/3
+
1/3
+
+
+
+ +
+
+ 8 +
+
1/4
+
1/4
+
1/4
+
1/4
+
+
+
+ 4 +
+
1/2
+
1/2
+
+
+
+ +
+
+ 7 +
+
~1/3
+
~1/3
+
~1/3
+
+
+
+ 5 +
+
1/2
+
1/2
+
+
+
+ +
+
+ 6 +
+
1/2
+
1/2
+
+
+
+ 6 +
+
1/2
+
1/2
+
+
+
+
+ + diff --git a/tests/navbar-fixed-top.html b/tests/navbar-fixed-top.html deleted file mode 100644 index b0b712f..0000000 --- a/tests/navbar-fixed-top.html +++ /dev/null @@ -1,92 +0,0 @@ - - - - - - Bootstrap, from Twitter - - - - - - - - - - - - -
-
-
- - - - - - Project name -
- - -
-
-
-
- -
- - -
-

Navbar example

-

This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar - work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

-

- View navbar docs » -

-
- -
- - - - - - - - - - - - - - - - - - diff --git a/tests/navbar-static-top.html b/tests/navbar-static-top.html deleted file mode 100644 index 8d2f9fc..0000000 --- a/tests/navbar-static-top.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - - Bootstrap - - - - - - - - - - - - -
-
-
- - - - - - Project name -
- - -
-
-
-
- - -
- - -
-

Navbar example

-

This example is a quick exercise to illustrate how the default, static navbar and fixed to top navbar - work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.

-

- View navbar docs » -

-
- -
- - - - - - - - - - - - - - - - - - diff --git a/tests/navbar.html b/tests/navbar.html index 95e66e3..f7c2c9c 100644 --- a/tests/navbar.html +++ b/tests/navbar.html @@ -1,93 +1,58 @@ - - - Bootstrap + - - - - - + Navbar + + - - -
-
+
+
+ +
+
+ - - - - - - - - - - - - - - - +
+

Standard Navbar Demo

+

This demonstrates the default navbar style with rounded corners and a bottom margin.

+

The standard navbar scrolls with the page content.

+
+ + -