Giter VIP home page Giter VIP logo

casing's Introduction

Casing - A UI framework for Framer

✕ ⃝

Casing will help you to manage:

  • Components (modular pieces of UI)
  • Screens (sets of components)
  • Data (mutable and immutable information shown in the prototype)

It is system which supports building truly big and complex Framer prototypes using real data.

⃝ Installation

Copy over following files to your PROJECT_NAME.framer/modules/ directory:

  • Casing.coffee - REQUIRED. Contains the entirety of Casing's code
  • FrmrDatePicker.coffee - if you want to use a date-picker in your prototype
  • FrmrDropdown.coffee - if you want to use a drop-down in your prototype
  • FrmrTextInput.coffee - if you want to use a text-input in your prototype

In large prototypes there is a one-to-one mapping with:

⃝ Frames in design mode

⃝ Code modules.

✕ ⃝ - Modules Description
Modules Example If you're new to modules in Framer:

  • Open the Framer directory using a text editor i.e. Visual Studio Code
  • The directory named 'modules' generated on Framer project creation will already contain an example myModule.coffee file.
  • The Casing.coffee file is required in this directory.

⃝ Getting Started

To be added soon...!

⃝ Examples

✕ ⃝ - Example Description
WebApp example example-webapp.framer

A non-linear multi-screen webapp built using Casing/Framer
TicTacToe example example-tictactoe.framer

A Casing/Framer version of the popular React Tutorial



⃝ Components

✕ ⃝ - Component Description
📅 Date Picker

Calendar
FrmrDatePicker.coffee

A highly customisable 'real' calendar component for Framer

Tutorial will be made available soon
👇 Drop Down

Dropdown
FrmrDropdown.coffee

A dropdown menu built with real data in mind.

Currently styled with inline CSS
💬 Text Inputs

Text Input
FrmrTextInput.coffee

A customisable input box

Adapted from Ajimix's input module

⃝ FAQ

✕ How will Framer X impact Casing?

When Framer X is released, Casing ✕ will become open source soon after.

This will likely require:

  • Compiling coffeescript code into ES6
  • Updates to optimise the design tab workflow for Framer X
  • Releasing the components to the component store

The Casing Framework and its components will still be applicable for building big & complex prototypes in Framer X

⃝ Thank You

A warm thank you to Twitter and Oliver Turner for help with the name.

Thank you with all of my heart to everyone at Framer for building such an awesome tool and a supportive community

casing's People

Contributors

nataliemarleny avatar

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar

Forkers

bovas85 grispi

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.