Merge pull request #3 from chainlift/naming-cleanup-and-sync-with-docs

Naming cleanup and sync with docs

README.md

@@ -4,43 +4,28 @@
 LiftKit CSS is the vanilla CSS version of Chainlift's LiftKit design system. It's a lightweight framework of utility classes that use golden ratio scaling to provide a uniquely "oddly-satisfying" look. 
 
 
-
-
 ## Quickstart
-I didn't expect to get literally hundreds of you to sign up within the first 2 days, so this is literally just the unedited exported code from the Webflow project. I need more time to clean it up into proper vanilla CSS. 
+These are just vanilla CSS files. You can import everything into your HTML by linking to css/index.css, which in turn imports everything else. 
 
-The CSS being rendered on `index.html` is under the `/css` folder. It relies on the Webflow dependencies and isn't recommended for use anywhere except for testing and tinkering.
+[The docs explain further.](https://www.chainlift.io/liftkitdocs/overview)
 
-The files in `/cssReference` simply contain the actual LiftKit utility classes grouped together into separate files for easier reading. 
-
-This is messy, but it won't be forever.
 ## A Message from the Author
 
 Hi everyone, 
 
-I never imagined LiftKit would take off the way that it has. I thought it was going to be portfolio fodder, something I just put on job applications in the future to say "Hey, look what I did." 
+Woohoo! It's finally here: some actual documentation! 
 
-To everyone volunteering to give it a try, thank you. I'm self-taught in everything I do, and I was starting to think I'd never be a "real" techie because of it. Even if this doesn't go anywhere, it's been incredibly validating to receive so much interest from the community. 
+Please direct feedback on documentation inconsistencies using the feedback form on that specific page. 
 
 Best,
 
 [@chainlift](https://www.github.com/chainlift)
 
-
 ## Disclaimers
 
 * **LiftKit is and will always be free.** I do not believe in gatekeeping knowledge, and I will never, ever, ever charge anybody for using it.
 
 * **LiftKit is funded by Chainlift's project revenue.** If you need a design/dev partner, proceeds from your project fees will go towards further research and refinement of the LiftKit system. [Request a proposal here.](https://www.chainlift.io/request-proposal)
 
-* **Anyone claiming to represent, work for, or be an "expert in" Chainlift or LiftKit is lying.** Chainlift is just me. Garrett. I'm the agency. It me.
-
-* **I'm a git/github noob. Be patient.** Use 'Issues' to leave feedback, but you can also contact me directly at info@chainlift.io.
-## General LiftKit Documentation
-
-[The official documentation is available at chainlift.io.](https://www.chainlift.io/liftkit) Note that this is NOT documentation for LiftKit CSS. That doesn't exist yet. What does exist is the quickstart below.
-
-
-## Support
+* **Anyone claiming to represent, work for, or be an "expert in" Chainlift or LiftKit is lying.** If they aren't listed on "Who Works Here?" on chainlift.io, they're making it up.
 
-For support, email info@chainlift.io.

css/align-items.css

@@ -0,0 +1,18 @@
+/* Item Alignment */
+
+.align-items__stretch {
+    align-items: stretch;
+  }
+
+  .align-items__center {
+    align-items: center;
+  }
+
+  .align-items__top {
+    align-items: flex-start;
+  }
+
+  .align-items__start {
+    align-items: flex-start;
+  }
+

css/align-self.css

@@ -0,0 +1,23 @@
+.align-self__start {
+  align-self: start;
+}
+
+.align-self__end {
+  align-self: end;
+}
+
+.align-self__center {
+  align-self: center;
+}
+
+.align-self__stretch {
+  align-self: stretch;
+}
+
+.align-self__baseline {
+  align-self: baseline;
+}
+
+.align-self__auto {
+  align-self: auto;
+}

css/aspect-ratios.css

@@ -0,0 +1,32 @@
+/*How to use
+
+the aspect-ratio property maintains the proportion of width to height. 
+For it to work, either the width or the height of the element must be set
+to a value besides "auto." It can be fixed-width or responsive, but it must be set.
+
+Either width or height must be set to auto in order for aspect-ratio to work.
+
+Template: aspect-ratio: width / height;
+
+*/
+
+.aspect__16x9 {
+  aspect-ratio: 16 / 9;
+}
+
+.aspect__4x3 {
+  aspect-ratio: 4 / 3;
+
+}
+
+.aspect__3x2 {
+  aspect-ratio: 3 / 2;
+}
+
+.aspect__9x16 {
+  aspect-ratio: 9 / 16;
+}
+
+.aspect__1x1 {
+  aspect-ratio: 1;
+}