This article describes the development of a design that can be used to publish documents on
web pages, particularly documents stored in Microsoft SharePoint Document Libraries.
The target of this development is to create a neat desing for documents stored in SharePoint Document Libraries
that would normally be offered for download in a pretty basic desing (list format).
The development is inspired by SharePoint Slide Libraries, Google+ and the Windows File Explorer
Alternatively, documents can be shown in collapsible groups. This seems to be a "pretty good" layout, although it
is still basic. The shown example is grouped by a custom field (Year). This field has been added
manually to the list and can easily be edited in a "database-like" tabular view in SharePoint.
While SharePoint Document Libraries offer features like sorting and filtering by default, the layout is
Please note: There may be "ready-to-use" third-party add-ons or templates for SharePoint that were
not evaluated in the current context. The design primarily follows the vision of the developer.
There are some custom layouts available in SharePoint, e.g. with details or banded rows, that look nice,
but those are still far away from what this development is aiming at.
Dokumentdetails (not available with grouping)
Dokumentdetails (not available with grouping, but with folders)
Magazin, ohne Linien
Vorschaufenster (not available with grouping)
- Search (typical fields including meta data)
- flipable card style (?)
- preview imag (?)
- application icon (?)
- hover experience exmaple
- sorting animation similar to this
- Quicksand (MIT license) has a great user experience Quicksand
- swap items with animation example
- swap items with animation and fading example
- swap items with animation and fading source (MIT license)
- flipping cards style example
- flipping cards style explanation
- flipping cards style demo
- use this link example for compatibility with IE10
The design should ease filtering and sorting and should serve a beatiful UI and an intuitive and
pleasurable UX. Love for and attention to the detail should drive the development.
After some research on the web, the tool Quicksand
was found and is considered to be very attractive.
The tools comes with a nice layout and supporting the requirements defined above.
We decided to make a sample implementation based on this tool.
Ok, let's start with a basic implementation of Quicksand. Later we will build the interface for SharePoint library data.
This first implementation worked nice and smooth and Quicksand was decided to be the right
basis of our development.
The implementation of this example from Quicksand gives a good first idea of what the development should look
like. We have implemented another example just to examine the functionality in our environment and the effort
needed for the implementation to run.
As a next step, we will create a realistic implementation of Quicksand and develop a realistic style for
documents typically published. Furthermore, we will implement the turnable-card style and the free-text
Alternative format 1
Alternative format 2
The development of the SharePoint interface is described
SharePoint Implementation Guide
The implementation steps for SharePoint are described
Live example (Document Library and Content Editor Web-Part)
Here is the link
to the working example. Pleae note, the SharePoint page is available to all authenticated users. At least a
Microsoft account is needed to view the example.
- make implementation of vertical layout
- Another click to an li should switch ASC/DESC
- download with confirm dialog?
- decide if flipping cards are shown on mouseover (might be better than the turn-icon)
- collect data that is available from the list, e.g. name, year, quarter, file-size, file type (pptx, pdf)
- correct shadow for h-box
- include fields to be filtered in JSON (full interface incl. functions)