redframework 0.0.1.01

data/stylesheets/redframework/base/_main.scss

@@ -0,0 +1,16 @@
+html{
+    font:#{($base-font-size/16px)*1em}/#{$line-height-ratio} $base-font-family;
+    overflow-y:scroll;
+    min-height:100%;
+}
+
+
+.view-actions {
+	padding: 1rem 20px 0;
+	overflow:hidden;
+	text-align:right;
+	a {
+		margin:0px;
+		margin-left:3px;
+	}
+}

data/stylesheets/redframework/base/_paragraphs.scss

@@ -0,0 +1,4 @@
+.lede,
+.lead{
+    @include font-size($base-font-size * 1.125);
+}

data/stylesheets/redframework/base/_quotes.scss

@@ -0,0 +1,78 @@
+@if $english-quotes == true{
+    $open-quote:    \201C;
+    $close-quote:   \201D;
+}
+
+q{
+    quotes:"\2018" "\2019" "#{$open-quote}" "#{$close-quote}";
+
+    &:before{
+        content:"\2018";
+        content:open-quote;
+    }
+    &:after{
+        content:"\2019";
+        content:close-quote;
+    }
+
+    q:before{
+        content:"\201C";
+        content:open-quote;
+    }
+    q:after{
+        content:"\201D";
+        content:close-quote;
+    }
+}
+
+blockquote{
+    quotes:"#{$open-quote}" "#{$close-quote}";
+
+    p:before{
+        content:"#{$open-quote}";
+        content:open-quote;
+    }
+    p:after{
+        content:"";
+        content:no-close-quote;
+    }
+    p:last-of-type:after{
+        content:"#{$close-quote}";
+        content:close-quote;
+    }
+
+    q:before{
+        content:"\2018";
+        content:open-quote;
+    }
+    q:after{
+        content:"\2019";
+        content:close-quote;
+    }
+}
+
+
+/**
+ *
+   <blockquote>
+       <p>Insanity: doing the same thing over and over again and expecting
+       different results.</p>
+       <b class=source>Albert Einstein</b>
+   </blockquote>
+ *
+ */
+blockquote{
+    text-indent:-0.41em;
+    p:last-of-type{
+        margin-bottom:0;
+    }
+}
+
+.source{
+    display:block;
+    text-indent:0;
+
+    &:before{
+        content:"\2014";
+    }
+}

data/stylesheets/redframework/base/_section.scss

@@ -0,0 +1,45 @@
+.section {
+	display:inline-block;
+	vertical-align:top;
+	float:left;
+	> * {
+		letter-spacing:0px;
+	}
+}
+
+	.section__header {
+		display:block;
+		padding:20px;
+		border-top:1px solid #e7e7e7;
+		border-bottom:1px solid #e7e7e7;
+		cursor: pointer;
+		[class*=icon-] {
+			float:right;
+			line-height: 24px;
+			font-size: 36px;
+			margin: 0;
+		}
+	}
+
+	.section__body {
+		&.section__body--padded {
+			padding:20px
+		}
+	}
+
+	.section--inline {
+		border-bottom:1px solid #e7e7e7;
+		.section__header {
+			border-right:1px solid #e7e7e7;
+			display:inline-block;
+			border:none;
+			float: left;
+			width:20%;
+		}
+		.section__body {
+			overflow-x:scroll;
+			white-space:nowrap;
+			float: left;
+			width:79%;
+		}
+	}

data/stylesheets/redframework/base/_smallprint.scss

@@ -0,0 +1,13 @@
+/*------------------------------------*\
+    $SMALLPRINT
+\*------------------------------------*/
+/**
+ * A series of classes for setting tiny type; for use in smallprint etc.
+ */
+.smallprint,
+.milli{
+    @include font-size($milli-size);
+}
+.micro{
+    @include font-size($micro-size);
+}

data/stylesheets/redframework/base/_tables.scss

