Introducing Quill

Quill Flightfeather
Quill Flightfeather
Quill Flightfeather

See it in action

Impeccably crafted.

Quill is a sleek, modern and clutter-free theme that offers a more immersive reading experience. Beyond aesthetics, Quill is content-focused. This means less noise and higher engagement. This responsive blog theme for MODX is perfect for those with shareable thoughts.

Read the Flight Manual

Features

Designed for optimal ease of use

Quill is built on top of Bootstrap . Naturally, all your favourite Bootstrap component and element styles will be available for you to use. But, Quill goes beyond the basics by extending Bootstrap and adding some custom styles of its own—making it a truly distinctive theme.

At a Glance:

  • HTML5/CSS3
  • SEO-optimized
  • Cross-Browser Compatibility: Chrome, FF, Safari, Edge, Opera, IE9+
  • 100% Responsive
  • Easy install / Detailed documentation
  • Easily Customizable within the manager
  • One template, unlimited possibilities
  • Dedicated content layouts (Home, Post, Author, Topic, Sections, Fluid)
  • Optional dedicated pages (Archives, Sections, Topics, search, RSS, Sitemap, 404 Error page, maintenance page)
  • Faster page load times (via efficient caching, minification, fewer HTTP Requests, image/Disqus lazy loading, CDN usage, etc.)
  • Read time info
  • Pattern library for style references
  • Clean, intuitive well-structured and well-commented markup
  • Fully commented Sass source files
  • Syntax highlighting (Prism.js)
  • Built with Bootstrap
  • Suggested posts
  • Widgets: Newsletter signup form, Social share links, side notes, etc.
  • Optional featured images
  • Custom snippets
  • Compatible with MODX 2.4+
  • And more …

Third party assets

Quill wouldn't be possible without these very useful assets:

Pattern library

Typography

Fonts

Heading font: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif.

Heading font italic: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif.

Heading font bold: Lato, "Helvetica Neue", Helvetica, Arial, sans-serif.

Body text font: Georgia, "Times New Roman", Times, serif.

Body text font italic: Georgia, "Times New Roman", Times, serif.

Body text font bold: Georgia, "Times New Roman", Times, serif.

Meta text font: Menlo, Monaco, Consolas, "Courier New", monospace.

Meta text font italic: Menlo, Monaco, Consolas, "Courier New", monospace.

Meta text font bold: Menlo, Monaco, Consolas, "Courier New", monospace.

Headings

H1: The quick brown fox jumps over the …

H2: The quick brown fox jumps over the lazy dog

H3: The quick brown fox jumps over the lazy dog

H3: The quick brown fox jumps over the lazy dog

H5: The quick brown fox jumps over the lazy dog
H6: The quick brown fox jumps over the lazy dog

Heading group

This is the title

This is the subtitle.

Paragraph (Make a paragraph stand out by adding .lead)

Jason Coward, Lead Architect of MODX CMS, recently shared his long-awaited thoughts on “MODX Next”, and long-time MODX enthusiast Donald Atkinson has responded in detail. Is there any benefit to yet another perspective? Let me introduce myself quickly … Read more

Since joining the MODX core team in early 2012, I’ve been involved with nearly every client project in which MODX has engaged. (Yes, we engage with clients directly, when it’s a good fit.) Thus, I’ve had the privilege of using (and abusing) the MODX software on a daily basis, to meet a dizzying array of business requirements, ranging from straightforward site builds to complex custom web applications deployed at scale. Furthermore, I’ve done so on over 100 projects and in collaboration with MODX core developers, including Jason, Garry, John and Mike.

Blockquotes

We do not want to continue the NIH culture that has already lead to some heavy technical debt.

Jason Coward

Ordered Lists

  1. Any open source platform with an eye to continuous development and innovation depends on contributions from highly skilled developers.
  2. In order to attract such developers, the platform must have low enough barrier-to-entry (BTE), and provide enough return-on-invested-effort (ROIE) to be attractive.
  3. Much of the core codebase was authored years ago — an eon in Internet Time — and predates modern standards. This increases the BTE today.

Unordered Lists

  • A framework-independent Manager UI that interfaces with the MODX core via generic REST API, such that the UI can be extended, customized, or even entirely re-written, with comparatively minimal effort.
  • A unit-tested MODX core.
  • MODX Extras that install automagically with all their dependencies, including but not limited to other Extras.

