{"id":13826168,"url":"https://github.com/nataliemarleny/Casing","last_synced_at":"2025-07-09T00:32:45.077Z","repository":{"id":72069363,"uuid":"136504405","full_name":"nataliemarleny/Casing","owner":"nataliemarleny","description":"The UI Framework for Framer Classic. Manages data, components and views","archived":true,"fork":false,"pushed_at":"2018-06-17T22:23:03.000Z","size":10468,"stargazers_count":81,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-08-05T09:14:55.800Z","etag":null,"topics":["coffeescript","framer","framework","prototype","ui","ui-components","uiframework"],"latest_commit_sha":null,"homepage":"https://youtu.be/T5GpNRn1MBU","language":"CoffeeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nataliemarleny.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2018-06-07T16:32:08.000Z","updated_at":"2024-06-02T07:58:03.000Z","dependencies_parsed_at":"2024-02-16T03:43:29.153Z","dependency_job_id":null,"html_url":"https://github.com/nataliemarleny/Casing","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nataliemarleny%2FCasing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nataliemarleny%2FCasing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nataliemarleny%2FCasing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nataliemarleny%2FCasing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nataliemarleny","download_url":"https://codeload.github.com/nataliemarleny/Casing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225476384,"owners_count":17480215,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["coffeescript","framer","framework","prototype","ui","ui-components","uiframework"],"created_at":"2024-08-04T09:01:33.251Z","updated_at":"2024-11-20T05:30:29.991Z","avatar_url":"https://github.com/nataliemarleny.png","language":"CoffeeScript","funding_links":[],"categories":["CoffeeScript"],"sub_categories":[],"readme":"# Casing  - A UI framework for Framer\u003cbr\u003e\n### ✕ ⃝ \u003cbr\u003e\n\nCasing will help you to manage:\n\n* Components (modular pieces of UI)\n* Screens (sets of components)\n* Data (mutable and immutable information shown in the prototype)\n\nIt is system which supports building truly big and complex Framer prototypes using real data.\n\n## ⃝ Installation\n\nCopy over following files to your `PROJECT_NAME.framer/modules/` directory:\n\n* `Casing.coffee` - REQUIRED. Contains the entirety of Casing's code\n* `FrmrDatePicker.coffee` - if you want to use a date-picker in your prototype\n* `FrmrDropdown.coffee` - if you want to use a drop-down in your prototype\n* `FrmrTextInput.coffee` - if you want to use a text-input in your prototype\n\n### In large prototypes there is a one-to-one mapping with:\u003cbr\u003e\n#### ⃝ Frames in design mode\n#### ⃝ Code modules. \n\n| ✕ ⃝ - **Modules** | **Description** |\n| :---: | :--- |\n| ![Modules Example](./img/modules_example.gif) | **If you're new to modules in Framer:**\u003cbr\u003e\u003cbr\u003e\u003cul\u003e\u003cli\u003eOpen the Framer directory using a text editor i.e. [Visual Studio Code](https://code.visualstudio.com/download)\u003c/li\u003e\u003cli\u003eThe directory named 'modules' generated on Framer project creation will already contain an example `myModule.coffee` file.\u003c/li\u003e\u003cli\u003eThe `Casing.coffee` file is required in this directory.\u003c/li\u003e |\n\n\n## ⃝ Getting Started\n\nTo be added soon...!\n\n\n## ⃝ Examples\n\n| ✕ ⃝ - **Example** | **Description** |\n| :---: | :---: |\n| ![WebApp example](./img/example_webapp.gif) | `example-webapp.framer`\u003cbr\u003e\u003cbr\u003eA non-linear multi-screen webapp built using Casing/Framer |\n| ![TicTacToe example](./img/example_tictactoe.gif) | `example-tictactoe.framer`\u003cbr\u003e\u003cbr\u003e A Casing/Framer version of the popular [React Tutorial][react-tutorial] | \n\n[react-tutorial]: https://reactjs.org/tutorial/tutorial.html\n\u003cbr\u003e\u003cbr\u003e\n## ⃝ Components\n\n| ✕ ⃝ - **Component** | **Description** |\n| :---: | :---: |\n| 📅 **Date Picker**\u003cbr\u003e\u003cbr\u003e![Calendar](./img/example_calendar.gif)\u003cbr\u003e | `FrmrDatePicker.coffee`\u003cbr\u003e\u003cbr\u003e A highly customisable 'real' calendar component for Framer\u003cbr\u003e\u003cbr\u003e Tutorial will be made available soon|\n| 👇 **Drop Down**\u003cbr\u003e\u003cbr\u003e![Dropdown](./img/example_dropdown.gif)\u003cbr\u003e | `FrmrDropdown.coffee` \u003cbr\u003e\u003cbr\u003e A dropdown menu built with real data in mind.\u003cbr\u003e\u003cbr\u003e Currently styled with inline CSS | \n| 💬 **Text Inputs**\u003cbr\u003e\u003cbr\u003e ![Text Input](./img/example_input.gif)\u003cbr\u003e | `FrmrTextInput.coffee` \u003cbr\u003e\u003cbr\u003e A customisable input box \u003cbr\u003e\u003cbr\u003e Adapted from [Ajimix's input module](https://github.com/ajimix/Input-Framer)| \n\n## ⃝ FAQ\n### ✕ How will Framer X impact Casing?\nWhen Framer X is released, Casing ✕ will become open source soon after. \u003cbr\u003e\u003cbr\u003e\nThis will likely require:\u003cbr\u003e\n\u003cul\u003e\u003cli\u003eCompiling coffeescript code into ES6\u003c/li\u003e\u003cli\u003eUpdates to optimise the design tab workflow for Framer X\u003c/li\u003e\u003cli\u003eReleasing the components to the component store\u003c/li\u003e\u003c/ul\u003e\n\nThe Casing Framework and its components will still be applicable for building **big \u0026 complex** prototypes in Framer X\n\n## ⃝ Thank You\n\nA warm thank you to Twitter and [Oliver Turner](https://twitter.com/oliverturner) for help with the name.\u003cbr\u003e\u003cbr\u003e\nThank you with all of my heart to everyone at Framer for building such an awesome tool and a supportive [community](https://framer.com/community/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnataliemarleny%2FCasing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnataliemarleny%2FCasing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnataliemarleny%2FCasing/lists"}