@@ -0,0 +1,163 @@
+/*------------------------------------*\
+    $TABLES
+\*------------------------------------*/
+/**
+ * We have a lot at our disposal for making very complex table constructs, e.g.:
+ *
+   <table class="table--bordered  table--striped  table--data">
+       <colgroup>
+           <col class=t10>  
+           <col class=t10>
+           <col class=t10>
+           <col>
+       </colgroup>
+       <thead>
+           <tr>
+               <th colspan=3>Foo</th>
+               <th>Bar</th>
+           </tr>
+           <tr>
+               <th>Lorem</th>
+               <th>Ipsum</th>
+               <th class=numerical>Dolor</th>
+               <th>Sit</th>
+           </tr>
+       </thead>
+       <tbody>
+           <tr>
+               <th rowspan=3>Sit</th>
+               <td>Dolor</td>
+               <td class=numerical>03.788</td>
+               <td>Lorem</td>
+           </tr>
+           <tr>
+               <td>Dolor</td>
+               <td class=numerical>32.210</td>
+               <td>Lorem</td>
+           </tr>
+           <tr>
+               <td>Dolor</td>
+               <td class=numerical>47.797</td>
+               <td>Lorem</td>
+           </tr>
+           <tr>
+               <th rowspan=2>Sit</th>
+               <td>Dolor</td>
+               <td class=numerical>09.640</td>
+               <td>Lorem</td>
+           </tr>
+           <tr>
+               <td>Dolor</td>
+               <td class=numerical>12.117</td>
+               <td>Lorem</td>
+           </tr>
+       </tbody>
+   </table>
+ *
+ */
+table{
+    width:100%;
+}
+th,
+td{
+    padding:$base-spacing-unit / 4;
+    @media screen and (min-width:480px){
+        padding:$half-spacing-unit;
+    }
+    text-align:left;
+}
+
+
+/**
+ * Cell alignments
+ */
+[colspan]{
+    text-align:center;
+}
+[colspan="1"]{
+    text-align:left;
+}
+[rowspan]{
+    vertical-align:middle;
+}
+[rowspan="1"]{
+    vertical-align:top;
+}
+.numerical{
+    text-align:right;
+}
+
+/**
+ * In the HTML above we see several `col` elements with classes whose numbers
+ * represent a percentage width for that column. We leave one column free of a
+ * class so that column can soak up the effects of any accidental breakage in
+ * the table.
+ */
+.t5     { width: 5% }
+.t10    { width:10% }
+.t12    { width:12.5% }     /* 1/8 */
+.t15    { width:15% }
+.t20    { width:20% }
+.t25    { width:25% }       /* 1/4 */
+.t30    { width:30% }
+.t33    { width:33.333% }   /* 1/3 */
+.t35    { width:35% }
+.t37    { width:37.5% }     /* 3/8 */
+.t40    { width:40% }
+.t45    { width:45% }
+.t50    { width:50% }       /* 1/2 */
+.t55    { width:55% }
+.t60    { width:60% }
+.t62    { width:62.5% }     /* 5/8 */
+.t65    { width:65% }
+.t66    { width:66.666% }   /* 2/3 */
+.t70    { width:70% }
+.t75    { width:75% }       /* 3/4*/
+.t80    { width:80% }
+.t85    { width:85% }
+.t87    { width:87.5% }     /* 7/8 */
+.t90    { width:90% }
+.t95    { width:95% }
+
+
+/**
+ * Bordered tables
+ */
+.table--bordered{
+
+    th,
+    td{
+        border:1px solid $base-ui-color;
+
+        &:empty{
+            border:none;
+        }
+    }
+
+    thead tr:last-child th{
+        border-bottom-width:2px;
+    }
+
+    tbody tr th:last-of-type{
+        border-right-width:2px;
+    }
+}
+
+
+/**
+ * Striped tables
+ */
+.table--striped{
+
+    tbody tr:nth-of-type(odd){
+        background-color:#f2f2f2; /* Override this color in your theme stylesheet */
+    }
+}
+
+
+/**
+ * Data table
+ */
+.table--data{
+    font:12px/1.5 sans-serif;
+}

data/stylesheets/redframework/general/_brand.scss

@@ -0,0 +1,12 @@
+.brand {
+    font-family:$brand-face +!important;
+    color:$brand-color +!important;
+}
+
+.brand-face {
+    font-family:$brand-face +!important;
+}
+
+.brand-color, .brand-colour {
+    color:$brand-color +!important;
+}

data/stylesheets/redframework/general/_clearfix.scss

@@ -0,0 +1,7 @@
+.cf{
+    &:after{
+        content:"";
+        display:table;
+        clear:both;
+    }
+}

data/stylesheets/redframework/general/_debug.scss

@@ -0,0 +1,168 @@
+@if $debug-mode == true {
+/*------------------------------------*\
+    $DEBUG
+\*------------------------------------*/
+/**
+ * Enable this stylesheet to visually detect any improperly nested or
+ * potentially invalid markup, or any potentially inaccessible code.
+ *
+ * Red          ==      definite error
+ * Yellow       ==      double-check
+ * None         ==      should be fine
+ *
+ * Please note that this method of checking markup quality should not be relied
+ * upon entirely. Validate your markup!
+ */
+
+
+/**
+ * Are there any empty elements in your page?
+ */
+:empty{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Images require `alt` attributes, empty `alt`s are fine but should be
+ * double-checked, no `alt` is bad and is flagged red.
+ */
+img{
+    outline:5px solid red;
+}
+img[alt]{
+    outline:none;
+}
+img[alt=""]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Links sometimes, though not always, benefit from `title` attributes. Links
+ * without are never invalid but it’s a good idea to check.
+ */
+a{
+    outline:5px solid yellow;
+}
+a[title]{
+    outline:none;
+}
+
+
+/**
+ * Double-check any links whose `href` is something questionable.
+ */
+a[href="#"],
+a[href*="javascript"]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * The `target` attribute ain’t too nice...
+ */
+a[target]{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Ensure any lists only contain `li`s as children.
+ */
+ul,
+ol{
+    > *:not(li){
+        outline:5px solid red;
+    }
+}
+
+
+/**
+ * It’s always nice to give `th`s `scope` attributes.
+ */
+th{
+    outline:5px solid yellow;
+}
+th[scope]{
+    outline:none;
+}
+
+
+/**
+ * `tr`s as children of `table`s ain’t great, did you need a `thead`/`tbody`?
+ */
+table > tr{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * `tfoot` needs to come *before* `tbody`.
+ */
+tbody + tfoot{
+    outline:5px solid yellow;
+}
+
+
+/**
+ * Forms require `action` attributes
+ */
+form{
+    outline:5px solid red;
+}
+form[action]{
+    outline:none;
+}
+
+
+/**
+ * Various form-field types have required attributes. `input`s need `type`
+ * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
+ * need a `value` attribute.
+ */
+textarea,
+input{
+    outline:5px solid red;
+}
+input[type]{
+    outline:none;
+}
+textarea[rows][cols]{
+    outline:none;
+}
+input[type=submit]{
+    outline:5px solid red;
+}
+input[type=submit][value]{
+    outline:none;
+}
+
+
+/**
+ * Avoid inline styles where possible.
+ */
+[style]{
+        outline:5px solid yellow;
+}
+
+
+/**
+ * You should avoid using IDs for CSS, is this doing any styling?
+ */
+[id]{
+        outline:5px solid yellow;
+}
+
+
+/**
+ * Are you using the grid system correctly?
+ */
+.gw > :not(.g),
+.grid-wrapper > :not(.grid),
+.gw--rev > :not(.g),
+.grid-wrapper--rev > :not(.grid){
+        outline:5px solid red;
+}
+
+} //End IF

data/stylesheets/redframework/general/_helpers.scss

@@ -0,0 +1,3 @@
+*[class$="--hide"] {
+	display:none;
+}