diff --git a/README.md b/README.md index 157e703..6d44b72 100644 --- a/README.md +++ b/README.md @@ -7,16 +7,7 @@ I'm recreating a LCARS website system that I created many years ago. It was a ve I'm not exactly sure what tech I'll be building this off of. Right now I'm looking hard at [Stylus](http://learnboost.github.io/stylus/) with [Nib](https://github.com/visionmedia/nib), ~~[Jeet](https://github.com/mojotech/jeet),~~ [Rupture](https://github.com/jenius/rupture), and ~~[Typographic](https://github.com/corysimmons/typographic)~~. -Latest Updates --------------- - -### 5/12/2014 - -#### Base Styles - -The base styles and resets are all in place. - -#### Buttons +## Buttons Finished the inital button classes. *Example mark up* @@ -36,7 +27,7 @@ Finished the inital button classes. *Example mark up* ``` -#### Grid System +## Grid System Every CSS framework needs to have its own grid system. I've based mine off of fractions. @@ -68,4 +59,49 @@ This means there are a lot of way to get the same sizes. Example; these are all ``` ------ +Grid prefix's and suffix's can be used to create spacing before and after a grid column. + +```html +
+
1/3 page width with 1/3 prefix margin
+
1/3 page width
+
+ +
+
1/3 page width
+
1/3 page width with 1/3 suffix margin
+
+``` + +## Menus + +To give you page that classic LCARS look you'll want to add vertical menus. + +```html + +``` + +The defining style for a LCARS interface is the rounded *elbows* that connect horizontal dividers and the vertical menus. + +![LCARS Elbow](app/img/Elbow1.png) + +You can create these using the `lcars-elbow` class. You define the width of these elbows by adding them onto a column. + +```html +
+
+ Top Left elbow +
+
+ Dashed divider lines +
+
+``` + +Here is a [demo](http://garrett-.github.io/lcars/) showing how to use all these things together. \ No newline at end of file diff --git a/app/img/Elbow1.png b/app/img/Elbow1.png new file mode 100644 index 0000000..a44e0c2 Binary files /dev/null and b/app/img/Elbow1.png differ