Inline elements (Dummy content credits: http://demo.patternlab.io/)

This is a text link

This is a read-more link

Strong is used to indicate strong importance

This text has added emphasis

The mark element indicates a highlight

This is what inline code looks like.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This is a meta text

This is a section title

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This is a citation

This is sample output from a computer program

The variarble element, such as x = y

Images

Profile image

Quill Flightfeather

Inline image with centered caption

This caption is centered.

Inline image with caption and credits

This is a caption. Photo credits go here.
A caption for the above image. Photo credits go here.

In the spotlight

This is a hero image used for featured posts.

by Quill Flightfeather

Buttons

Regular buttons

Large buttons

Social buttons

Flags + tags

Notifications

Alerts

Colors

Text colors

Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.

Etiam porta sem malesuada magna mollis euismod.

Donec ullamcorper nulla non metus auctor fringilla.

Background colors

Primary #3d53ba

Success #3dbaa4

Info #5bc0de

Warning #ffa000

Error (Danger) #ff1744

Forms

Newsletter signup forms

Basic form controls

This is a hint

Preformatted text

PHP (Showing MODX's world famous getObject() method)

// See how clean stuff looks with MODX? No HTML in your PHP code.
$chunk = $modx->getObject('modChunk',array(
   'name' => 'LineItem',
));

// No chunk, no move.
if (!$chunk) return 'No line item chunk!';

// See, we don't print or echo. We return.
return $chunk->process(array(
   'img' => $modx->resource->getTVValue('GIPhoto'),
   'name' => 'G.I. Joe',
   'grenades' => 42,
));

HTML example. (Showing the LineItem chunk referenced in the snippet above).

<!-- Stellar! No PHP in your HTML. See how clean this looks? -->
<article class="special-forces">
  <figure>
    <img src="[[+img]]" width="480" alt="[[+name]]">
    <figcaption>[[+name]]</figcaption>
    <p>
      <strong>Grenades:</strong> [[+grenades]]
    </p>
  </figure>
</article>

Sass example

// Social stuff
// ------------

.share-block {
  position: absolute;
  top: 21.875rem;
  right: 2.5rem;
  // Hide on small screens
  display: none;
  // Show on larger ones
  @include media-breakpoint-up(sm) {
    display: block;
    max-width: 10rem;
  }
}
// Yeah -- you can call this progressive enhancement.

Dialogs

Modal windows

Content blocks

Post excerpt. (Used on listing pages)

User-related Resource Fields I

December 15, 2015. Published in Experiments, by .

This is the first in a series of articles about handling the user-related fields of a resource ( createdby, publishedby, editedby, deletedby). Each field holds the ID of the user who performed the action. In this article, we'll look at how to get the full name of the users who performed the action for the current page (and the full name of the current user as well) … Read more

Post snippet

MODX Revoltion in a few words

December 15, 2015. Published in Thouhgts, by .

Overview

MODX Revolution (Revo) is an easy-to-use Content Management System (CMS) and Application Framework rolled into one. Despite the limitless possibilities that MODX affords you, we think you'll find it refreshingly intuitive to work with. At every step, MODX strives to deliver Creative Freedom.

In addition to this documentation site, the MODX Community is vibrant and always willing to help. Go ahead and ask questions there - you'll be pleasantly surprised at the responsiveness of the MODX user base. Additionally, there are trusted, experienced MODX Professionals with whom you can engage to get the job done. MODX also has vendor-backed commercial support options, so no matter your needs and requirements - you're covered.

Getting Started

This documentation site is a thorough Reference for all things MODX, but there are also Guides and Tutorials to help you get started quickly and easily. Highlights include:

If you have a question about this documentation site, or suggestions on how to increase the awesomeness herein, please let us know. From the MODX core team, and the MODX community-at-large, "Welcome!"

MODX Revolution

Revolution is MODX's flagship CMS and application framework, lovingly called "Revo". If you're new to MODX, start here.

Quick Links

Other Resources

Block notes (Usefull for footnotes, editor's notes, etc.)

Note: The xPDOQuery extends the xPDOCriteria class and allows you to abstract out complex SQL queries into an OOP format. This allows encapsulation of SQL calls so that they can work in multiple database types, and be easy to read and dynamically build.

Suggested posts

Read these next

Caption Credits

Keeping MODX Relevant — Part Two

December 2, 2015. Published in , by Quill Flightfeather

What success MODX has achieved over the past ten years is, in my opinion, entirely due to two core tenets that the community has always stood behind. Those ideals are modularity and extensibility. Together with a natural separation of presentation and logic that the architecture begs you to take advantage of, MODX has carved a significant niche providing Creative Freedom to an Open Source CMS world better known for prefabricated themes you have to hook into or hack around.. Read more

Helper classes

Block titles (Add .heading to a heading inside a .read-next block element to create a read-next title)

Read these next

Underlines (Add .underline-primary to a span to get blue pseudo underline)

This text has a blue underline

Spacing (Shorthand classes)

.top-spacer sets the top margin of an element to 2rem. Similar to Bootstrap's .m-t-2.

.v-spacer sets the top and bottoms margin of an element to 2rem. Similar to Bootstrap's .m-t-2 .m-b-2.

.block-spacer sets the top margin of an element to 3.5rem.

.inner-spacer sets the top and bottom padding of an element to 2rem. Similar to Bootstrap's .p-t-2 .p-b-2.

.inner-spacer-x sets the left and right padding of an element to 2rem.

.inner-spacer-col sets the left and right padding of a content column to 2rem on landscape phones and up.

Misc.

Add .section-title .has-hr to a heading to set an adequate bottom spacer and a bottom border.

Add .main-content to a content wrapper to slightly increase the line-height of its inner paragraphs, thus improving readability.

Add .center-content to a wrapper element to set the text alignement of its child block elements to center

.text-thin sets the font weight of an element to 300

.text-thick sets the font weight of an element to 900

.svg-icon applies Quill styles to svg images used as icons.

Not bad, huh?

Download Quill Blog Theme
Requires MODX 2.4+

Read the Flight Manual

Add your thought

Made with in Toronto. Powered by MODX