From 9814187edd2c980466fa9bdba0d32fdff56a08fc Mon Sep 17 00:00:00 2001 From: Jeremy Prevost Date: Wed, 12 Jul 2017 10:49:13 -0400 Subject: [PATCH 1/3] github page-ify --- Gemfile | 3 + Gemfile.lock | 200 +++ README.md | 4 + .../assets-site-head.html | 5 +- .../footer-site-slim.html | 0 {templates => _includes}/footer-site.html | 0 .../header-site-slim.html | 0 .../scripts-site-foot.html | 0 _layouts/default.html | 78 ++ {sass => _sass}/_core.scss | 0 {sass => _sass}/apps/_ebooks.scss | 0 {sass => _sass}/apps/_quicksubmit.scss | 0 {sass => _sass}/ebooks-main.scss | 0 {sass => _sass}/elements/_content.scss | 0 {sass => _sass}/elements/_controls.scss | 0 {sass => _sass}/elements/_footer.scss | 0 {sass => _sass}/elements/_forms.scss | 0 {sass => _sass}/elements/_header.scss | 0 {sass => _sass}/elements/_modules.scss | 0 {sass => _sass}/global/_base.scss | 0 {sass => _sass}/global/_helpers.scss | 0 {sass => _sass}/global/_layouts.scss | 0 {sass => _sass}/global/_shame.scss | 0 {sass => _sass}/global/_typography.scss | 0 {sass => _sass}/global/_unsets.scss | 0 {sass => _sass}/global/_variables.scss | 0 {sass => _sass}/global/_vendor-overrides.scss | 0 {sass => _sass}/guide-helper.scss | 0 {sass => _sass}/libraries-main.scss | 0 {sass => _sass}/quicksubmit.sass | 0 css/styles.scss | 7 + examples.md | 818 +++++++++++++ templates/examples.html | 1088 ----------------- templates/header-site.html | 0 34 files changed, 1112 insertions(+), 1091 deletions(-) create mode 100644 Gemfile create mode 100644 Gemfile.lock rename {templates => _includes}/assets-site-head.html (76%) rename {templates => _includes}/footer-site-slim.html (100%) rename {templates => _includes}/footer-site.html (100%) rename {templates => _includes}/header-site-slim.html (100%) rename {templates => _includes}/scripts-site-foot.html (100%) create mode 100644 _layouts/default.html rename {sass => _sass}/_core.scss (100%) rename {sass => _sass}/apps/_ebooks.scss (100%) rename {sass => _sass}/apps/_quicksubmit.scss (100%) rename {sass => _sass}/ebooks-main.scss (100%) rename {sass => _sass}/elements/_content.scss (100%) rename {sass => _sass}/elements/_controls.scss (100%) rename {sass => _sass}/elements/_footer.scss (100%) rename {sass => _sass}/elements/_forms.scss (100%) rename {sass => _sass}/elements/_header.scss (100%) rename {sass => _sass}/elements/_modules.scss (100%) rename {sass => _sass}/global/_base.scss (100%) rename {sass => _sass}/global/_helpers.scss (100%) rename {sass => _sass}/global/_layouts.scss (100%) rename {sass => _sass}/global/_shame.scss (100%) rename {sass => _sass}/global/_typography.scss (100%) rename {sass => _sass}/global/_unsets.scss (100%) rename {sass => _sass}/global/_variables.scss (100%) rename {sass => _sass}/global/_vendor-overrides.scss (100%) rename {sass => _sass}/guide-helper.scss (100%) rename {sass => _sass}/libraries-main.scss (100%) rename {sass => _sass}/quicksubmit.sass (100%) create mode 100644 css/styles.scss create mode 100644 examples.md delete mode 100644 templates/examples.html delete mode 100644 templates/header-site.html diff --git a/Gemfile b/Gemfile new file mode 100644 index 0000000..c9837eb --- /dev/null +++ b/Gemfile @@ -0,0 +1,3 @@ +source 'https://rubygems.org' +gem 'github-pages', group: :jekyll_plugins +gem 'jemoji' diff --git a/Gemfile.lock b/Gemfile.lock new file mode 100644 index 0000000..42c7973 --- /dev/null +++ b/Gemfile.lock @@ -0,0 +1,200 @@ +GEM + remote: https://rubygems.org/ + specs: + activesupport (4.2.8) + i18n (~> 0.7) + minitest (~> 5.1) + thread_safe (~> 0.3, >= 0.3.4) + tzinfo (~> 1.1) + addressable (2.5.1) + public_suffix (~> 2.0, >= 2.0.2) + coffee-script (2.4.1) + coffee-script-source + execjs + coffee-script-source (1.12.2) + colorator (1.1.0) + ethon (0.10.1) + ffi (>= 1.3.0) + execjs (2.7.0) + faraday (0.12.1) + multipart-post (>= 1.2, < 3) + ffi (1.9.18) + forwardable-extended (2.6.0) + gemoji (3.0.0) + github-pages (140) + activesupport (= 4.2.8) + github-pages-health-check (= 1.3.4) + jekyll (= 3.4.3) + jekyll-avatar (= 0.4.2) + jekyll-coffeescript (= 1.0.1) + jekyll-default-layout (= 0.1.4) + jekyll-feed (= 0.9.2) + jekyll-gist (= 1.4.0) + jekyll-github-metadata (= 2.3.1) + jekyll-mentions (= 1.2.0) + jekyll-optional-front-matter (= 0.1.2) + jekyll-paginate (= 1.1.0) + jekyll-readme-index (= 0.1.0) + jekyll-redirect-from (= 0.12.1) + jekyll-relative-links (= 0.4.0) + jekyll-sass-converter (= 1.5.0) + jekyll-seo-tag (= 2.2.3) + jekyll-sitemap (= 1.0.0) + jekyll-swiss (= 0.4.0) + jekyll-theme-architect (= 0.0.4) + jekyll-theme-cayman (= 0.0.4) + jekyll-theme-dinky (= 0.0.4) + jekyll-theme-hacker (= 0.0.4) + jekyll-theme-leap-day (= 0.0.4) + jekyll-theme-merlot (= 0.0.4) + jekyll-theme-midnight (= 0.0.4) + jekyll-theme-minimal (= 0.0.4) + jekyll-theme-modernist (= 0.0.4) + jekyll-theme-primer (= 0.2.1) + jekyll-theme-slate (= 0.0.4) + jekyll-theme-tactile (= 0.0.4) + jekyll-theme-time-machine (= 0.0.4) + jekyll-titles-from-headings (= 0.1.5) + jemoji (= 0.8.0) + kramdown (= 1.13.2) + liquid (= 3.0.6) + listen (= 3.0.6) + mercenary (~> 0.3) + minima (= 2.1.1) + rouge (= 1.11.1) + terminal-table (~> 1.4) + github-pages-health-check (1.3.4) + addressable (~> 2.3) + net-dns (~> 0.8) + octokit (~> 4.0) + public_suffix (~> 2.0) + typhoeus (~> 0.7) + html-pipeline (2.6.0) + activesupport (>= 2) + nokogiri (>= 1.4) + i18n (0.8.4) + jekyll (3.4.3) + addressable (~> 2.4) + colorator (~> 1.0) + jekyll-sass-converter (~> 1.0) + jekyll-watch (~> 1.1) + kramdown (~> 1.3) + liquid (~> 3.0) + mercenary (~> 0.3.3) + pathutil (~> 0.9) + rouge (~> 1.7) + safe_yaml (~> 1.0) + jekyll-avatar (0.4.2) + jekyll (~> 3.0) + jekyll-coffeescript (1.0.1) + coffee-script (~> 2.2) + jekyll-default-layout (0.1.4) + jekyll (~> 3.0) + jekyll-feed (0.9.2) + jekyll (~> 3.3) + jekyll-gist (1.4.0) + octokit (~> 4.2) + jekyll-github-metadata (2.3.1) + jekyll (~> 3.1) + octokit (~> 4.0, != 4.4.0) + jekyll-mentions (1.2.0) + activesupport (~> 4.0) + html-pipeline (~> 2.3) + jekyll (~> 3.0) + jekyll-optional-front-matter (0.1.2) + jekyll (~> 3.0) + jekyll-paginate (1.1.0) + jekyll-readme-index (0.1.0) + jekyll (~> 3.0) + jekyll-redirect-from (0.12.1) + jekyll (~> 3.3) + jekyll-relative-links (0.4.0) + jekyll (~> 3.3) + jekyll-sass-converter (1.5.0) + sass (~> 3.4) + jekyll-seo-tag (2.2.3) + jekyll (~> 3.3) + jekyll-sitemap (1.0.0) + jekyll (~> 3.3) + jekyll-swiss (0.4.0) + jekyll-theme-architect (0.0.4) + jekyll (~> 3.3) + jekyll-theme-cayman (0.0.4) + jekyll (~> 3.3) + jekyll-theme-dinky (0.0.4) + jekyll (~> 3.3) + jekyll-theme-hacker (0.0.4) + jekyll (~> 3.3) + jekyll-theme-leap-day (0.0.4) + jekyll (~> 3.3) + jekyll-theme-merlot (0.0.4) + jekyll (~> 3.3) + jekyll-theme-midnight (0.0.4) + jekyll (~> 3.3) + jekyll-theme-minimal (0.0.4) + jekyll (~> 3.3) + jekyll-theme-modernist (0.0.4) + jekyll (~> 3.3) + jekyll-theme-primer (0.2.1) + jekyll (~> 3.3) + jekyll-theme-slate (0.0.4) + jekyll (~> 3.3) + jekyll-theme-tactile (0.0.4) + jekyll (~> 3.3) + jekyll-theme-time-machine (0.0.4) + jekyll (~> 3.3) + jekyll-titles-from-headings (0.1.5) + jekyll (~> 3.3) + jekyll-watch (1.5.0) + listen (~> 3.0, < 3.1) + jemoji (0.8.0) + activesupport (~> 4.0) + gemoji (~> 3.0) + html-pipeline (~> 2.2) + jekyll (>= 3.0) + kramdown (1.13.2) + liquid (3.0.6) + listen (3.0.6) + rb-fsevent (>= 0.9.3) + rb-inotify (>= 0.9.7) + mercenary (0.3.6) + mini_portile2 (2.2.0) + minima (2.1.1) + jekyll (~> 3.3) + minitest (5.10.2) + multipart-post (2.0.0) + net-dns (0.8.0) + nokogiri (1.8.0) + mini_portile2 (~> 2.2.0) + octokit (4.7.0) + sawyer (~> 0.8.0, >= 0.5.3) + pathutil (0.14.0) + forwardable-extended (~> 2.6) + public_suffix (2.0.5) + rb-fsevent (0.9.8) + rb-inotify (0.9.10) + ffi (>= 0.5.0, < 2) + rouge (1.11.1) + safe_yaml (1.0.4) + sass (3.4.24) + sawyer (0.8.1) + addressable (>= 2.3.5, < 2.6) + faraday (~> 0.8, < 1.0) + terminal-table (1.8.0) + unicode-display_width (~> 1.1, >= 1.1.1) + thread_safe (0.3.6) + typhoeus (0.8.0) + ethon (>= 0.8.0) + tzinfo (1.2.3) + thread_safe (~> 0.1) + unicode-display_width (1.3.0) + +PLATFORMS + ruby + +DEPENDENCIES + github-pages + jemoji + +BUNDLED WITH + 1.14.6 diff --git a/README.md b/README.md index eb07b30..7b0a13b 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,10 @@ This repo holds the work-in-progress living style guide for the MIT Libraries. +## Examples! + +[Examples](examples.md) + ### In use on: * lib.mit.edu * ebooks app diff --git a/templates/assets-site-head.html b/_includes/assets-site-head.html similarity index 76% rename from templates/assets-site-head.html rename to _includes/assets-site-head.html index eb0861f..d5c8cc0 100644 --- a/templates/assets-site-head.html +++ b/_includes/assets-site-head.html @@ -1,7 +1,6 @@ - + - - + diff --git a/templates/footer-site-slim.html b/_includes/footer-site-slim.html similarity index 100% rename from templates/footer-site-slim.html rename to _includes/footer-site-slim.html diff --git a/templates/footer-site.html b/_includes/footer-site.html similarity index 100% rename from templates/footer-site.html rename to _includes/footer-site.html diff --git a/templates/header-site-slim.html b/_includes/header-site-slim.html similarity index 100% rename from templates/header-site-slim.html rename to _includes/header-site-slim.html diff --git a/templates/scripts-site-foot.html b/_includes/scripts-site-foot.html similarity index 100% rename from templates/scripts-site-foot.html rename to _includes/scripts-site-foot.html diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 0000000..d9203f1 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,78 @@ + + + + + + + + + Base Libraries Page + + {% include assets-site-head.html %} + + + + + + +
+
+
+ +
+
+ + {% include header-site-slim.html %} + +
+
+
+

