Close

Alongslide/Markdown Source for this page

    + panel intro pin top two-thirds now
 
    # **Alongslide** is a responsive, parallax-inspired presentation framework for long-form reading on the web, employing a lightweight templating syntax for [Markdown](http://daringfireball.net/projects/markdown/). Scroll right »
 
    + panel footer pin bottom one-third now
 
    The various components of Alongslide will be open-sourced by early 2014.
 
    [Show Markdown Source](#)
 
    Created by and for [Triple Canopy](http://canopycanopycanopy.com). Copyright 2013, Canopy Canopy Canopy, Inc.
 
    + unpin intro
 
    + section technology 
 
    + panel technology-layers pin top two-thirds
 
    ### Technology layers
    1. A fine-tuned parallax-like **scrolling framework** built on a [fork](https://github.com/triplecanopy/skrollr) of [Skrollr](http://prinzhorn.github.io/skrollr/)
    - **Flowing text columns** using a [custom implementation](https://github.com/triplecanopy/region-flow) of the emerging [CSS Regions](http://dev.w3.org/csswg/css-regions/) spec
    - A responsive-and-beyond layout logic in CSS+JS
    - A lightweight **templating syntax for Markdown** implemented in Ruby with [Redcarpet](https://github.com/vmg/redcarpet) and [Treetop](http://treetop.rubyforge.org/)
 
    + unpin technology-layers
 
    + unpin footer
 
    + panel aspect fullscreen fade-out
 
    ### Alongslide puts layout first, respecting the aspect ratio of the content area at all window sizes and resolutions.
 
    ### On desktop, press `alt-g` to see the grid(s)—and resize the window to any size or shape.
 
    #### Try it on mobile, too.
 
    + section structure
 
    + panel this-is-a-panel pin right now fade-out
 
    ## This is a panel
 
    **Panels** function like sidebars which can interrupt or supplement the flowing text.
 
    In Alongslide Markdown, structural elements are specified by indented blocks of text (traditionally used for `<code>`) to show visually that they sit outside the primary flow.
 
    They may each specify transitions—either fading or sliding in.
 
## This is section text
 
Section text continues to flow, automatically breaking up into columns, while **panels** remain fixed.
 
For an example of a longer text, see the below an excerpt from the upcoming Alongslide announcement:
 
> By integrating recorded and textual media, digital publishing conceives of the experience of reading in both temporal and spatial terms; whereas a book might contain paragraphs and a series of images, only digital forms can map the particular experience of one onto the other by regulating the way in which the reader progresses through a text. The syntax of Alongslide emphasizes—even extols—this development by enabling editors to define the “start” and “end” points of content elements within a layout, as though they were being arranged on a timeline. (In fact, Alongslide’s underlying scrolling mechanism is based on a fundamental technique borrowed from the domain of animation and motion design: the use of key frames, which articulate transition points in the linear flow of data.) As user interfaces are increasingly imbued with virtual tactility, thanks to animated interaction cues, digital reading platforms will continue to incorporate motion design and animation—and justly so, as they have defined the experience of screen-based forms since the medium originated 125 years ago.
 
    + unpin this-is-a-panel
 
    + panel philosophy fullscreen fade-in
 
    ### As with Markdown, a philosophical principle of Alongslide is that plain-text authoring environments can be just as powerful as WYSIWIG, and further enable (and encourage) writing solid, structural markup.