Init

README.md

@@ -0,0 +1,5 @@
+# BASSCSS
+
+Part reset, part boilerplate, part framework, all minimal.
+
+BASSCSS is a small reset and collection of simple type and layout classes that can be used as the basis for any web project. Use it out of the box or as a base for SASS @extend classes.

Rakefile

@@ -0,0 +1,12 @@
+require "rubygems"
+require 'rake'
+
+desc "Start Sass so that is compiles to css upon file save"
+task :sass do
+  system "sass --watch basscss.scss:basscss.css"
+end # task :sass
+
+desc "Start Sass so that is compiles to css upon file save"
+task :minify do
+  system "sass --watch basscss.scss:basscss.min.css --style compressed"
+end # task :minify

basscss.css

@@ -0,0 +1,222 @@
+/*
+
+  BASSCSS
+
+  Part reset, part boilerplate, part framework, all minimal.
+
+  BASSCSS is a small reset and collection of simple type and layout
+  classes that can be used as the basis for any web project.
+  Use it out of the box or as a base for SASS @extend classes.
+
+  Contents:
+  1. Reset
+  2. Typography
+     a. Default Font Stack
+     b. Base Type Scale
+     c. Responsive Type Scale
+     d. Utilities
+  3. Layout
+     a. Margins
+     b. Padding
+     c. Display
+     d. Utilities
+
+  Made with love by Jxnblk
+
+*/
+body, h1, h2, h3, h4, h5, h6, dl, ol, ul, p,
+button, input, select, textarea {
+  margin: 0; }
+
+button, input, select, textarea {
+  font-family: inherit;
+  font-size: 100%; }
+
+body {
+  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  line-height: 1.5;
+  font-weight: 400; }
+
+h1, .h1 {
+  font-size: 2rem;
+  line-height: 1.25; }
+
+h2, .h2 {
+  font-size: 1.5rem;
+  line-height: 1.25; }
+
+h3, h4, h5, h6, dl, ol, ul, p, .p {
+  font-size: 1.125em; }
+
+small, .small {
+  font-size: .875em; }
+
+@media (min-width: 768px) {
+  .responsive .h1, .responsive.h1 {
+    font-size: 4rem; }
+  .responsive .h2, .responsive.h2 {
+    font-size: 2rem; }
+  .responsive .p, .responsive.p {
+    font-size: 1.25rem; }
+  .responsive .small, .responsive.small {
+    font-size: 1rem; } }
+@media (min-width: 1024px) {
+  .responsive .h1, .responsive.h1 {
+    font-size: 6rem; }
+  .responsive .h2, .responsive.h2 {
+    font-size: 3rem; } }
+
+strong, .bold {
+  font-weight: 700; }
+
+.regular {
+  font-weight: normal; }
+
+.caps {
+  text-transform: uppercase;
+  letter-spacing: .2em; }
+
+.center {
+  text-align: center; }
+
+.right-align {
+  text-align: right; }
+
+.m1 {
+  margin: 1rem; }
+
+.mt1 {
+  margin-top: 1rem; }
+
+.mr1 {
+  margin-right: 1rem; }
+
+.mb1 {
+  margin-bottom: 1rem; }
+
+.ml1 {
+  margin-left: 1rem; }
+
+.m2 {
+  margin: 2rem; }
+
+.mt2 {
+  margin-top: 2rem; }
+
+.mr2 {
+  margin-right: 2rem; }
+
+.mb2 {
+  margin-bottom: 2rem; }
+
+.ml2 {
+  margin-left: 2rem; }
+
+.m3 {
+  margin: 3rem; }
+
+.mt3 {
+  margin-top: 3rem; }
+
+.mr3 {
+  margin-right: 3rem; }
+
+.mb3 {
+  margin-bottom: 3rem; }
+
+.ml3 {
+  margin-left: 3rem; }
+
+.m4 {
+  margin: 4rem; }
+
+.mt4 {
+  margin-top: 4rem; }
+
+.mr4 {
+  margin-right: 4rem; }
+
+.mb4 {
+  margin-bottom: 4rem; }
+
+.ml4 {
+  margin-left: 4rem; }
+
+.mxa {
+  margin-right: auto;
+  margin-left: auto; }
+
+.p1 {
+  padding: 1rem; }
+
+.px1 {
+  padding-right: 1rem;
+  padding-left: 1rem; }
+
+.py1 {
+  padding-top: 1rem;
+  padding-bottom: 1rem; }
+
+.p2 {
+  padding: 2rem; }
+
+.px2 {
+  padding-right: 2rem;
+  padding-left: 2rem; }
+
+.py2 {
+  padding-top: 2rem;
+  padding-bottom: 2rem; }
+
+.p3 {
+  padding: 3rem; }
+
+.px3 {
+  padding-right: 3rem;
+  padding-left: 3rem; }
+
+.py3 {
+  padding-top: 3rem;
+  padding-bottom: 3rem; }
+
+.p4 {
+  padding: 4rem; }
+
+.px4 {
+  padding-right: 4rem;
+  padding-left: 4rem; }
+
+.py4 {
+  padding-top: 4rem;
+  padding-bottom: 4rem; }
+
+.inline {
+  display: inline; }
+
+.block {
+  display: block; }
+
+.inline-block {
+  display: inline-block; }
+
+.table {
+  display: table; }
+
+.table-cell {
+  display: table-cell;
+  vertical-align: middle; }
+
+.clearfix:before, .clearfix:after {
+  content: " ";
+  display: table; }
+.clearfix:after {
+  clear: both; }
+
+.left {
+  float: left; }
+
+.right {
+  float: right; }
+
+.fit {
+  max-width: 100%; }