Local App Title

+
+
+
+ + +
+
+
+
+
+ +
+ +
+ +
+
+ + {{ content }} + +
+ + +
+
+ + {% include footer-site-slim.html %} + + {% include footer-site.html %} + + {% include scripts-site-foot.html %} + +
+ + + + diff --git a/sass/_core.scss b/_sass/_core.scss similarity index 100% rename from sass/_core.scss rename to _sass/_core.scss diff --git a/sass/apps/_ebooks.scss b/_sass/apps/_ebooks.scss similarity index 100% rename from sass/apps/_ebooks.scss rename to _sass/apps/_ebooks.scss diff --git a/sass/apps/_quicksubmit.scss b/_sass/apps/_quicksubmit.scss similarity index 100% rename from sass/apps/_quicksubmit.scss rename to _sass/apps/_quicksubmit.scss diff --git a/sass/ebooks-main.scss b/_sass/ebooks-main.scss similarity index 100% rename from sass/ebooks-main.scss rename to _sass/ebooks-main.scss diff --git a/sass/elements/_content.scss b/_sass/elements/_content.scss similarity index 100% rename from sass/elements/_content.scss rename to _sass/elements/_content.scss diff --git a/sass/elements/_controls.scss b/_sass/elements/_controls.scss similarity index 100% rename from sass/elements/_controls.scss rename to _sass/elements/_controls.scss diff --git a/sass/elements/_footer.scss b/_sass/elements/_footer.scss similarity index 100% rename from sass/elements/_footer.scss rename to _sass/elements/_footer.scss diff --git a/sass/elements/_forms.scss b/_sass/elements/_forms.scss similarity index 100% rename from sass/elements/_forms.scss rename to _sass/elements/_forms.scss diff --git a/sass/elements/_header.scss b/_sass/elements/_header.scss similarity index 100% rename from sass/elements/_header.scss rename to _sass/elements/_header.scss diff --git a/sass/elements/_modules.scss b/_sass/elements/_modules.scss similarity index 100% rename from sass/elements/_modules.scss rename to _sass/elements/_modules.scss diff --git a/sass/global/_base.scss b/_sass/global/_base.scss similarity index 100% rename from sass/global/_base.scss rename to _sass/global/_base.scss diff --git a/sass/global/_helpers.scss b/_sass/global/_helpers.scss similarity index 100% rename from sass/global/_helpers.scss rename to _sass/global/_helpers.scss diff --git a/sass/global/_layouts.scss b/_sass/global/_layouts.scss similarity index 100% rename from sass/global/_layouts.scss rename to _sass/global/_layouts.scss diff --git a/sass/global/_shame.scss b/_sass/global/_shame.scss similarity index 100% rename from sass/global/_shame.scss rename to _sass/global/_shame.scss diff --git a/sass/global/_typography.scss b/_sass/global/_typography.scss similarity index 100% rename from sass/global/_typography.scss rename to _sass/global/_typography.scss diff --git a/sass/global/_unsets.scss b/_sass/global/_unsets.scss similarity index 100% rename from sass/global/_unsets.scss rename to _sass/global/_unsets.scss diff --git a/sass/global/_variables.scss b/_sass/global/_variables.scss similarity index 100% rename from sass/global/_variables.scss rename to _sass/global/_variables.scss diff --git a/sass/global/_vendor-overrides.scss b/_sass/global/_vendor-overrides.scss similarity index 100% rename from sass/global/_vendor-overrides.scss rename to _sass/global/_vendor-overrides.scss diff --git a/sass/guide-helper.scss b/_sass/guide-helper.scss similarity index 100% rename from sass/guide-helper.scss rename to _sass/guide-helper.scss diff --git a/sass/libraries-main.scss b/_sass/libraries-main.scss similarity index 100% rename from sass/libraries-main.scss rename to _sass/libraries-main.scss diff --git a/sass/quicksubmit.sass b/_sass/quicksubmit.sass similarity index 100% rename from sass/quicksubmit.sass rename to _sass/quicksubmit.sass diff --git a/css/styles.scss b/css/styles.scss new file mode 100644 index 0000000..77353d0 --- /dev/null +++ b/css/styles.scss @@ -0,0 +1,7 @@ +--- +# this ensures Jekyll reads the file to be transformed into CSS later +# only Main files contain this front matter, not partials. +--- + +@import "libraries-main"; +@import "guide-helper"; diff --git a/examples.md b/examples.md new file mode 100644 index 0000000..eeeb5fd --- /dev/null +++ b/examples.md @@ -0,0 +1,818 @@ +
+ + + +
+ +

typography

+ +
+

Example Page Title

+
+ +

This section shows some typography examples.

+ +
+

Heading 1

+

Heading 2

+

Heading 3

+

Heading 4

+
Heading 5
+
Heading 6
+
+ +

Page level header (usually h2)

+ +

Content should be semantically correct with headers levels appropriately representing the tree structure of the page. Want to know what your pages look like semantically? You can! (Why should I bother?)

+ +

Section level header (usually h3)

+ +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+ +

Here are some things in lists to give you examples:

+ +

Unordered list and Sub-section header (usually h4)

+ +
    +
  • Regular unordered list
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
+ +

Ordered list

+ +
    +
  1. Regular ordered list
    2. +
  2. Aliquam tincidunt mauris eu risus.
    3. +
  3. Vestibulum auctor dapibus neque.
    4. +
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    5. +
  5. Aliquam tincidunt mauris eu risus.
    6. +
  6. Vestibulum auctor dapibus neque.
    7. +
+ +

Unbulleted list

+ +
    +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
+ +

Inline list

+ +
    +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
+ +

Inline list with piping

+ +
    +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • +
  • Aliquam tincidunt mauris eu risus.
    • +
  • Vestibulum auctor dapibus neque.
    • +
+ +
+ + +
+ + +
+ +

buttons

