Skip to content

E
edx-platform
Commit c0fba983 by Brian Talbot Committed by Mark Hoeber
Options

revising docs.edx.org layout/content structure: 

* main section revisions
* grid based revisions to link lists
* adding feedback section to bottom of view
* minor typography adjustments
* simplification of Sass/breakpoint logic
* adding last updated UI element to items
parent d2b2688c
Showing with 116 additions and 303 deletions
edx-docs/assets/css/main.css
This source diff could not be displayed because it is too large. You can view the blob instead.
edx-docs/assets/sass/elements/_controls.scss
...@@ -19,7 +19,6 @@ ...@@ -19,7 +19,6 @@
} }
.icon-inline { .icon-inline {
@extend %t-icon-inline;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/4); margin-right: ($baseline/4);
......
edx-docs/assets/sass/elements/_icons.scss
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
} }
%ui-badge { %ui-badge {
@extend %t-title9; @extend %t-title-9;
@extend %t-weight3; @extend %t-weight3;
position: relative; position: relative;
border-bottom-right-radius: ($baseline/10); border-bottom-right-radius: ($baseline/10);
......
edx-docs/assets/sass/elements/_navigation.scss
...@@ -15,53 +15,3 @@ nav { ...@@ -15,53 +15,3 @@ nav {
} }
} }
} }
// types - pill (left - right)
%nav-pill {
}
// types - blocks (top - bottom)
%nav-blocks {
}
// ====================
// primary navigation
nav.primary {
.nav-item {
a {
}
}
}
// ====================
// secondary navigation
nav.secondary {
&.horizontal {
@extend %nav-pill;
}
&.vertical {
@extend %nav-blocks;
}
}
// ====================
nav.pagination {
@extend %nav-pill;
}
// ====================
// footer/peripheral
nav.peripheral {
}
edx-docs/assets/sass/elements/_typography.scss
...@@ -145,27 +145,19 @@ ...@@ -145,27 +145,19 @@
// ==================== // ====================
// icons // icons
%t-icon {
}
%t-icon-s { %t-icon-s {
@extend %t-icon;
@include font-size(12); @include font-size(12);
} }
%t-icon-m { %t-icon-m {
@extend %t-icon;
@include font-size(16); @include font-size(16);
} }
%t-icon-l { %t-icon-l {
@extend %t-icon;
@include font-size(24); @include font-size(24);
} }
%t-icon-xl { %t-icon-xl {
@extend %t-icon;
@include font-size(36); @include font-size(36);
} }
......
edx-docs/assets/sass/utilities/_mixins.scss
...@@ -94,7 +94,6 @@ ...@@ -94,7 +94,6 @@
} }
%ui-icon-inline { %ui-icon-inline {
@extend %t-icon;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/4); margin-right: ($baseline/4);
......
edx-docs/assets/sass/views/_index.scss
// docs.edx.org - Index View // docs.edx.org - Index View
// ==================== // ====================
// @extend .trans-size;
.view--index { .view--index {
border-top: ($baseline/4) solid $blue-t1; border-top: ($baseline/4) solid $blue-t1;
background: $white url('../images/bg-subtlepatterns-carbonfiber.png') 0 0 repeat; background: $white url('../images/bg-subtlepatterns-carbonfiber.png') 0 0 repeat;
// grid // grid
.wrapper--view { .wrapper--view {
@include outer-container;
@include pad(($baseline*2) ($baseline*3)); @include pad(($baseline*2) ($baseline*3));
// BP: mobile // BP: mobile
...@@ -47,18 +44,8 @@ ...@@ -47,18 +44,8 @@
// audience // audience
.item-audience { .item-audience {
margin-bottom: ($baseline/2);
// STATE: hover border-bottom: ($baseline/4) solid $gray-l5;
&:hover {
.icon-stack-base {
color: $gray-l2;
}
.item-audience__title {
border-top-color: $gray-l2;
}
}
} }
.icon-stack { .icon-stack {
...@@ -80,17 +67,14 @@ ...@@ -80,17 +67,14 @@
} }
.item-audience__title { .item-audience__title {
@extend %t-title-6; @extend %t-title-4;
@extend %t-weight3; @extend %t-weight3;
@include transition(border-color $tmg-f1 ease-in-out);
margin-bottom: ($baseline/2); margin-bottom: ($baseline/2);
border-top: ($baseline/4) solid $gray-l5;
padding-top: ($baseline*1.5);
} }
.item-audience__copy { .item-audience__copy {
@extend %t-copy-base; @extend %t-copy-base;
margin-bottom: ($baseline*0.75); margin-bottom: $baseline;
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
...@@ -111,16 +95,10 @@ ...@@ -111,16 +95,10 @@
// audience: link lists // audience: link lists
.list--links { .list--links {
.item-link {
@extend %ui-wipe-last-child;
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
.item-link__title { .item-link__title {
@extend %t-title-7; @extend %t-title-6;
color: $blue-u1; color: $blue-u1;
margin-bottom: ($baseline/4);
} }
.item-link__copy { .item-link__copy {
...@@ -128,6 +106,13 @@ ...@@ -128,6 +106,13 @@
@extend %t-copy-sub1; @extend %t-copy-sub1;
color: $gray-l3; color: $gray-l3;
} }
.item-link__updated-date {
@extend %t-copy-sub1;
@extend %t-weight3;
margin-bottom: ($baseline/2);
color: $gray-l3;
}
} }
// audience: link lists - ixd // audience: link lists - ixd
...@@ -148,21 +133,6 @@ ...@@ -148,21 +133,6 @@
opacity: 0.9; opacity: 0.9;
} }
} }
// audience: specific - devs
.item-audience--developers {
}
// audience: specific - researchers
.item-audience--researchers {
}
// audience: specific - authors
.item-audience--authors {
}
} }
// elems: introduction // elems: introduction
...@@ -203,35 +173,29 @@ ...@@ -203,35 +173,29 @@
// masthead: brand // masthead: brand
.wrapper--logo { .wrapper--logo {
@extend .trans-size;
@include span-columns(2 of 12);
@include shift(5);
@include pad(($baseline*0.75) $baseline); @include pad(($baseline*0.75) $baseline);
position: relative; position: relative;
top: -($baseline/2); top: -($baseline/2);
display: block;
width: 15%;
margin: 0 auto;
box-shadow: 0 2px 2px 0 $shadow-l1; box-shadow: 0 2px 2px 0 $shadow-l1;
border-top: ($baseline/4) solid $blue-s1; border-top: ($baseline/4) solid $blue-s1;
background: $white-t; background: $white-t;
// BP: medium desktop // BP: medium desktop
@include media($bp-dm) { @include media($bp-dm) {
@include span-columns(2 of 12); width: 20%;
@include shift(5);
@include pad(($baseline/2) ($baseline*0.75));
} }
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
@include span-columns(2 of 6); width: 30%;
@include shift(2);
@include pad(($baseline/2) ($baseline*0.75));
} }
// BP: mobile // BP: mobile
@include media($bp-m) { @include media($bp-m) {
@include span-columns(2 of 6); width: 40%;
@include shift(2);
@include pad(($baseline/2) ($baseline/2));
} }
*[class^="depth"] { *[class^="depth"] {
...@@ -331,45 +295,20 @@ ...@@ -331,45 +295,20 @@
// ==================== // ====================
// content
.wrapper--content {
@include outer-container;
}
// main content // main content
.content--view { .content--view {
@include span-columns(12); @include pad(($baseline*2));
box-shadow: 0 2px 2px 0 $shadow-l1; box-shadow: 0 2px 2px 0 $shadow-l1;
background: $white-t; background: $white-t;
@include pad(($baseline*3));
// BP: small desktop
@include media($bp-ds) {
@include pad(($baseline*2));
}
// BP: mobile
@include media($bp-m) {
@include pad(($baseline*2));
}
} }
.content__main { .content__main {
@extend .trans-size;
@include span-columns(8 of 12);
// BP: medium desktop
@include media($bp-dm) {
@include fill-parent;
margin-bottom: ($baseline*3);
}
// BP: small desktop
@include media($bp-ds) {
@include fill-parent;
margin-bottom: ($baseline*2);
}
// BP: mobile
@include media($bp-m) {
@include fill-parent;
margin-bottom: ($baseline*2); margin-bottom: ($baseline*2);
}
.introduction__copy { .introduction__copy {
@extend %t-copy-lead1; @extend %t-copy-lead1;
...@@ -391,39 +330,16 @@ ...@@ -391,39 +330,16 @@
// elem: audience lists // elem: audience lists
.item-audience { .item-audience {
@extend .trans-size; margin-bottom: ($baseline*2);
@extend %ui-wipe-last-child;
@include span-columns(4 of 8);
position: relative;
// BP: medium desktop
@include media($bp-dm) {
@include fill-parent;
margin-bottom: ($baseline*3);
}
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
@include fill-parent;
margin-bottom: ($baseline*2); margin-bottom: ($baseline*2);
} }
// BP: mobile
@include media($bp-m) {
@include fill-parent;
margin-bottom: ($baseline*3);
}
&.item-audience--developers {
@include span-columns(8 of 8);
margin-bottom: ($baseline*2);
// NOTE: semi-nasty hack for visual display harmony // NOTE: semi-nasty hack for visual display harmony
.list--links { .list--links {
@extend %ui-wipe-last-child; @include row();
@include span-columns(8 of 8);
@include pad(0 0 ($baseline/2) 0);
border-bottom: 1px solid $gray-l5;
margin-top: ($baseline*0.75); margin-top: ($baseline*0.75);
&:first-child { &:first-child {
...@@ -432,97 +348,74 @@ ...@@ -432,97 +348,74 @@
// BP: medium desktop // BP: medium desktop
@include media($bp-dm) { @include media($bp-dm) {
@include pad(0);
margin-top: 0; margin-top: 0;
border-bottom: none;
} }
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
@include pad(0);
margin-top: 0; margin-top: 0;
border-bottom: none;
} }
// BP: mobile // BP: mobile
@include media($bp-m) { @include media($bp-m) {
@include pad(0);
margin-top: 0; margin-top: 0;
border-bottom: none;
} }
} }
.item-link { .item-link {
@include span-columns(4 of 8); margin-bottom: $baseline;
@include pad(0);
border: none; // BP: large desktop
@include media($bp-dl) {
@include span-columns(4 of 12);
@include omega(3n);
min-height: ($baseline*6);
}
// BP: medium desktop // BP: medium desktop
@include media($bp-dm) { @include media($bp-dm) {
@include fill-parent; @include span-columns(6 of 12);
@include pad(0 0 ($baseline/2) 0); @include omega(2n);
margin-bottom: ($baseline/2); min-height: ($baseline*6);
border-bottom: 1px solid $gray-l5;
} }
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
@include fill-parent; @include fill-parent();
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
} }
// BP: mobile // BP: mobile
@include media($bp-m) { @include media($bp-m) {
@include fill-parent; @include fill-parent();
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
} }
} }
} }
} }
.content__supplementary { .content__supplementary {
@extend .trans-size;
@include span-columns(4 of 12);
// BP: medium desktop .info__title {
@include media($bp-dm) { @extend %t-title-4;
@include fill-parent; @extend %t-weight3;
margin-bottom: ($baseline/2);
} }
.info__copy {
@extend %t-copy-base;
// BP: small desktop // BP: small desktop
@include media($bp-ds) { @include media($bp-ds) {
@include fill-parent; // NOTE: drat! typography extends don't work
@include font-size(14);
@include lh(14);
} }
// BP: mobile // BP: mobile
@include media($bp-m) { @include media($bp-m) {
@include fill-parent; // NOTE: drat! typography extends don't work
} @include font-size(14);
@include lh(14);
.info {
@include transition(border-color $tmg-f1 ease-in-out);
border-top: ($baseline/4) solid $gray-l5;
padding-top: ($baseline/2);
// STATE: hover
&:hover {
border-top-color: $gray-l2;
}
}
.info__title {
@extend %t-title-8;
@extend %t-weight3;
margin-bottom: ($baseline/2);
} }
.info__copy {
@extend %t-copy-sub1;
} }
} }
} }
index.html
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>Documentation For Developers and Course Authors | edX</title> <title>Documentation For edX Partners and the Open edX Community | edX</title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
...@@ -47,79 +47,65 @@ ...@@ -47,79 +47,65 @@
</abbr> </abbr>
</h1> </h1>
<h2 class="header__tagline">Documentation for the open source edX platform</h2> <h2 class="header__tagline">Documentation for edX Partners and the Open edX Community</h2>
</div> </div>
</header> </header>
</div> </div>
<div class="wrapper--content"> <div class="wrapper--content">
<section class="content content--view"> <div class="content content--view">
<article class="content__main"> <article class="content__main">
<ul class="list--docs"> <div class="list--docs">
<li class="item-audience item-audience--developers"> <section class="item-audience item-audience--partners">
<span class="icon-stack"> <h3 class="item-audience__title">edX Partners</h3>
<i class="icon-circle icon-stack-base"></i>
<i class="icon-code icon-light"></i>
</span>
<h3 class="item-audience__title">For Developers</h3>
<div class="item-audience__copy"> <div class="item-audience__copy">
<p>Want to contribute code to the Open edX platform? Want to understand things from the inside out? Start here.</p> <p>The following documentation is for edX Partners and Members who use the edX Platform on edX.org and edX Edge.</p>
</div> </div>
<ul class="list--links"> <ul class="list--links">
<li class="item-link">
<a class="item-link__action" rel="external" href="http://edx.readthedocs.org/projects/edx-release-notes/en/latest/">
<h4 class="item-link__title">Release Notes</h4>
<div class="item-link__updated-date">Last Updated: September 30, 2014</div>
<div class="item-link__copy">
<p>A cumulative list of released changes to edX.org and edX Edge.</p>
</div>
</a>
</li>
<li class="item-link"> <li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/userdocs/en/latest/"> <a class="item-link__action" href="http://edx.readthedocs.org/projects/userdocs/en/latest/">
<h4 class="item-link__title">edX Developer Documentation</h4> <h4 class="item-link__title">Building and Running an edX Course</h4>
<div class="item-link__copy"> <div class="item-link__copy">
<p>For developers contributing to the edX platform.</p> <p>Instructions for building a course with edX Studio and running the course in the edX Learning Management System.</p>
</div> </div>
</a> </a>
</li> </li>
<li class="item-link"> <li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/xblock/en/latest/"> <a class="item-link__action" href="http://edx-insights.readthedocs.org/en/latest/">
<h4 class="item-link__title">XBlock</h4> <h4 class="item-link__title">Using edX Insights</h4>
<div class="item-link__copy"> <div class="item-link__copy">
<p>XBlock is a component architecture for building courseware.</p> <p>Describes the visualizations, metrics, and tables used to present course-related data to course teams.</p>
</div> </div>
</a> </a>
</li> </li>
</ul>
<ul class="list--links">
<li class="item-link"> <li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/edx-installing-configuring-and-running/en/latest/"> <a class="item-link__action" href="http://edx-insights.readthedocs.org/en/latest/">
<h4 class="item-link__title">Installing, Configuring, and Running the edX Platform</h4> <h4 class="item-link__title">Creating a Peer Assessment</h4>
<div class="item-link__copy"> <div class="item-link__copy">
<p>For those setting up the open source edX Platform for development and production purposes.</p> <p>Instructions for creating course assignments that use peer and self assessments.</p>
</div> </div>
</a> </a>
</li> </li>
</ul>
</li>
<li class="item-audience item-audience--researchers">
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-bar-chart icon-light"></i>
</span>
<h3 class="item-audience__title">Researchers</h3>
<!-- <div class="item-audience__copy">
<p>
Start here to understand how we persist information and activity.</p>
</div> -->
<ul class="list--links">
<li class="item-link"> <li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/devdata/en/latest/"> <a class="item-link__action" href="http://edx-insights.readthedocs.org/en/latest/">
<h4 class="item-link__title">Research Guide</h4> <h4 class="item-link__title">Research Guide</h4>
<div class="item-link__copy"> <div class="item-link__copy">
<p>For researchers and data czars at edX partner institutions who use the edX data exports to gain insight into their courses and students.</p> <p>For researchers and data czars at edX partner institutions who use the edX data exports to gain insight into their courses and students.</p>
...@@ -127,75 +113,69 @@ ...@@ -127,75 +113,69 @@
</a> </a>
</li> </li>
</ul> <li class="item-link">
<a class="item-link__action" href="http://edx-guide-for-students.readthedocs.org/en/latest/">
<h4 class="item-link__title">Student Guide</h4>
<div class="item-link__copy">
<p>Help for learners taking an edX course.</p>
</div>
</a>
</li> </li>
<li class="item-audience item-audience--authors"> </ul>
<span class="icon-stack"> </section>
<i class="icon-circle icon-stack-base"></i>
<i class="icon-pencil icon-light"></i>
</span>
<h3 class="item-audience__title">Course Authors</h3> <section class="item-audience item-audience--release">
<h3 class="item-audience__title">Open edX</h3>
<!-- <div class="item-audience__copy"> <div class="item-audience__copy">
<p> <p>The following documentation is for developers and service providers who are contributing to, extending, and hosting Open edX.</p>
Need to create an edX course? </div>
</p>
</div> -->
<ul class="list--links"> <ul class="list--links">
<li class="item-link"> <li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/edx-partner-course-staff/en/latest/"> <a class="item-link__action" href="http://edx.readthedocs.org/projects/userdocs/en/latest/">
<h4 class="item-link__title">Building and Running an edX Course</h4> <h4 class="item-link__title">edX Developer Documentation</h4>
<div class="item-link__copy"> <div class="item-link__copy">
<p> <p>For developers contributing to the edX platform.</p>
For course staff building and running classes on edx.org and edX Edge.
</p>
</div> </div>
</a> </a>
</li> </li>
<li class="item-link"> <li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/edx-open-response-assessments/en/latest/"> <a class="item-link__action" href="http://edx.readthedocs.org/projects/xblock/en/latest/">
<h4 class="item-link__title">Creating a Peer Assessment</h4> <h4 class="item-link__title">XBlock</h4>
<div class="item-link__copy"> <div class="item-link__copy">
<p> <p>Describes XBlock, the component architecture for building courseware.</p>
For course staff who are including peer assessments in a class.
</p>
</div> </div>
</a> </a>
</li> </li>
</ul>
<li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/edx-installing-configuring-and-running/en/latest/">
<h4 class="item-link__title">Installing, Configuring, and Running the edX Platform</h4>
<div class="item-link__copy">
<p>Instructions for setting up Open edX for development and production purposes.</p>
</div>
</a>
</li> </li>
</ul> </ul>
</section>
</div>
</article> </article>
<aside class="content__supplementary"> <aside class="content__supplementary">
<div class="info info--how">
<h2 class="title info__title">What’s New as of September 25, 2014</h2>
<div class="info__copy">
<p>Read a <a rel="external" href="http://edx.readthedocs.org/projects/edx-release-notes/en/latest/">cumulative list of released changes</a> in the edX Platform.</p>
</div>
</div>
<div class="info info--how">
<h2 class="title info__title">How we build docs</h2>
<div class="info__copy"> <div class="info">
<p>Our documentation is built with <a rel="external" href="http://sphinx-doc.org/">Sphinx</a> and hosted on <a rel="external" href="https://readthedocs.org/">ReadTheDocs</a>. We chose these tools because of their open source nature and dedication to the Python community. If you can write in <a rel="external" href="http://docutils.sourceforge.net/rst.html">reStructuredText</a> format (it's like Markdown), we would love contributions to our documentation.</p> <h2 class="info__title">Feedback or Questions about edX Documentation</h2>
</div>
</div>
<div class="info info--contact">
<h2 class="info__title">Questions or Ideas?</h2>
<div class="info__copy"> <div class="info__copy">
<p>EdX is still early days and we'd love your input. If you'd like to join the conversation, <a href="https://groups.google.com/forum/#!forum/edx-code">join our mailing list</a>.</p> <p>edX welcomes and appreciates your comments on and requests for documentation. Just email us at <a href="mailto:docs@edx.org">docs@edx.org</a>.</p>
</div> </div>
</div> </div>
</aside> </aside>
</section> </div>
</div> </div>
<footer class="footer--primary" role="contentinfo"> <footer class="footer--primary" role="contentinfo">
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment