Giter Club home page Giter Club logo

shortcuts-design-data's Introduction

Shortcuts.design โ€” Every shortcuts for designers, centralized and searchable.

Status Contact Contact

Shortcuts.design V2.0

Introduction

Hi, I'm Michel, the creator of Shortcuts.design. Shortcuts.design lists every shortcut for designers in one place and in a simple and clear way. It's a centralized and searchable online database that helps over 10K designers every month to quickly charge their workflow. Whether you're a beginning designer looking to work more efficient, when you switched to a new designtool or when you just want a reference to see which shortcut to use for that action you have to do all day long, it'll help you get there.

Contributing

Please use GitHub issues to report any bugs or feature requests. If you can fix it yourself, please fix it and send in a pull request.

Note: all data is in plain HTML, we're working on that ๐Ÿ˜…

Running the project

Shortcuts.design runs on [Eleventy](eleventy is a simpler static site generator.). Use the following commands to get started:

  • Install: npm install
  • Build: npx @11ty/eleventy
  • Run: npx @11ty/eleventy --serve

Changing data

Edit the data of a specific tool in data/{category}/{toolpages-toolname.html}.

Adding tools

  1. Add a new file to /tools, for example toolspage-{tool-name-here}.md with the following data:

    ---
    layout: layouts/tool.njk
    tool: {tool-name-here}
    os1: Mac {leave empty if only Mac or Windows}
    os2: Windows {leave empty if only Mac or Windows}
    toolSlug: {tool-name-with-dashes}
    toolGroup: {pick from *Design*, *Development* or *Productivity*}
    toolDescription: {write a description about the tool here}
    toolLink: {link to the tool here}
    toolLinkDescription: {how the link should be displayed}
    ---
    
  2. Add a logo to assets/img with the following naming-convention: logo-{toolslug-here}.png, logo's should be 264*264px.

  3. Add the data to data/{category}/. Use the formating instructions below. For quick generation of the needed HTML, use the following file:

Symbols

Please keep the code/data clean and consistent by using the following symbols when adding shortcuts on Mac tools-pages:

Key Symbol
Control โŒƒ
Option / Alt โŒฅ
Command โŒ˜
Shift โ‡ง
Enter โ†ฉ
Arrow keys โ†‘ โ†“ โ† โ†’

Using GitHub

In case you don't know how to contribute using GitHub, please check out this short post.

About the designer / developer

Hi, I'm Michel, I created Shortcuts.design to help others charge their workflow. I'm a Product Designer on a mission to build products for others that enable them to become more productive and effective ยท Product Design @YipYip ยท Prev @WeTransfer & @Awkward.

Links

shortcuts-design-data's People

Contributors

michelvanheest avatar wajahatkarim3 avatar oneeyedman avatar marcelosdm avatar ofekashery avatar animify avatar surajkumarsau avatar

Watchers

James Cloos 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.