+ +

Base buttons

+ +

+ Primary + Secondary +

+ +

+ Green primary + Green secondary +

+ +

+ Warn primary + Warn secondary +

+ +

Button variations

+ +

+ Subtle +

+ +

+ Small +

+ +

Pagination (aligns with kaminari ruby gem)

+
+ +
+ +

Inline/filter-type buttons

+ +
+ View: + All + Failed + In Review Queue + Approved +
+ +
+ +

forms

+ +

See modules for examples of banner/page-level alerts for forms which can also be used elsewhere.

+ +
+
+ + +
+
+ + +

That's not going to work - be sure to include the aria-invalid attribute

+
+
+ + +

Example tip help text here.

+
+
+ + +

Select a file from your local computer

+
+
+

Funders

+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+ + +
+ +
+
+ + +
+
+ + +
+

Example help for the group here.

+
+ +

Do you need a fieldset? Here you go:

+ +
+ title or explanatory caption + +
+ + +
+
+ +

Below is an inline radio button example

+ +
+ + + + +
+ +
+ + +
+ + + +
+ + +
+ +
+ +
+ +
+
+
+ + +
+ +

colors

+ +

// grayscale

+ +
+

$black: #111;

+
+ +
+

$black-t: #000; // true black

+
+ +
+

$white: #fafafa;

+
+ +
+

$white-warm: #ede8e2;

+
+ +
+

$white-t: #fff; // true white

+
+ +
+

$gray: #595959;

+
+ +
+

$gray-d1: #333;

+
+ +
+

$gray-d2: #222;

+
+ +
+

$gray-l1: #999;

+
+ +
+

$gray-l2: #ccc;

+
+ +
+

$gray-l3: #dedede;

+
+ +
+

