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 151 additions and 338 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 @@
}
.icon-inline {
@extend %t-icon-inline;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
......
edx-docs/assets/sass/elements/_icons.scss
......@@ -10,7 +10,7 @@
}
%ui-badge {
@extend %t-title9;
@extend %t-title-9;
@extend %t-weight3;
position: relative;
border-bottom-right-radius: ($baseline/10);
......
edx-docs/assets/sass/elements/_navigation.scss
......@@ -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 @@
// ====================
// icons
%t-icon {
}
%t-icon-s {
@extend %t-icon;
@include font-size(12);
}
%t-icon-m {
@extend %t-icon;
@include font-size(16);
}
%t-icon-l {
@extend %t-icon;
@include font-size(24);
}
%t-icon-xl {
@extend %t-icon;
@include font-size(36);
}
......
edx-docs/assets/sass/utilities/_mixins.scss
......@@ -94,7 +94,6 @@
}
%ui-icon-inline {
@extend %t-icon;
display: inline-block;
vertical-align: middle;
margin-right: ($baseline/4);
......
edx-docs/assets/sass/views/_index.scss
// docs.edx.org - Index View
// ====================
// @extend .trans-size;
.view--index {
border-top: ($baseline/4) solid $blue-t1;
background: $white url('../images/bg-subtlepatterns-carbonfiber.png') 0 0 repeat;
// grid
.wrapper--view {
@include outer-container;
@include pad(($baseline*2) ($baseline*3));
// BP: mobile
......@@ -47,18 +44,8 @@
// audience
.item-audience {
// STATE: hover
&:hover {
.icon-stack-base {
color: $gray-l2;
}
.item-audience__title {
border-top-color: $gray-l2;
}
}
margin-bottom: ($baseline/2);
border-bottom: ($baseline/4) solid $gray-l5;
}
.icon-stack {
......@@ -80,17 +67,14 @@
}
.item-audience__title {
@extend %t-title-6;
@extend %t-title-4;
@extend %t-weight3;
@include transition(border-color $tmg-f1 ease-in-out);
margin-bottom: ($baseline/2);
border-top: ($baseline/4) solid $gray-l5;
padding-top: ($baseline*1.5);
}
.item-audience__copy {
@extend %t-copy-base;
margin-bottom: ($baseline*0.75);
margin-bottom: $baseline;
// BP: small desktop
@include media($bp-ds) {
......@@ -111,16 +95,10 @@
// audience: link lists
.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 {
@extend %t-title-7;
@extend %t-title-6;
color: $blue-u1;
margin-bottom: ($baseline/4);
}
.item-link__copy {
......@@ -128,6 +106,13 @@
@extend %t-copy-sub1;
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
......@@ -148,21 +133,6 @@
opacity: 0.9;
}
}
// audience: specific - devs
.item-audience--developers {
}
// audience: specific - researchers
.item-audience--researchers {
}
// audience: specific - authors
.item-audience--authors {
}
}
// elems: introduction
......@@ -203,35 +173,29 @@
// masthead: brand
.wrapper--logo {
@extend .trans-size;
@include span-columns(2 of 12);
@include shift(5);
@include pad(($baseline*0.75) $baseline);
position: relative;
top: -($baseline/2);
display: block;
width: 15%;
margin: 0 auto;
box-shadow: 0 2px 2px 0 $shadow-l1;
border-top: ($baseline/4) solid $blue-s1;
background: $white-t;
// BP: medium desktop
@include media($bp-dm) {
@include span-columns(2 of 12);
@include shift(5);
@include pad(($baseline/2) ($baseline*0.75));
width: 20%;
}
// BP: small desktop
@include media($bp-ds) {
@include span-columns(2 of 6);
@include shift(2);
@include pad(($baseline/2) ($baseline*0.75));
width: 30%;
}
// BP: mobile
@include media($bp-m) {
@include span-columns(2 of 6);
@include shift(2);
@include pad(($baseline/2) ($baseline/2));
width: 40%;
}
*[class^="depth"] {
......@@ -331,45 +295,20 @@
// ====================
// content
.wrapper--content {
@include outer-container;
}
// main content
.content--view {
@include span-columns(12);
@include pad(($baseline*2));
box-shadow: 0 2px 2px 0 $shadow-l1;
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 {
@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 {
@extend %t-copy-lead1;
......@@ -391,138 +330,92 @@
// elem: audience lists
.item-audience {
@extend .trans-size;
@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);
}
margin-bottom: ($baseline*2);
// 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*3);
}
// NOTE: semi-nasty hack for visual display harmony
.list--links {
@include row();
margin-top: ($baseline*0.75);
&.item-audience--developers {
@include span-columns(8 of 8);
margin-bottom: ($baseline*2);
&:first-child {
margin-top: 0;
}
// NOTE: semi-nasty hack for visual display harmony
.list--links {
@extend %ui-wipe-last-child;
@include span-columns(8 of 8);
@include pad(0 0 ($baseline/2) 0);
border-bottom: 1px solid $gray-l5;
margin-top: ($baseline*0.75);
&:first-child {
margin-top: 0;
}
// BP: medium desktop
@include media($bp-dm) {
@include pad(0);
margin-top: 0;
border-bottom: none;
}
// BP: small desktop
@include media($bp-ds) {
@include pad(0);
margin-top: 0;
border-bottom: none;
}
// BP: mobile
@include media($bp-m) {
@include pad(0);
margin-top: 0;
border-bottom: none;
}
// BP: medium desktop
@include media($bp-dm) {
margin-top: 0;
}
.item-link {
@include span-columns(4 of 8);
@include pad(0);
border: none;
// BP: medium desktop
@include media($bp-dm) {
@include fill-parent;
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
// BP: small desktop
@include media($bp-ds) {
@include fill-parent;
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
// BP: mobile
@include media($bp-m) {
@include fill-parent;
@include pad(0 0 ($baseline/2) 0);
margin-bottom: ($baseline/2);
border-bottom: 1px solid $gray-l5;
}
// BP: small desktop
@include media($bp-ds) {
margin-top: 0;
}
}
}
}
.content__supplementary {
@extend .trans-size;
@include span-columns(4 of 12);
// BP: mobile
@include media($bp-m) {
margin-top: 0;
}
}
// BP: medium desktop
@include media($bp-dm) {
@include fill-parent;
}
.item-link {
margin-bottom: $baseline;
// BP: small desktop
@include media($bp-ds) {
@include fill-parent;
}
// BP: large desktop
@include media($bp-dl) {
@include span-columns(4 of 12);
@include omega(3n);
min-height: ($baseline*6);
}
// BP: mobile
@include media($bp-m) {
@include fill-parent;
}
// BP: medium desktop
@include media($bp-dm) {
@include span-columns(6 of 12);
@include omega(2n);
min-height: ($baseline*6);
}
.info {
@include transition(border-color $tmg-f1 ease-in-out);
border-top: ($baseline/4) solid $gray-l5;
padding-top: ($baseline/2);
// BP: small desktop
@include media($bp-ds) {
@include fill-parent();
}
// STATE: hover
&:hover {
border-top-color: $gray-l2;
// BP: mobile
@include media($bp-m) {
@include fill-parent();
}
}
}
}
.content__supplementary {
.info__title {
@extend %t-title-8;
@extend %t-title-4;
@extend %t-weight3;
margin-bottom: ($baseline/2);
}
.info__copy {
@extend %t-copy-sub1;
@extend %t-copy-base;
// BP: small desktop
@include media($bp-ds) {
// NOTE: drat! typography extends don't work
@include font-size(14);
@include lh(14);
}
// BP: mobile
@include media($bp-m) {
// NOTE: drat! typography extends don't work
@include font-size(14);
@include lh(14);
}
}
}
}
index.html
......@@ -7,7 +7,7 @@
<meta charset="utf-8">
<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="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
......@@ -47,79 +47,65 @@
</abbr>
</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>
</header>
</div>
<div class="wrapper--content">
<section class="content content--view">
<div class="content content--view">
<article class="content__main">
<ul class="list--docs">
<li class="item-audience item-audience--developers">
<span class="icon-stack">
<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="list--docs">
<section class="item-audience item-audience--partners">
<h3 class="item-audience__title">edX Partners</h3>
<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>
<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">
<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">
<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>
</a>
</li>
<li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/xblock/en/latest/">
<h4 class="item-link__title">XBlock</h4>
<a class="item-link__action" href="http://edx-insights.readthedocs.org/en/latest/">
<h4 class="item-link__title">Using edX Insights</h4>
<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>
</a>
</li>
</ul>
<ul class="list--links">
<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>
<a class="item-link__action" href="http://edx-insights.readthedocs.org/en/latest/">
<h4 class="item-link__title">Creating a Peer Assessment</h4>
<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>
</a>
</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">
<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>
<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>
......@@ -127,75 +113,69 @@
</a>
</li>
<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>
</ul>
</li>
</section>
<li class="item-audience item-audience--authors">
<span class="icon-stack">
<i class="icon-circle icon-stack-base"></i>
<i class="icon-pencil icon-light"></i>
</span>
<section class="item-audience item-audience--release">
<h3 class="item-audience__title">Open edX</h3>
<h3 class="item-audience__title">Course Authors</h3>
<div class="item-audience__copy">
<p>The following documentation is for developers and service providers who are contributing to, extending, and hosting Open edX.</p>
</div>
<!-- <div class="item-audience__copy">
<p>
Need to create an edX course?
</p>
</div> -->
<ul class="list--links">
<li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/userdocs/en/latest/">
<h4 class="item-link__title">edX Developer Documentation</h4>
<div class="item-link__copy">
<p>For developers contributing to the edX platform.</p>
</div>
</a>
</li>
<ul class="list--links">
<li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/edx-partner-course-staff/en/latest/">
<h4 class="item-link__title">Building and Running an edX Course</h4>
<a class="item-link__action" href="http://edx.readthedocs.org/projects/xblock/en/latest/">
<h4 class="item-link__title">XBlock</h4>
<div class="item-link__copy">
<p>
For course staff building and running classes on edx.org and edX Edge.
</p>
<p>Describes XBlock, the component architecture for building courseware.</p>
</div>
</a>
</li>
<li class="item-link">
<a class="item-link__action" href="http://edx.readthedocs.org/projects/edx-open-response-assessments/en/latest/">
<h4 class="item-link__title">Creating a Peer Assessment</h4>
<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>
For course staff who are including peer assessments in a class.
</p>
<p>Instructions for setting up Open edX for development and production purposes.</p>
</div>
</a>
</li>
</ul>
</li>
</ul>
</section>
</div>
</article>
<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">
<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>
</div>
</div>
<div class="info">
<h2 class="info__title">Feedback or Questions about edX Documentation</h2>
<div class="info info--contact">
<h2 class="info__title">Questions or Ideas?</h2>
<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>
</aside>
</section>
</div>
</div>
<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