This is where the page content belongs
+Useful stuff goes here
+diff --git a/lms/static/sass/discussion/views/_home.scss b/lms/static/sass/discussion/views/_home.scss
index a7209f5dfb..08fc6965a8 100644
--- a/lms/static/sass/discussion/views/_home.scss
+++ b/lms/static/sass/discussion/views/_home.scss
@@ -115,9 +115,9 @@
.row-item-full {
.notification-checkbox {
+ @include margin-right($baseline/2);
display: inline-block;
@include padding($baseline/4, 0, $baseline/2, 0);
- @include margin-right($baseline/2);
border-radius: 5px;
border: 1px solid gray;
diff --git a/lms/static/sass/shared-v2/_components.scss b/lms/static/sass/shared-v2/_components.scss
index 6044de724a..cd484b0ba2 100644
--- a/lms/static/sass/shared-v2/_components.scss
+++ b/lms/static/sass/shared-v2/_components.scss
@@ -18,12 +18,12 @@
&.prominent + li {
@include border-left(1px solid $lms-border-color);
- padding-left: $baseline*0.75;
+ @include padding-left($baseline*0.75);
}
a,
a:visited {
- padding: ($baseline/2) ($baseline*0.75) 13px ($baseline*0.75);
+ @include padding($baseline/2, $baseline*0.75, 13px, $baseline*0.75);
display: block;
text-align: center;
text-decoration: none;
@@ -47,3 +47,48 @@
}
}
}
+
+// TODO: search box should be in the Pattern Library
+.page-header-search {
+ display: inline-block;
+
+ .search-form {
+ display: inline-block;
+ }
+
+ .search-box {
+ display: inline-block;
+ position: relative;
+ vertical-align: middle;
+ }
+
+ .search-field {
+ transition: all $tmg-f2 ease-in-out;
+ border: 1px solid $lms-border-color;
+ border-radius: 3px;
+ padding: $baseline/4 $baseline*1.5;
+ font-family: inherit;
+ }
+
+ .action-search {
+ text-shadow: none;
+ vertical-align: middle;
+ padding: $baseline/5 $baseline/2;
+ }
+
+ .action-clear {
+ @include right(0);
+ @include margin(0, ($baseline/4), 0, 0);
+ position: absolute;
+ top: 0;
+ color: $lms-gray;
+ padding: $baseline/4;
+
+ // STATE: hover and focus
+ &:hover,
+ &:focus {
+ color: $lms-label-color;
+ border-width: 0;
+ }
+ }
+}
diff --git a/lms/static/sass/shared-v2/_footer.scss b/lms/static/sass/shared-v2/_footer.scss
index bf68aa26fe..c5ffddc311 100644
--- a/lms/static/sass/shared-v2/_footer.scss
+++ b/lms/static/sass/shared-v2/_footer.scss
@@ -2,199 +2,199 @@
// ====================
.wrapper-footer {
- @extend %ui-print-excluded;
- margin-top: ($baseline*2);
- box-shadow: 0 -1px 5px 0 $shadow-l1;
- border-top: 1px solid tint(palette(grayscale, light), 50%);
- padding: 25px ($baseline/2) ($baseline*1.5) ($baseline/2);
- background: $footer-bg;
- clear: both;
-
- footer#footer-openedx {
@include clearfix();
- box-sizing: border-box;
- margin: 0 auto;
+ @extend %ui-print-excluded;
+ box-shadow: 0 -1px 5px 0 $shadow-l1;
+ border-top: 1px solid tint(palette(grayscale, light), 50%);
+ padding: 25px ($baseline/2) ($baseline*1.5);
+ background: $footer-bg;
- p, ol, ul {
- font-family: $sans-serif;
-
- // override needed for poorly scoped font-family styling on p a:link {}
- a {
- font-family: $sans-serif;
- }
- }
-
- a {
- @extend %link-text;
- border-bottom: none;
-
- &:hover,
- &:focus,
- &:active {
- border-bottom: 1px dotted $link-color;
- }
- }
-
- // colophon
- .colophon {
- @include span(12);
-
- @include susy-media($bp-screen-sm) {
- @include span(8);
- }
-
- .nav-colophon {
+ footer#footer-openedx {
@include clearfix();
- margin: $footer_margin;
+ box-sizing: border-box;
+ margin: 0 auto;
- ol {
- list-style: none;
+ p, ol, ul {
+ font-family: $sans-serif;
+
+ // override needed for poorly scoped font-family styling on p a:link {}
+ a {
+ font-family: $sans-serif;
+ }
}
- li {
- @include float(left);
- margin-right: ($baseline*0.75);
-
- a {
- color: tint($black, 20%);
+ a {
+ @extend %link-text;
+ border-bottom: none;
&:hover,
&:focus,
&:active {
- color: $link-color;
+ border-bottom: 1px dotted $link-color;
}
- }
-
- &:last-child {
- @include margin-right(0);
- }
- }
- }
-
- .colophon-about {
- @include clearfix();
-
- img {
- @include float(left);
- width: 68px;
- height: 34px;
- margin-right: 0;
}
- p {
- @include float(left);
- @include span(9);
- margin-left: $baseline;
- padding-left: $baseline;
- font-size: font-size(small);
- background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
+ // colophon
+ .colophon {
+ @include span(12);
+
+ @include susy-media($bp-screen-sm) {
+ @include span(8);
+ }
+
+ .nav-colophon {
+ @include clearfix();
+ margin: $footer_margin;
+
+ ol {
+ list-style: none;
+ }
+
+ li {
+ @include float(left);
+ @include margin-right($baseline*0.75);
+
+ a {
+ color: tint($black, 20%);
+
+ &:hover,
+ &:focus,
+ &:active {
+ color: $link-color;
+ }
+ }
+
+ &:last-child {
+ @include margin-right(0);
+ }
+ }
+ }
+
+ .colophon-about {
+ @include clearfix();
+
+ img {
+ @include float(left);
+ @include margin-right(0);
+ width: 68px;
+ height: 34px;
+ }
+
+ p {
+ @include float(left);
+ @include span(9);
+ @include margin-left($baseline);
+ @include padding-left($baseline);
+ font-size: font-size(small);
+ background: transparent url(/static/images/bg-footer-divider.jpg) 0 0 no-repeat;
+ }
+ }
+ }
+
+ // references
+ .references {
+ @include span(4);
+ margin: -10px 0 0 0;
+ display: inline-block;
+ }
+
+ .wrapper-logo {
+ margin: ($baseline*0.75) 0;
+
+ a {
+ display: inline-block;
+
+ &:hover,
+ &:focus {
+ border-bottom: 0;
+ }
+ }
+ }
+
+ .copyright {
+ @include text-align(left);
+ margin: -2px 0 8px;
+ font-size: font-size(xx-small);
+ color: palette(grayscale, dark);
+ }
+
+ .nav-legal {
+ @include clearfix();
+ @include text-align(left);
+
+ li {
+ display: inline-block;
+ font-size: font-size(xx-small);
+ }
+
+ .nav-legal-02 a {
+ &:before {
+ @include margin-right(($baseline/4));
+ content: "-";
+ }
+ }
+ }
+
+ .nav-social {
+ @include text-align(right);
+ margin: 0;
+
+ li {
+ display: inline-block;
+
+ &:last-child {
+ @include margin-right(0);
+ }
+
+ a {
+ display: block;
+
+ &:hover,
+ &:focus,
+ &:active {
+ border: none;
+ }
+ }
+
+ img {
+ display: block;
+ }
+ }
+ }
+
+ // platform Open edX logo and link
+ .footer-about-openedx {
+ @include span(12);
+ @include text-align(right);
+ vertical-align: bottom;
+
+ @include susy-media($bp-screen-sm) {
+ @include span(4);
+ @include margin-right(0);
+ }
+
+
+ a {
+ @include float(right);
+ display: inline-block;
+
+ &:hover {
+ border-bottom: none;
+ }
+ }
}
- }
}
-
- // references
- .references {
- @include span(4);
- margin: -10px 0 0 0;
- display: inline-block;
- }
-
- .wrapper-logo {
- margin: ($baseline*0.75) 0;
-
- a {
- display: inline-block;
-
- &:hover {
- border-bottom: 0;
- }
- }
- }
-
- .copyright {
- @include text-align(left);
- margin: -2px 0 8px 0;
- font-size: font-size(xx-small);
- color: palette(grayscale, dark);
- }
-
- .nav-legal {
- @include clearfix();
- @include text-align(left);
-
- li {
- display: inline-block;
- font-size: font-size(xx-small);
- }
-
- .nav-legal-02 a {
- &:before {
- @include margin-right(($baseline/4));
- content: "-";
- }
- }
- }
-
- .nav-social {
- @include text-align(right);
- margin: 0;
-
- li {
- display: inline-block;
-
- &:last-child {
- margin-right: 0;
- }
-
- a {
- display: block;
-
- &:hover,
- &:focus,
- &:active {
- border: none;
- }
- }
-
- img {
- display: block;
- }
- }
- }
-
- // platform Open edX logo and link
- .footer-about-openedx {
- @include span(12);
- @include text-align(right);
- vertical-align: bottom;
-
- @include susy-media($bp-screen-sm) {
- @include span(4);
- @include margin-right(0);
- }
-
-
- a {
- @include float(right);
- display: inline-block;
-
- &:hover {
- border-bottom: none;
- }
- }
- }
- }
}
// marketing site design syncing
.view-register,
.view-login,
.view-passwordreset {
- .wrapper-footer footer {
- width: 960px;
+ .wrapper-footer footer {
+ width: 960px;
- .colophon-about img {
- margin-top: ($baseline*1.5);
+ .colophon-about img {
+ margin-top: ($baseline*1.5);
+ }
}
- }
}
diff --git a/lms/static/sass/shared-v2/_layouts.scss b/lms/static/sass/shared-v2/_layouts.scss
index 1001eaeb61..a54cdd8e73 100644
--- a/lms/static/sass/shared-v2/_layouts.scss
+++ b/lms/static/sass/shared-v2/_layouts.scss
@@ -2,12 +2,20 @@
.content-wrapper {
max-width: 1180px;
- padding-top: 10px;
+ padding: {
+ top: $baseline/2;
+ bottom: $baseline*2;
+ }
+
+ .container {
+ border: 1px solid $lms-border-color;
+ background-color: $lms-container-background-color;
+ padding: $baseline;
+ }
.page-header {
@include clearfix();
border-bottom: 1px solid $lms-border-color;
- padding: $baseline $baseline ($baseline/2) $baseline;
.page-title {
@extend %t-title4;
@@ -21,26 +29,43 @@
margin-bottom: ($baseline/4);
color: $gray;
}
- }
- .page-header.has-secondary {
+ &.has-secondary {
+ .page-header-main {
+ display: inline-block;
+ }
- .page-header-main {
- display: inline-block;
- width: flex-grid(8,12);
- }
+ .page-header-secondary {
+ @include float(right);
+ @include text-align(right);
+ display: inline-block;
+ vertical-align: text-bottom;
- .page-header-secondary {
- @include text-align(right);
- display: inline-block;
- width: flex-grid(4,12);
- vertical-align: text-bottom;
+ .form-actions {
+ display: inline-block;
+ }
+
+ .form-actions > * {
+ @include margin-left($baseline/2);
+ vertical-align: middle;
+ min-width: 200px;
+ height: 34px;
+ }
+
+ .form-actions > button {
+ padding: $baseline/5;
+ min-width: 200px;
+ height: 34px;
+ }
+
+ .form-actions > *:first-child {
+ @include margin-left(0);
+ }
+ }
}
}
- .container {
- border: 1px solid #c8c8c8;
- background-color: $lms-container-background-color;
- padding: $baseline;
+ .page-content {
+ padding-top: $baseline;
}
}
diff --git a/lms/static/sass/shared-v2/_modal.scss b/lms/static/sass/shared-v2/_modal.scss
index 7d405b44b0..cc95a4b72d 100644
--- a/lms/static/sass/shared-v2/_modal.scss
+++ b/lms/static/sass/shared-v2/_modal.scss
@@ -11,261 +11,261 @@
}
.modal {
- @include span(5);
- z-index: z-index(mid-front);
- display: none;
- position: absolute;
- left: 50%;
- padding: 8px;
- border-radius: 3px;
- box-shadow: 0 0px 5px 0 $shadow-d1;
- background: $gray-d2;
- color: $base-font-color;
-
- .inner-wrapper {
+ @include span(5);
z-index: z-index(mid-front);
- background: $modal-bg-color;
- border-radius: 0;
- border: 1px solid $lms-border-color;
- box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
- overflow: hidden;
- padding-left: ($baseline/2);
- padding-right: ($baseline/2);
- padding-bottom: ($baseline/2);
- position: relative;
+ display: none;
+ position: absolute;
+ left: 50%;
+ padding: 8px;
+ border-radius: 3px;
+ box-shadow: 0 0 5px 0 $shadow-d1;
+ background: $gray-d2;
+ color: $base-font-color;
- p {
- font-size: font-size(small);
- line-height: 1.4;
- }
-
- a {
- &:hover,
- &:focus {
- text-decoration: underline;
- }
- }
-
- header {
- z-index: z-index(mid-front);
- margin-bottom: ($baseline*1.5);
- overflow: hidden;
- padding: 28px $baseline 0;
- position: relative;
-
- &::before {
- @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
- content: "";
- display: block;
- height: 400px;
- left: 0;
- margin: 0 auto;
- position: absolute;
- top: -140px;
- width: 100%;
- z-index: 1;
- }
-
- hr {
- @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
- rgba(255,255,255, 0.8) 50%,
- rgba(255,255,255, 0)));
- height: 1px;
- width: 100%;
- border: none;
- margin: 0;
- position: relative;
- z-index: 2;
-
- &::after {
- @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
- rgba(200,200,200, 1) 50%,
- rgba(200,200,200, 0)));
- height: 1px;
- width: 100%;
- bottom: 0;
- content: '';
- display: block;
- position: absolute;
- top: -1px;
- }
- }
-
- h2 {
- @extend .hd-4;
- position: relative;
- text-align: center;
- text-shadow: 0 1px rgba(255,255,255, 0.4);
- z-index: 2;
- text-transform: uppercase;
- font-family: $font-family-serif;
-
- .edx {
- text-transform: none;
- }
- }
- }
-
- .modal-form-error {
- background: tint($red,90%);
- border: 1px solid rgb(143, 14, 14);
- color: rgb(143, 14, 14);
- display: none;
- margin-bottom: $baseline;
- padding: 12px;
- }
-
- .notice {
- background: $yellow;
- border: 1px solid darken($yellow, 60%);
- color: darken($yellow, 60%);
- display: none;
- margin-bottom: $baseline;
- padding: 12px;
- }
-
- .activation-message, .message {
- padding: 0 ($baseline*2) ($baseline/2);
-
- p {
- margin-bottom: ($baseline/2);
- }
- }
-
- form {
- margin-bottom: 12px;
- padding: 0 ($baseline*2) $baseline;
- position: relative;
- z-index: 2;
-
- .input-group {
- @include clearfix();
- border-bottom: 1px solid rgb(210,210,210);
- box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
- margin-bottom: ($baseline*1.5);
+ .inner-wrapper {
+ z-index: z-index(mid-front);
+ background: $modal-bg-color;
+ border-radius: 0;
+ border: 1px solid $lms-border-color;
+ box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.7);
+ overflow: hidden;
+ padding-left: ($baseline/2);
+ padding-right: ($baseline/2);
padding-bottom: ($baseline/2);
- }
+ position: relative;
- label {
- color: $text-color;
- font: {
- family: $font-family-serif;
- style: italic;
+ p {
+ font-size: font-size(small);
+ line-height: 1.4;
}
- line-height: 1.6;
- &.field-error {
- display: block;
- color: #8F0E0E;
-
- + input, + textarea {
- border: 1px solid #CA1111;
- color: #8F0E0E;
- }
+ a {
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
}
- }
- input[type="checkbox"] {
- margin-right: ($baseline/4);
- }
+ header {
+ z-index: z-index(mid-front);
+ margin-bottom: ($baseline*1.5);
+ overflow: hidden;
+ padding: 28px $baseline 0;
+ position: relative;
- textarea {
- background: rgb(255,255,255);
+ &::before {
+ @include background-image(radial-gradient(50% 50%, circle closest-side, rgba(255,255,255, 0.8) 0%, rgba(255,255,255, 0) 100%));
+ content: "";
+ display: block;
+ height: 400px;
+ left: 0;
+ margin: 0 auto;
+ position: absolute;
+ top: -140px;
+ width: 100%;
+ z-index: 1;
+ }
+
+ hr {
+ @include background-image(linear-gradient(180deg, rgba(255,255,255, 0) 0%,
+ rgba(255,255,255, 0.8) 50%,
+ rgba(255,255,255, 0)));
+ height: 1px;
+ width: 100%;
+ border: none;
+ margin: 0;
+ position: relative;
+ z-index: 2;
+
+ &::after {
+ @include background-image(linear-gradient(180deg, rgba(200,200,200, 0) 0%,
+ rgba(200,200,200, 1) 50%,
+ rgba(200,200,200, 0)));
+ height: 1px;
+ width: 100%;
+ bottom: 0;
+ content: '';
+ display: block;
+ position: absolute;
+ top: -1px;
+ }
+ }
+
+ h2 {
+ @extend .hd-4;
+ position: relative;
+ text-align: center;
+ text-shadow: 0 1px rgba(255,255,255, 0.4);
+ z-index: 2;
+ text-transform: uppercase;
+ font-family: $font-family-serif;
+
+ .edx {
+ text-transform: none;
+ }
+ }
+ }
+
+ .modal-form-error {
+ background: tint($red,90%);
+ border: 1px solid rgb(143, 14, 14);
+ color: rgb(143, 14, 14);
+ display: none;
+ margin-bottom: $baseline;
+ padding: 12px;
+ }
+
+ .notice {
+ background: $yellow;
+ border: 1px solid darken($yellow, 60%);
+ color: darken($yellow, 60%);
+ display: none;
+ margin-bottom: $baseline;
+ padding: 12px;
+ }
+
+ .activation-message, .message {
+ padding: 0 ($baseline*2) ($baseline/2);
+
+ p {
+ margin-bottom: ($baseline/2);
+ }
+ }
+
+ form {
+ margin-bottom: 12px;
+ padding: 0 ($baseline*2) $baseline;
+ position: relative;
+ z-index: 2;
+
+ .input-group {
+ @include clearfix();
+ border-bottom: 1px solid rgb(210,210,210);
+ box-shadow: 0 1px 0 0 rgba(255,255,255, 0.6);
+ margin-bottom: ($baseline*1.5);
+ padding-bottom: ($baseline/2);
+ }
+
+ label {
+ color: $text-color;
+ font: {
+ family: $font-family-serif;
+ style: italic;
+ }
+ line-height: 1.6;
+
+ &.field-error {
+ display: block;
+ color: #8F0E0E;
+
+ + input, + textarea {
+ border: 1px solid #CA1111;
+ color: #8F0E0E;
+ }
+ }
+ }
+
+ input[type="checkbox"] {
+ @include margin-right($baseline/4);
+ }
+
+ textarea {
+ background: rgb(255,255,255);
+ display: block;
+ height: 45px;
+ margin-bottom: $baseline;
+ width: 100%;
+ }
+
+ input[type="email"],
+ input[type="text"],
+ input[type="password"] {
+ background: rgb(255,255,255);
+ display: block;
+ height: 45px;
+ margin-bottom: $baseline;
+ width: 100%;
+ }
+
+ .submit {
+ padding-top: ($baseline/2);
+
+ input[type="submit"] {
+ @extend .btn-brand;
+ display: block;
+ height: auto;
+ margin: 0 auto;
+ width: 100%;
+ white-space: normal;
+ }
+ }
+ }
+
+ .close-modal {
+ @include transition(all 0.15s ease-out 0s);
+ border-radius: 2px;
+ cursor: pointer;
+ display: inline-block;
+ padding: 10px;
+ position: absolute;
+ right: 2px;
+ top: 0;
+ z-index: z-index(front);
+ color: $lighter-base-font-color;
+ font: {
+ size: font-size(large);
+ family: $font-family-sans-serif;
+ }
+ line-height: 1;
+ text-align: center;
+ border: none;
+ background: transparent;
+ text-shadow: none;
+ letter-spacing: 0;
+ text-transform: none;
+
+ &:hover,
+ &:focus {
+ color: $base-font-color;
+ text-decoration: none;
+ opacity: 0.8;
+ }
+
+ &:focus {
+ border: none !important;
+ }
+ }
+ }
+
+ #help_wrapper,
+ #feedback_form_wrapper,
+ .discussion-alert-wrapper {
+ padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
+
+ header {
+ @include padding-left(0);
+ @include padding-right(0);
+ margin-bottom: $baseline;
+ }
+
+ .note {
+ font: {
+ size: font-size(x-small);
+ family: $font-family-sans-serif;
+ }
+ line-height: 1.475;
+ margin-top: ($baseline/2);
+ color: $lighter-base-font-color;
+ }
+ }
+
+ .tip {
+ font-size: font-size(x-small);
display: block;
- height: 45px;
- margin-bottom: $baseline;
- width: 100%;
- }
-
- input[type="email"],
- input[type="text"],
- input[type="password"] {
- background: rgb(255,255,255);
- display: block;
- height: 45px;
- margin-bottom: $baseline;
- width: 100%;
- }
-
- .submit {
- padding-top: ($baseline/2);
-
- input[type="submit"] {
- @extend .btn-brand;
- display: block;
- height: auto;
- margin: 0 auto;
- width: 100%;
- white-space: normal;
- }
- }
+ color: $dark-gray;
}
-
- .close-modal {
- @include transition(all 0.15s ease-out 0s);
- border-radius: 2px;
- cursor: pointer;
- display: inline-block;
- padding: 10px;
- position: absolute;
- right: 2px;
- top: 0px;
- z-index: z-index(front);
- color: $lighter-base-font-color;
- font: {
- size: font-size(large);
- family: $font-family-sans-serif;
- }
- line-height: 1;
- text-align: center;
- border: none;
- background: transparent;
- text-shadow: none;
- letter-spacing: 0;
- text-transform: none;
-
- &:hover,
- &:focus {
- color: $base-font-color;
- text-decoration: none;
- opacity: 0.8;
- }
-
- &:focus {
- border: none !important;
- }
- }
- }
-
- #help_wrapper,
- #feedback_form_wrapper,
- .discussion-alert-wrapper {
- padding: 0 ($baseline*1.5) ($baseline*1.5) ($baseline*1.5);
-
- header {
- margin-bottom: $baseline;
- padding-right: 0;
- padding-left: 0;
- }
-
- .note {
- font: {
- size: font-size(x-small);
- family: $font-family-sans-serif;
- }
- line-height: 1.475;
- margin-top: ($baseline/2);
- color: $lighter-base-font-color;
- }
- }
-
- .tip {
- font-size: font-size(x-small);
- display: block;
- color: $dark-gray;
- }
}
.leanModal_box {
- @extend .modal;
+ @extend .modal;
}
diff --git a/lms/static/sass/shared-v2/_variables.scss b/lms/static/sass/shared-v2/_variables.scss
index 00d0a7a101..81542474c0 100644
--- a/lms/static/sass/shared-v2/_variables.scss
+++ b/lms/static/sass/shared-v2/_variables.scss
@@ -1,7 +1,12 @@
// LMS variables
+$lms-gray: palette(grayscale, base);
$lms-background-color: palette(grayscale, white); // Why is the Pattern Library default background different?
$lms-container-background-color: palette(grayscale, white-t);
$lms-border-color: palette(grayscale, light);
$lms-label-color: palette(grayscale, black);
$lms-active-color: palette(primary, base);
+
+// Icons
+$lms-dark-icon-color: palette(grayscale, white-t);
+$lms-dark-icon-background-color: palette(grayscale, black);
diff --git a/lms/templates/ux/reference/course-skeleton.html b/lms/templates/ux/reference/course-skeleton.html
new file mode 100644
index 0000000000..eec46f9d4d
--- /dev/null
+++ b/lms/templates/ux/reference/course-skeleton.html
@@ -0,0 +1,71 @@
+## Override the default styles_version to the Pattern Library version (version 2)
+<%! main_css = "style-main-v2" %>
+
+<%page expression_filter="h"/>
+<%inherit file="/main.html" />
+
+<%block name="pagetitle">Course Skeleton%block>
+
+<%block name="bodyclass">pattern-library%block>
+
+<%block name="content">
+
+ This demonstrates the pieces available to a courseware page. Useful stuff goes hereSkeleton Page
+ This is where the page content belongs
+