https://github.com/nataliemarleny/Casing

The UI Framework for Framer Classic. Manages data, components and views
https://github.com/nataliemarleny/Casing

coffeescript framer framework prototype ui ui-components uiframework

Last synced: 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/nataliemarleny/Casing
• Owner: nataliemarleny
• License: mit
• Archived: true
• Created: 2018-06-07T16:32:08.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2018-06-17T22:23:03.000Z (over 6 years ago)
• Last Synced: 2024-08-05T09:14:55.800Z (6 months ago)
• Topics: coffeescript, framer, framework, prototype, ui, ui-components, uiframework
• Language: CoffeeScript
• Homepage: https://youtu.be/T5GpNRn1MBU
• Size: 9.98 MB
• Stars: 81
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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](./img/modules_example.gif) | **If you're new to modules in Framer:**



Open the Framer directory using a text editor i.e. [Visual Studio Code](https://code.visualstudio.com/download)

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](./img/example_webapp.gif) | `example-webapp.framer`

A non-linear multi-screen webapp built using Casing/Framer |

| ![TicTacToe example](./img/example_tictactoe.gif) | `example-tictactoe.framer`

 A Casing/Framer version of the popular [React Tutorial][react-tutorial] | 

[react-tutorial]: https://reactjs.org/tutorial/tutorial.html





## ⃝ Components

| ✕ ⃝ - **Component** | **Description** |

| :---: | :---: |

| 📅 **Date Picker**

![Calendar](./img/example_calendar.gif)
 | `FrmrDatePicker.coffee`

 A highly customisable 'real' calendar component for Framer

 Tutorial will be made available soon|

| 👇 **Drop Down**

![Dropdown](./img/example_dropdown.gif)
 | `FrmrDropdown.coffee` 

 A dropdown menu built with real data in mind.

 Currently styled with inline CSS | 

| 💬 **Text Inputs**

 ![Text Input](./img/example_input.gif)
 | `FrmrTextInput.coffee` 

 A customisable input box 

 Adapted from [Ajimix's input module](https://github.com/ajimix/Input-Framer)| 

## ⃝ 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](https://twitter.com/oliverturner) 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](https://framer.com/community/)