$gray-l4: #f3f3f3;

+
+ +
+

$gray-warm: #c6b6a3;

+
+ +
+

$transparent: rgba(0, 0, 0, 0);

+
+ +
+

$glare: rgba($white-t, .3);

+
+ +
+

$shadow: rgba($black-t, .5);

+
+ +
+

$smoke: rgba($gray, .3);

+
+ +
+

$wisp: rgba($gray, .1);

+
+ +

// moth colors - named

+ +
+

$magenta: #9c3273;

+
+ +
+

$yellow: #ffcc33;

+
+ +
+

$orange: #f58632;

+
+ +
+

$barf: #cca329;

+
+ +
+

$green: #43926a;

+
+ +
+

$blue: #338bc5;

+
+ +
+

$blue-bright: #0088D0;

+
+ +
+

$blue-muted: #21759B;

+
+ +

// colors - brand

+ +
+

$brand-primary: $blue;

+
+ +
+

$brand-primary-accent: rgb(14, 166, 236);

+
+ +
+

$brand-primary2: #83c8ff; // accessible on dark

+
+ +
+

$brand-secondary: $gray-d1;

+
+ +
+

$brand-secondary-accent: rgb(242, 108, 170);

+
+ +

// colors - utilities

+ +
+

$success: $green;

+
+ +
+

$warning: mix($yellow,$orange,50%);

+
+ +
+

$error: #AC1D22;

+
+ +
+

$informational: mix($gray-warm,$black,55%);

+
+ + +
+ +

helpers and utility classes

+ +
+ +

modules

+ +

Page-level/banner alert styles:

+ +
+

Info-style: Hmm, maybe you meant to enter a search term?

+
+ +
+

Danger-style: Whoa! Hold up there, cowboy!

+
+ +
+

Warning-style: Uh oh... Are you sure?

+
+ +
+

Success-style: Yes! Rock on.

+
+ +

Bit module (often used in a sidebar context)

+
+

This is the title

+

Here is some content Lorem ipsum dolor sit amet, consetetur sadipscing elitr. And sometimes there are lists:

+ + +
+ +

Informational panel:

+ +
+
+ Fantastic Places of Mars +
+
+ Submitter:
+ Submitted: less than a minute ago
+ Status: unknown
+ Permanent URL: pending submission processing +
+
+
+ View Details + -- + View Sword Package + -- + Resubmit Package + -- + Delete Submission +
+
+ +

Sunken well for missing or callout content (regular and with action):

+ +
+

About Discovery search

+

Discovery at the MIT Libraries is a new way to find books, movies, music, articles, journals, and other great stuff we have at the library. You will find results sorted into categories, Books and media, Articles and journals, and Library website, as well as links to more specific search tools and resources. If you need assistance, you can click to chat with one of the library staff.

+

Let us know what you think of this new tool

+
+ +
+
+
+

Get help from a research professional

+

Our librarians are trained to find what you need.

+
+
+ AskUs: Chat with a Librarian +
+
+
+ +
+ +

layouts

+ +
+
+

Example 3 quarter - 1 quarter layout

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +
+ +
+ +
+ +
+
+

Example 1 quarter - 3 quarter layout

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +
+ +
+ +
+ +
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+
+ +
+

Example 1 quarter - content main - 1 quarter layout

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+
+ +
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+
+
+ +
+ +
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+
+
+ +

Example 1 third - 2 third layout

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+ +
+
+ +
+ +
+
+

Example of a 4-column flowing layout

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+
+
+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+ +
+ +
+
+

Example of a 3-column flowing layout

+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

+
+
+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+ +
+ +
+
+

Example of a 2-column flowing layout

+

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

+
+
+

No sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+

Lero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

+
+
+

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

+
+
+ + +
+ +

notes on layout elements

+ +

Layout-bands and Gridbands

+

Layout-bands (.layout-band) are bands within the layout and can be used to allow for full bleed backgrounds. They can also be used to contain generic content, similar to gridbands but without enabling the grid functionality.

+ +

Gridbands (.gridband) wrap flowing grids and keep the pieces contained and the overall box cleared in the layout. You'll need this around any set of grid items (.grid-item).

+ +

Layout types and structure

+

There are several layout types are available (see Layouts section above for live examples). They need to be contained within a band to clear document flow. Here are the classes in nested structure:

+ + + + + +
+ +

wordpress entry content

+ +
+ +

Entry-content area

+

This is a subtitle that might be longer

+

This section shows what content inside the wordpress "entry-content" class should look like - which is that it should look just like the non-entry content typography above. This is mostly a test section to be sure they are aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi!

+ +

Heading 2

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque laborum explicabo, praesentium commodi libero non odio totam quas culpa debitis dolores cupiditate eveniet vel, consequatur voluptatum? Alias quasi nesciunt, iusto.

+ +

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore saepe recusandae natus neque modi et minus, qui deleniti, sit voluptatibus laborum nemo quaerat dolorem id quam. Qui omnis incidunt illum.

+ + +

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi!

+ +
diff --git a/templates/examples.html b/templates/examples.html deleted file mode 100644 index 462ab71..0000000 --- a/templates/examples.html +++ /dev/null @@ -1,1088 +0,0 @@ - - - - - - - - - Base Libraries Page - - - - - - - - - - - - - - - -
-
-
- -
-
-
-
- -
-
-
-
-
-

