sketch

Shared Sketch files for COS.

Requires Sketch>=47 and Kactus.

Project structure

├── color-palettes  # Requires Sketch Palettes plugin
│  └── bootstrap.sketchpalette  # Bootstrap color palette used across COS products
├── libraries  # Library files. Add these in File / Add library...
│  └── COS_Common.sketch  # Common symbols used across products
│  └── COS_ember-osf.sketch  # Common symbols used across branded products (preprints, registries, etc.)
├── osf
├── preprints
├── reviews
|  ... registries, collections, etc. will follow same structure

Contributing

• Mocking up a new feature?
  • Create a new branch, e.g. new-files-widget.
  • Open Kactus and generate the relevant sketch file.
  • Open the sketch file, e.g. osf.sketch.
    • If a sketch file doesn't exist for the product you are mocking up, create one.
    • Within a sketch file each Page represents a page on the website and each Artboard is a view of that page.
  • Do great work.
    • Be sure to add symbols to libraries when appropriate so that others can re-use them!
• Adding symbols?
  1. Open libraries/COS_Common.sketch and add your symbols.
  2. Before committing, make sure to run "Plugins/Symbol Organizer/Run Symbol Organizer" (Cmd+Option+Control+O)

Initial setup

• Install Sketch
• Install Kactus
• Install Open Sans
  • Typeface used on COS products
  • Can be installed using homebrew-cask:

    brew cask install font-opensans
    

• Install the required plugins listed below
• Clone the repository
• Open Kactus and generate the sketch files for the folders in libraries/
• Open Sketch and add all libraries under libraries/ see Sketch docs on adding libraries
• You are ready to start creating mockups!

Required plugins

Icon Font

This plugin helps you easily insert and manage icons from icon fonts - such as FontAwesome, Ion or Material Design Icons - in your Sketch designs. Make sure to follow the instructions on the linked font-bundle repository to install the fonts.

NOTE: The FontAwesome icon font can be installed with homebrew-cask:

brew cask install font-fontawesome

Sketch Palettes

A Sketch plugin for exporting and importing fill presets. It supports colors, gradients, and Pattern fills.

Symbol Organizer

Organize your symbols page, and layer list, alphabetically and into groupings determined by your symbol names.

Recommended plugins

Dynamic Button 3.5 (Highly recommended)

Automatically resize buttons to size of text with specified padding.

Sketch Measure (Highly recommended)

Make it fun to create specs for developers and teammates.

Sketch Data Populator (Highly recommended)

We believe designers should work with meaningful and realistic data as early as possible in the design process for the following reasons...

Sketch Runner

Runner helps you to get around Sketch quicker by giving you an intuitive interface to supercharge your daily workflow. Stop searching through your menu & start running commands directly from your keyboard.

Magic Presenter

With a single shortcut, you can put your artboards into presentable slides. No more switching between presentation tools and re-exporting assets when the content is updated.