Git Product home page Git Product logo

droplings-default-theme's Introduction

Droplings: Default Theme v1.0

Droplings is a Mac app to make quick-fire sharing via your Dropbox account easier and more comfortable. Its preferences allow you to specify a custom theme for rendering your shared files' preview pages.

This repository contains the most recent version of Droplings' built-in default theme. Feel free to fork and build your own custom themes to make your shared preview pages more personal. If you're looking for a quicker way to get started, you'll probably want droplings-theme-boilerplate instead.

Please note that this repository contains everything related to the default theme:

  1. the theme's index.html
  2. the theme's supporting asset files (CSS, images etc.)
  3. the Heroku-related code running the built-in theme's supporting assets server assets.drpln.gs

If you're only interested in seeing the themeing example serving as the default theme, number (1) on the above list is all that you need.

For starters, here's a screenshot of the default theme in action.

Screenshot of Droplings default theme (v1.0)

Templating Engine

Droplings is making use of Mustache, a well-known logic-less templating engine. You can find all you need to know about its syntax on the Mustache website.

Theme Workflow

The templating process goes like this:

  1. All non-.html files will be copied verbatim to the target folder (~/Dropbox/Public/share/YYYY-MM/…/).
  2. All .html will be run through the templating engine, the resulting files will be written to the target folder (using their original names, i.e. an index.html with placeholders in your theme folder will result in an index.html filled with live data in the target folder).
  3. The shared file will be copied to a f subfolder in the target directory; its name will be normalized a bit.

A few notes:

  • Your theme must contain an index.html.
  • Droplings will ignore subfolders. Only files in the root folder of your theme are recognized.
  • The default theme only contains one HTML and no JS file. There's no reason why your theme can't sport more than one HTML file and/or JS files. The templating engine won't replace keys in JS files, tho, so if you want to set JS variables, do so in a <script> block in the HTML file prior to loading your external JS file.

Template Placeholders

Here's a list of available template keys/variables with their meaning.

  • file_link: the relative path to the shared file as seen from index.html.
  • file_ext: the normalized file extension (trimmed & lowercase).
  • file_size: the file size in readable format, eg. "2.70 KB", "5.12 GB".
  • short_url: the drpln.gs URL leading to the preview page.
  • original_filename: The name of the file as it was when the file was shared.
  • is_archive: the file is an archive (zip, tgz, rar etc.)
  • is_audio: the file is an audio file (mp3, m4a, wav etc.)
  • is_contact: the file is a vcard file
  • is_image: the file is an image (png, jpg, tiff, gif etc.)
  • is_message: the file is a recognized message (email, IM, and so on)
  • is_pdf: the file is a mixed content file, i.e. a PDF.
  • is_text: the file is text document (html, rtf, mdown etc.)
  • is_video: the file is a video (mov, mpg etc.)
  • is_unknown_type: the file wasn't recognized as one of the files listed above
  • is_ext_*: a "dynamic" placeholder — for example, if the shared file is a GIF then the placeholder is_ext_gif would be set.

Build Notes

For the time being, my "master files" are the HAML/SASS source files residing in src/. These are compiled to HTML/CSS (created in build/ and assets/, respectively) by LiveReload.

Legal

The Droplings Default Theme are copyright © 2012 Carlo Zottmann, municode.de, [email protected].

3rd party libraries and code (listed below) expressively excluded, the Droplings Default Theme (this here repository) is licensed under the WTFPL v2.

           DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
                   Version 2, December 2004

Copyright (C) 2004 Sam Hocevar
 14 rue de Plaisance, 75014 Paris, France
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.

           DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
  TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION

 0. You just DO WHAT THE FUCK YOU WANT TO.

Font: Font Awesome

Droplings default theme is using the rather nice glyphs of Font Awesome. Copyright (C) 2012 by Dave Gandy, released under a CC BY 3.0 license.

Font: Yanone Kaffeesatz

Droplings main display font is Yanone Kaffeesatz, released under the SIL Open Font License v1.1.

Basic CSS: ZURB Foundation 3.0

The basic CSS structure is ZURB Foundation 3.0, release under the MIT Open Source License.

Background: Clean Gray Paper

The default theme's background image is Clean Gray Paper by Subtle Patterns, released under a CC BY 3.0 license.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.