Permalink
Browse files

Base Major Update

- Updated all em to rem for less confusion (with px size fallbacks for
older browsers)
- Removed menu functionality from base default.js file and moved into
docs js file
- Removed stripped and bordered options for tables (kept it more
minimal)
- Updated documentation and examples
  • Loading branch information...
Matthew Hartman
Matthew Hartman committed Jan 12, 2013
1 parent 1537e20 commit f2ac01084d33f2939c5cf55ee41437576a0ecc19
Showing with 139 additions and 292 deletions.
  1. +18 −111 docs/base-css.html
  2. +1 −0 docs/grid-layout.html
  3. +1 −0 docs/index.html
  4. +26 −0 docs/javascripts/docs.js
  5. +1 −1 index.html
  6. +2 −43 javascripts/default.js
  7. +4 −2 less/docs.less
  8. +17 −1 less/mixins.less
  9. +32 −74 less/style.less
  10. +37 −60 style.css
View
@@ -31,7 +31,9 @@ <h1>Base CSS</h1>
<hr>
<h2>Body and Typography</h2>
- <p>Base has a global default font size of 14px and a line-height of 22px (which is converted into em's for scalability and accessibility). This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, (paragraphs) receive a bottom margin of half their line-height (11px by default).</p>
+ <p>Base has a global default font size of 14px and a line-height of 22px (which is converted into <code>rem</code> units for scalability and accessibility). This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, (paragraphs) receive a bottom margin of half their line-height (11px by default).</p>
+
+ <p class="alert"><strong>NOTE:</strong> rem units are not supported in some browser, so a px fallback has been provided.</p>
<hr>
@@ -71,108 +73,9 @@ <h3>Ordered List</h3>
<hr>
- <h2>Tables</h2>
+ <h2>Table</h2>
<table>
- <caption>Default Table (this is the table caption)</caption>
- <thead>
- <tr>
- <th>Table Heading 1</th>
- <th>Table Heading 2</th>
- <th>Table Heading 3</th>
- <th>Table Heading 4</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="4">Table Footer Details (this is the <code>tfoot</code> of the table)</td>
- </tr>
- </tfoot>
- </table>
-
- <hr>
-
- <table class="bordered">
- <caption>Bordered Table (this is the table caption)</caption>
- <thead>
- <tr>
- <th>Table Heading 1</th>
- <th>Table Heading 2</th>
- <th>Table Heading 3</th>
- <th>Table Heading 4</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="4">Table Footer Details (this is the <code>tfoot</code> of the table)</td>
- </tr>
- </tfoot>
- </table>
-
- <hr>
-
- <table class="striped">
- <caption>Striped Table (this is the table caption)</caption>
- <thead>
- <tr>
- <th>Table Heading 1</th>
- <th>Table Heading 2</th>
- <th>Table Heading 3</th>
- <th>Table Heading 4</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="4">Table Footer Details (this is the <code>tfoot</code> of the table)</td>
- </tr>
- </tfoot>
- </table>
-
- <hr>
-
- <table class="striped bordered">
- <caption>Striped + Bordered Table (this is the table caption)</caption>
+ <caption>Table Caption (optional)</caption>
<thead>
<tr>
<th>Table Heading 1</th>
@@ -183,21 +86,24 @@ <h2>Tables</h2>
</thead>
<tbody>
<tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
</tr>
<tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
</tr>
</tbody>
<tfoot>
<tr>
- <td colspan="4">Table Footer Details (this is the <code>tfoot</code> of the table)</td>
+ <td>Table Footer 1</td>
+ <td>Table Footer 2</td>
+ <td>Table Footer 3</td>
+ <td>Table Footer 4</td>
</tr>
</tfoot>
</table>
@@ -220,6 +126,7 @@ <h2>Forms + Buttons</h2>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../javascripts/default.js"></script>
+<script src="javascripts/docs.js"></script>
</body>
</html>
View
@@ -79,6 +79,7 @@ <h1>Grid Demo</h1>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../javascripts/default.js"></script>
+<script src="javascripts/docs.js"></script>
</body>
</html>
View
@@ -50,6 +50,7 @@ <h2>Getting Started</h2>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../javascripts/default.js"></script>
+<script src="javascripts/docs.js"></script>
</body>
</html>
View
@@ -0,0 +1,26 @@
+$(document).ready(function(){
+ // 2.1 Menu for Mobile Devices
+ // If JS is enabled, attach the 'hide' class (only affects mobiles - special media query class)
+ $('.navigation').prepend('<a href="#" class="nav-toggle nodesktop notablet nomobile">Navigation <span class="arrow">+</span></a>');
+ $(".nav-toggle").removeClass('nomobile').addClass('showmobile');
+ $('.menu').addClass("nomobile");
+
+ // When the navigation button is clicked, toggle menu
+ $(".nav-toggle").click(function() {
+ if ( $('.menu:visible').length < 1 ) {
+ $('.menu').stop(true, true).slideDown(200, function() {
+ $('.nav-toggle .arrow').html('-');
+ $('.nav-toggle').toggleClass('active');
+ $(this).removeClass('nomobile').removeAttr('style');
+ });
+ } else {
+ $('.menu').stop(true, true).slideUp(200, function() {
+ $('.nav-toggle .arrow').html('+');
+ $('.nav-toggle').toggleClass('active');
+ $(this).addClass('nomobile').removeAttr('style');
+ });
+ };
+ return false;
+ });
+
+});
View
@@ -10,7 +10,7 @@
<body>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="javascripts/default.js"></script>
</body>
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -3,11 +3,13 @@
.header {
background-color: #d6511d;
margin-bottom: 10px;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
.logo {
margin: 14px 0 0 0;
color: #fff;
- font-size: 2em;
+ .font-size(32);
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
@@ -100,7 +102,7 @@
@media only screen and (max-width: 719px) {
.header {
- padding-top: 10px;
+ padding-bottom: 0;
text-align: center;
.container {
padding: 0;
View
@@ -22,8 +22,24 @@
}
}
+// Font Sizes (REMs with PX fallback for older browsers)
+.font-size (@sizeValue) {
+ @remValue: @sizeValue / 16;
+ @pxValue: (@sizeValue);
+ font-size: ~"@{pxValue}px";
+ font-size: ~"@{remValue}rem";
+}
+
+// Line Height Sizes (REMs with PX fallback for older browsers)
+.line-height (@sizeValue) {
+ @remValue: @sizeValue / 16;
+ @pxValue: (@sizeValue);
+ line-height: ~"@{pxValue}px";
+ line-height: ~"@{remValue}rem";
+}
+
// Border Rounded Corners
-.roundedcorners(@radius: 1px) {
+.roundedcorners (@radius: 1px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
Oops, something went wrong.

0 comments on commit f2ac010

Please sign in to comment.