Giter Site home page Giter Site logo

SketchStrap

SketchStrap

Sketch file with a full package of Bootstrap components. We have 21 artboards, 340 components, and more. Learn about rest of features on sketchstrap.io.

Overview

SketchStrap component kit has been prepared to get along with plugins that complementing SketchStrap bundle. Please, remember that some part of sketch file (like naming schema, element hierarchy and construction methods) are dictated by compatibility.

How to install

Download your copy of package and unzip it. You will have in there two major files: SketchStrap.sketchplugin and control-panel.sketch.

  1. Install your SketchStrap.sketchplugin by moving it to your Sketch plugin folder. This folder can be found by using Plugin > Manage Plugins... > βš™ > Reveal Plugins Folder.
  2. Now you can use control-panel.sketch file as you need. After changes in control-panel page you can populate changes through whole file using our Update plugin.

SketchStrap.sketchplugin

In this repo we are sharing part of our Sketch plugin that is required to work with SketchStrap UI kit. To get the full experience of SketchStrap check our subscription plans on sketchstrap.io.

Tech spec

Why not symbols?

Symbols are great, but we want to as soon as possible - in project life cycle - take the adventage and be in sync with Bootstrap Stylesheets. We created plugins that allow to share just property values - as CSS does. So please, use our magic naming system.

Naming system

To be able to share properties like fill, text color, border radius and color we invented few rules of notation.

  • Groups or elements not in sync should be named like HTML elements with > prefix - e.g. p.card-text
  • Synced elements name should be prefixed with _ char and suffixed with all properties we want to apply in round brackets, e.g.
_btn(fill:$primary; border-radius:$border-radius;)
  • We can use properties like: fill, border-radius, border-color.
  • Values should be prefixed with $ char and contain name of variable from "Control Panel" page.

Hierarchy of elements

We build groups as containers to imitate actual Bootstrap hierarchy.

Copyright and license

Copyright 2018 Jazzy Innovations. Resources released under the MIT license. There is only one limitation you can't re-distribute the SketchStrap as stock. You can’t do this if you modify the SketchStrap.


Made with love by Jazzy Innovations

SketchStrap's Projects

skpm icon skpm

πŸ’ŽπŸ“¦ A utility to build and publish sketch plugins

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.