Local App Title

-
-
-
- - -
-
-
-
-
- -
-
- -
-
- -
- - - -
- -

typography

- -
-

Example Page Title

-
- -

This section shows some typography examples.

- -
-

Heading 1

-

Heading 2

-

Heading 3

-

Heading 4

-
Heading 5
-
Heading 6
-
- -

Page level header (usually h2)

- -

Content should be semantically correct with headers levels appropriately representing the tree structure of the page. Want to know what your pages look like semantically? You can! (Why should I bother?)

- -

Section level header (usually h3)

- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi! Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

- -

Here are some things in lists to give you examples:

- -

Unordered list and Sub-section header (usually h4)

- -
    -
  • Regular unordered list
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
- -

Ordered list

- -
    -
  1. Regular ordered list
    2. -
  2. Aliquam tincidunt mauris eu risus.
    3. -
  3. Vestibulum auctor dapibus neque.
    4. -
  4. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    5. -
  5. Aliquam tincidunt mauris eu risus.
    6. -
  6. Vestibulum auctor dapibus neque.
    7. -
- -

Unbulleted list

- -
    -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
- -

Inline list

- -
    -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
- -

Inline list with piping

- -
    -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
- -
- - -
- - -
- -

buttons

- -

Base buttons

- -

- Primary - Secondary -

- -

- Green primary - Green secondary -

- -

- Warn primary - Warn secondary -

- -

Button variations

- -

- Subtle -

- -

- Small -

- -

Pagination (aligns with kaminari ruby gem)

-
- -
- -

Inline/filter-type buttons

- -
- View: - All - Failed - In Review Queue - Approved -
- -
- -

forms

- -

See modules for examples of banner/page-level alerts for forms which can also be used elsewhere.

- -
-
- - -
-
- - -

That's not going to work - be sure to include the aria-invalid attribute

-
-
- - -

Example tip help text here.

-
-
- - -

Select a file from your local computer

-
-
-

Funders

-
- -
-
- -
-
-
-
- -
-
- -
-
- -
-
- -
- - -
- -
-
- - -
-
- - -
-

Example help for the group here.

-
- -

Do you need a fieldset? Here you go:

- -
- title or explanatory caption - -
- - -
-
- -

Below is an inline radio button example

- -
- - - - -
- -
- - -
- - - -
- - -
- -
- -
- -
-
-
- - -
- -

colors

- -

// grayscale

- -
-

$black: #111;

-
- -
-

$black-t: #000; // true black

-
- -
-

$white: #fafafa;

-
- -
-

$white-warm: #ede8e2;

-
- -
-

$white-t: #fff; // true white

-
- -
-

$gray: #595959;

-
- -
-

$gray-d1: #333;

-
- -
-

$gray-d2: #222;

-
- -
-

$gray-l1: #999;

-
- -
-

$gray-l2: #ccc;

-
- -
-

$gray-l3: #dedede;

-
- -
-

$gray-l4: #f3f3f3;

-
- -
-

$gray-warm: #c6b6a3;

-
- -
-

$transparent: rgba(0, 0, 0, 0);

-
- -
-

$glare: rgba($white-t, .3);

-
- -
-

$shadow: rgba($black-t, .5);

-
- -
-

$smoke: rgba($gray, .3);

-
- -
-

$wisp: rgba($gray, .1);

-
- -

// moth colors - named

- -
-

$magenta: #9c3273;

-
- -
-

$yellow: #ffcc33;

-
- -
-

$orange: #f58632;

-
- -
-

$barf: #cca329;

-
- -
-

$green: #43926a;

-
- -
-

$blue: #338bc5;

-
- -
-

$blue-bright: #0088D0;

-
- -
-

$blue-muted: #21759B;

-
- -

// colors - brand

- -
-

$brand-primary: $blue;

-
- -
-

$brand-primary-accent: rgb(14, 166, 236);

-
- -
-

$brand-primary2: #83c8ff; // accessible on dark

-
- -
-

$brand-secondary: $gray-d1;

-
- -
-

$brand-secondary-accent: rgb(242, 108, 170);

-
- -

// colors - utilities

- -
-

$success: $green;

-
- -
-

$warning: mix($yellow,$orange,50%);

-
- -
-

$error: #AC1D22;

-
- -
-

$informational: mix($gray-warm,$black,55%);

-
- - -
- -

helpers and utility classes

- -
- -

modules

- -

Page-level/banner alert styles:

- -
-

Info-style: Hmm, maybe you meant to enter a search term?

-
- -
-

Danger-style: Whoa! Hold up there, cowboy!

-
- -
-

Warning-style: Uh oh... Are you sure?

-
- -
-

Success-style: Yes! Rock on.

-
- -

Bit module (often used in a sidebar context)

-
-

This is the title

-

Here is some content Lorem ipsum dolor sit amet, consetetur sadipscing elitr. And sometimes there are lists:

- - -
- -

Informational panel:

