Skip to content
This repository has been archived by the owner on Dec 10, 2019. It is now read-only.
/ Casing Public archive

The UI Framework for Framer Classic. Manages data, components and views

License

Notifications You must be signed in to change notification settings

nataliemarleny/Casing

Repository files navigation

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