Git Product home page Git Product logo

telescope-d4g's Introduction

DataLook.io

This package is intended to be added to Telescope to create the styling and functionality seen on datalook.io.


About

This package/site is currently under heavy development. If you're reading this, it's likely because you're one of the fine people working on it. So I'll get right to it.

Telescope Core

The clone of Telescope in my Guthub account will be kept up to date with the official upstream version published by Sacha Greif. The master branch in my Telescope repo will always be equal to the master branch on the upstream repo. The datalook branch is the production branch for dataforgood.io and data-for-good-dev is the staging/testing branch (this branch doesn't currently exist - coming soon).


Developer Setup

First, you will need to fork our Telescope repo to your own Github account. Go to the repo and click "fork" in the top right corner. You should now have a copy in your account. Next you will need to clone that fork of Telescope to your local machine for development.

# Clone the repo
git clone [email protected]:YOUR_NAME/Telescope.git

# Checkout the data-for-good branch
cd telescope
git checkout -b data-for-good

Now you're ready to get this theme package installed. The steps are similar to what you just did. However, you will not want to clone this package inside of Telescope. It should be a separate repo on your local machine. First, cd into whatever directory you would like to store this package in for development. Then fork this repo to your own Github account and clone it to your local machine the same way you did with Telescope.

# Clone the D4G package repo
git clone [email protected]:YOUR_NAME/telescope-d4g.git

You will be using Meteorite to add the local telescope-d4g package to Telescope, so you will need to go back to the Telescope directory and add a smart.json file to the root with the following contents:

{
    "packages": {
        "telescope-d4g": {
            "path": "/local/path/to/telescope-d4g"
        }
    }
}

and then from the Telescope directory run:

# Symlink the D4G package to the /packages folder 
mrt add telescope-d4g

# Add package to Telescope
meteor add telescope-d4g

If you have already checked out the data-for-good branch of Telescope, the default theme packages should already be disabled. If they aren't, you need to disable them with:

meteor remove telescope-theme-base
meteor remove telescope-theme-hubble

Now just fire up Meteor and go to http://localhost:3000 to test it out. Telescope should look like the productions site here: http://dataforgood.io


Development

You will need to satisfy a few dependencies on your machine before you can get started with any styling development. This package uses Sass and a few mixin libraries (Compass, Susy, and Breakpoint).

To install dependencies:

gem install compass compass-notify susy breakpoint

To get started writing Sass, (assuming Meteor is already running) just open another terminal window, cd into the scss folder of this package, and start Compass.

# Assuming you're already in the Telescope directory
cd packages/telescope-d4g/lib/client/scss

compass watch

If you experience issues with Compass not seeing scss files changing when you save them, you can alternatively run:

compass watch --poll

You should now be able to edit scss files and Compass will compile them to packages/telescope-d4g/lib/client/css/screen.css on each file save. Meteor will detect that file change and refresh the styles in the page (without a full page refresh).


More to come

This should be enough to get started with custom styling. As soon as I finish building the rest of the custom templates, logic, etc. I will write more documentation about them. Until then, the docs on the Telescope website are a great resource for those types of customizations.

telescope-d4g's People

Contributors

jshimko avatar t-pfaff avatar

Watchers

 avatar

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.