- -
-
- Fantastic Places of Mars -
-
- Submitter:
- Submitted: less than a minute ago
- Status: unknown
- Permanent URL: pending submission processing -
-
-
- View Details - -- - View Sword Package - -- - Resubmit Package - -- - Delete Submission -
-
- -

Sunken well for missing or callout content (regular and with action):

- -
-

About Discovery search

-

Discovery at the MIT Libraries is a new way to find books, movies, music, articles, journals, and other great stuff we have at the library. You will find results sorted into categories, Books and media, Articles and journals, and Library website, as well as links to more specific search tools and resources. If you need assistance, you can click to chat with one of the library staff.

-

Let us know what you think of this new tool

-
- -
-
-
-

Get help from a research professional

-

Our librarians are trained to find what you need.

-
-
- AskUs: Chat with a Librarian -
-
-
- -
- -

layouts

- -
-
-

Example 3 quarter - 1 quarter layout

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -
- -
- -
- -
-
-

Example 1 quarter - 3 quarter layout

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -
- -
- -
- -
-
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

-
- -
-

Example 1 quarter - content main - 1 quarter layout

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

-
- -
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

-
-
- -
- -
-
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

-
-
- -

Example 1 third - 2 third layout

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

- -
-
- -
- -
-
-

Example of a 4-column flowing layout

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

-
-
-

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

-
-
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
-

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
- -
- -
-
-

Example of a 3-column flowing layout

-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren.

-
-
-

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

-
-
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
-

At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
- -
- -
-
-

Example of a 2-column flowing layout

-

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
-

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

-
-
-

No sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
-

Lero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

-
-
-

Sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

-
-
- - -
- -

notes on layout elements

- -

Layout-bands and Gridbands

-

Layout-bands (.layout-band) are bands within the layout and can be used to allow for full bleed backgrounds. They can also be used to contain generic content, similar to gridbands but without enabling the grid functionality.

- -

Gridbands (.gridband) wrap flowing grids and keep the pieces contained and the overall box cleared in the layout. You'll need this around any set of grid items (.grid-item).

- -

Layout types and structure

-

There are several layout types are available (see Layouts section above for live examples). They need to be contained within a band to clear document flow. Here are the classes in nested structure:

- -
    -
  • layout-3q1q -
      -
    • col3q
      • -
    • col1q-r
      • -
    -
    • -
  • layout-1q3q -
      -
    • col1q
      • -
    • col3q-r
      • -
    -
    • -
  • layout-1q2q1q -
      -
    • col1q
      • -
    • content-main
      • -
    • col1q-r
      • -
    -
    • -
  • layout-1t2t -
      -
    • col1t
      • -
    • col2t
      • -
    -
    • -
  • layout-2t1t -
      -
    • col2t
      • -
    • col1t-r
      • -
    -
    • -
- - - -
- -

wordpress entry content

- -
- -

Entry-content area

-

This is a subtitle that might be longer

-

This section shows what content inside the wordpress "entry-content" class should look like - which is that it should look just like the non-entry content typography above. This is mostly a test section to be sure they are aligned. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi!

- -

Heading 2

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque laborum explicabo, praesentium commodi libero non odio totam quas culpa debitis dolores cupiditate eveniet vel, consequatur voluptatum? Alias quasi nesciunt, iusto.

-
    -
  • Here are some things in another list: -
      -
    • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
      • -
    • Aliquam tincidunt mauris eu risus.
      • -
    • Vestibulum auctor dapibus neque.
      • -
    -
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore saepe recusandae natus neque modi et minus, qui deleniti, sit voluptatibus laborum nemo quaerat dolorem id quam. Qui omnis incidunt illum.

-
    -
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    • -
  • Aliquam tincidunt mauris eu risus.
    • -
  • Vestibulum auctor dapibus neque.
    • -
- -

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque odio soluta fuga esse accusantium, voluptate, eos quod impedit! Quas cum saepe eaque quisquam culpa libero ipsum fuga necessitatibus tempore? Sequi!

- -
- -
- - -
-
- - - -
-
-
-
-
- - MIT Libraries home - - -
-
-
- -
-
-
-
-
-
- -
-
- - - - -
-
-
-
-
-

Search

-
- BartonPlus - Barton catalog - Vera: E-journals & databases - WorldCat - Course reserves - Site search - More search options -
-
-
-

Hours & locations

-
- Hours - Map of locations - Study spaces - Exhibits & galleries -
-
-
-

Borrow & request

-
- Your Account - Get it: options for getting books & articles - Circulation FAQ - Reserves & TIP FAQ - Visit non-MIT libraries - More borrow & request options -
-
-
-

Research support

-
- Ask us - Research guides & expert librarians - Productivity tools - Scholarly publishing - Citation software - More research support options -
-
-
-

About us

-
- Contact us - News - Classes & events - Use policy - Services A-Z - More about us -
-
-
-
-
- - MIT Libraries home - - -
-
-

Find us on

