Giter Club home page Giter Club logo

mozmaker-templates's Introduction

Build Status

Mozmaker Templates

Partials and templates for the Mozilla Foundation's CMS driven projects.

http://mozilla.github.io/mozmaker-templates/demo/

Definitions & Best Practices

Partials should be very small snippets of HTML. They should rely extensively on Mozmaker for styling (ideally, completely). Partials are pulled into our fork of Calypso via a REST API and are available to users as a boilerplate for new simple pages or parts of more complex pages.

Templates are more complex arrangements of partials. They are intended as boilerplate for stand-alone pages and can contain regions not intended for content management. It's ok to have custom JavaScript and CSS accompany a template!

Setup for Development

  • git clone https://github.com/mozilla/mozmaker-templates.git && cd mozmaker-templates
  • npm i
  • npm start

File Structure

├── api <- Contains compiled code for the static REST API.
├── demo <- Contains compiled code for a live demo page.
├── dist <- More compiled code provided as a convenience for dependents.
├── scripts <- Code used by npm scripts.
└── src
    ├── app.js <- Code for running the template previewer.
    ├── index.html <- Shell for template previews.
    ├── style.css <- Style for template previews.
    └── partials
        ├── sample-partial
        │   ├── index.html <- Partial HTML
    └── templates
        ├── sample-template
        │   ├── images <- Any images used by the template
        │   ├── index.html <- Template HTML
        │   └── style.scss <- Template-specific SCSS

File Naming Conventions

  • All files should be named in hyphenated-lowercase

Relationship To Mozmaker

Mozmaker is a core dependency of these templates and partials, and is intended to be developed in tandem with them. When many templates need a common component, it's recommended that it be placed upstream in Mozmaker to reduce duplicated code.

If you want to co-develop Mozmaker locally and see changes reflected in this project, you can run npm link in the root of your Mozmaker repo and then npm link mozmaker in this repo. Once you've done this you should npm start Mozmaker and then you'll see your edits immediately reflected in the front end here.

REST API

This project contains a very basic REST API which is deployed as static JSON routes to GitHub Pages. This REST API is used in our fork of Calypso to retrieve partials and their associated HTML.

The service is available at:

http://mozilla.github.io/mozmaker-templates/api

Routes

  • GET /partials - Returns an array of partial IDs.
  • GET /partial/PARTIAL_ID - Returns an object containing the complete markup for the indicated partial.

mozmaker-templates's People

Contributors

alanmoo avatar flukeout avatar gvn avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mozmaker-templates's Issues

Set up basic "service" for templates

Essentially we want Calypso to be able to query mozmaker-templates via a very basic REST API:

For example:

GET /partials

["3-boxes", "guide", "resource-list"]

GET /partial/3-boxes

{
  "cssUrl": "http://mozilla.github.io/mozmaker-templates/demo/templates/3-boxes/style.css",
  "htmlPartial": "<div class="theme theme--charcoal">
  <section class="container">
    <h1 class="header-headline">Mozilla Club Resources</h1>
  </section>

  <section class="container">
    <h2>Important Links</h2>

    <ul class="Boxes">
   ..."
}

Remove CSS from Guide

Guide will become a template that autogenerates the sidenav based on a content block partial.

Finalize design for "Group page" layout

(Totally open to a different name for this layout)

This should include:

  • design for specific use case (Club page—spec to come)
  • generic design
  • design review and necessary revisions

Make color switcher

Right now we only see the grey themes, so it'd be useful to have a color switcher.

Switch to SCSS

We're moving away from LESS, so we need to use SCSS for our new templates. 👍

Add to npm

SImilar to how mozmaker is set up to include pre-compiled assets in the module.

Intended primarily for consumption by our fork of Calypso.

Finalize design for "List" layout

We've started the List layout, but during the March 11 heartbeat, we need to finalize. This should include:

  • design for specific use case (Clubs resources page) (p1)
  • generic design (p2)
  • design review and necessary revisions

Remove CSS from partials

We need to remove any custom CSS from the partials and leverage Onesie (and Bootstrap) as much as possible. It overcomplicates the CMS if we have to pull custom CSS for each partial. TinyMCE will have Onesie and Bootstrap available though.

This doesn't mean that we have to necessarily change the design, but if we do need CSS that isn't defined in Onesie, then it should be promoted to a template that wraps the partial.

CC: @simonwex @mmmavis @flukeout @vazquez

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.