- - - - - - - - - - - - - - - - - -
-
- Faculty - Alumni - Visitors - Giving - Persons with disabilities -
-
-
-
-
-
-
- -
-
- - -
- - - - - - - - - - - diff --git a/templates/header-site.html b/templates/header-site.html deleted file mode 100644 index e69de29..0000000 From ed18799c8c329328456f0de817e6ded80490c7c9 Mon Sep 17 00:00:00 2001 From: Jeremy Prevost Date: Wed, 12 Jul 2017 11:01:06 -0400 Subject: [PATCH 2/3] updates gulp to use jekyll preferred directories --- gulpfile.js | 6 +++--- package.json | 3 ++- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index c07f75c..1a13697 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -15,7 +15,7 @@ var gulp = require('gulp'), del = require('del'); gulp.task('styles', function() { - return sass('sass/libraries-main.scss', { style: 'expanded' }) + return sass('_sass/libraries-main.scss', { style: 'expanded' }) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('dest/css')) .pipe(rename({suffix: '.min'})) @@ -25,7 +25,7 @@ gulp.task('styles', function() { }); gulp.task('guide-styles', function() { - return sass('sass/guide-helper.scss', { style: 'expanded' }) + return sass('_sass/guide-helper.scss', { style: 'expanded' }) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('dest/css')) .pipe(notify({ message: 'Styles task complete' })); @@ -57,7 +57,7 @@ gulp.task('default', ['clean'], function() { gulp.task('watch', function() { // Watch .scss files - gulp.watch('sass/**/*.scss', ['styles']); + gulp.watch('_sass/**/*.scss', ['styles']); // Watch .js files gulp.watch('js/**/*.js', ['scripts']); diff --git a/package.json b/package.json index 6594772..d33d537 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,8 @@ "gulp-notify": "^3.0.0", "gulp-rename": "^1.2.2", "gulp-ruby-sass": "^2.1.1", - "gulp-uglify": "^2.1.2" + "gulp-uglify": "^2.1.2", + "jshint": "^2.9.5" }, "scripts": {} } From b8d1dcf6f274e372b255b0ae7fbd7d55f28e19f3 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Wed, 12 Jul 2017 13:50:14 -0400 Subject: [PATCH 3/3] template edits and example adjustments --- Gemfile | 1 + Gemfile.lock | 6 + README.md | 2 +- _includes/assets-site-head.html | 4 +- _includes/breadcrumb.html | 10 ++ _includes/footer-site-slim.html | 4 + _includes/footer-site.html | 214 ++++++++++++++++---------------- _includes/header-local.html | 22 ++++ _includes/header-site-slim.html | 34 ++--- _includes/notice-global.html | 11 ++ _layouts/default.html | 39 ++---- _sass/global/_base.scss | 4 + examples.md | 55 ++++++-- 13 files changed, 243 insertions(+), 163 deletions(-) create mode 100644 _includes/breadcrumb.html create mode 100644 _includes/header-local.html create mode 100644 _includes/notice-global.html diff --git a/Gemfile b/Gemfile index c9837eb..538bd66 100644 --- a/Gemfile +++ b/Gemfile @@ -1,3 +1,4 @@ source 'https://rubygems.org' gem 'github-pages', group: :jekyll_plugins gem 'jemoji' +gem 'therubyracer' diff --git a/Gemfile.lock b/Gemfile.lock index 42c7973..3e45414 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -153,6 +153,7 @@ GEM html-pipeline (~> 2.2) jekyll (>= 3.0) kramdown (1.13.2) + libv8 (3.16.14.19-x86_64-linux) liquid (3.0.6) listen (3.0.6) rb-fsevent (>= 0.9.3) @@ -174,6 +175,7 @@ GEM rb-fsevent (0.9.8) rb-inotify (0.9.10) ffi (>= 0.5.0, < 2) + ref (2.0.0) rouge (1.11.1) safe_yaml (1.0.4) sass (3.4.24) @@ -182,6 +184,9 @@ GEM faraday (~> 0.8, < 1.0) terminal-table (1.8.0) unicode-display_width (~> 1.1, >= 1.1.1) + therubyracer (0.12.3) + libv8 (~> 3.16.14.15) + ref thread_safe (0.3.6) typhoeus (0.8.0) ethon (>= 0.8.0) @@ -195,6 +200,7 @@ PLATFORMS DEPENDENCIES github-pages jemoji + therubyracer BUNDLED WITH 1.14.6 diff --git a/README.md b/README.md index 7b0a13b..1cf34e3 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ This repo holds the work-in-progress living style guide for the MIT Libraries. [Examples](examples.md) -### In use on: +## In use on: * lib.mit.edu * ebooks app * publicaccessquicksubmit.mit.edu diff --git a/_includes/assets-site-head.html b/_includes/assets-site-head.html index d5c8cc0..4779a43 100644 --- a/_includes/assets-site-head.html +++ b/_includes/assets-site-head.html @@ -1,6 +1,8 @@ - + + + diff --git a/_includes/breadcrumb.html b/_includes/breadcrumb.html new file mode 100644 index 0000000..6db53ab --- /dev/null +++ b/_includes/breadcrumb.html @@ -0,0 +1,10 @@ +breadcrumb example + + +
+ +
diff --git a/_includes/footer-site-slim.html b/_includes/footer-site-slim.html index a5235f7..0e74ad5 100644 --- a/_includes/footer-site-slim.html +++ b/_includes/footer-site-slim.html @@ -1,3 +1,7 @@ +slim footer example + + +