{"id":13714947,"url":"https://github.com/k-vyn/framer-material-kit","last_synced_at":"2025-05-07T03:31:01.915Z","repository":{"id":215688587,"uuid":"58354252","full_name":"k-vyn/framer-material-kit","owner":"k-vyn","description":null,"archived":false,"fork":false,"pushed_at":"2017-10-30T22:19:32.000Z","size":2486,"stargazers_count":265,"open_issues_count":8,"forks_count":26,"subscribers_count":16,"default_branch":"master","last_synced_at":"2024-11-14T03:34:18.232Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/k-vyn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"License.md","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,"publiccode":null,"codemeta":null}},"created_at":"2016-05-09T06:40:18.000Z","updated_at":"2023-11-29T12:24:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"3a916561-4b9a-4120-99dc-c6117973b24f","html_url":"https://github.com/k-vyn/framer-material-kit","commit_stats":null,"previous_names":["k-vyn/framer-material-kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k-vyn%2Fframer-material-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k-vyn%2Fframer-material-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k-vyn%2Fframer-material-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k-vyn%2Fframer-material-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k-vyn","download_url":"https://codeload.github.com/k-vyn/framer-material-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252806414,"owners_count":21807199,"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":[],"created_at":"2024-08-03T00:00:52.311Z","updated_at":"2025-05-07T03:31:01.891Z","avatar_url":"https://github.com/k-vyn.png","language":"JavaScript","funding_links":[],"categories":["Modules"],"sub_categories":[],"readme":"# Material Design Kit for FramerJS\n![Material Kit Logo](/_img/framer-material-design-kit.jpg)\n\nMaterial Kit was created to make prototyping with [Material Design](https://material.io/) fast and easy without compromising the quality or customization.\n\nThere are three core pieces:\n1. **Foundational elements** that help Material Kit mold to devices,\n2. A **component library** that’ll save you time by providing Material offerings, and\n3. **Supporting functions** that help power the foundation and components.\n\nIf you're interested in prototyping with iOS, check out the [iOS Kit for FramerJS](https://github.com/k-vyn/framer-ios-kit).\n\n### Contents\n\u003e - [Setup](#setup)\n\u003e - [Dynamic Layout](#dynamic)\n\u003e   - [Positioning](#positioning)\n\u003e   - [Setting opposite constraints](#opposite)\n\u003e   - [Positioning](#pos-rel)\n\u003e   - [Centering](#center-rel)\n\u003e   - [Aligning](#align-rel)\n\u003e - [Real device override](#real)\n\u003e - [Device details library](#details)\n\u003e - [System Components](#system)\n\u003e - [Material Color](#colors)\n\u003e - [Material Icon](#icons)\n\u003e - [Status Bar](#status)\n\u003e - [App Bar](#app)\n\u003e - [Banner](#banner)\n\u003e - [Video](#video)\n\u003e - [Dialog](#dialog)\n\u003e - [Text](#text)\n\u003e - [Buttons](#buttons)\n\u003e - [Snack Bar](#snack)\n\u003e - [Navigation Bar](#nav)\n\n### Setup\nTo setup the kit, add the following list of files to your modules folder in your project. Don't worry, you'll only need to require one.\n\n```coffeescript\nmaterial-kit.coffee\nmaterial-kit-dialog.coffee\nmaterial-kit-appbar.coffee\nmaterial-kit-banner.coffee\nmaterial-kit-button.coffee\nmaterial-kit-layout.coffee\nmaterial-kit-library.coffee\nmaterial-kit-nav-bar.coffee\nmaterial-kit-status-bar.coffee\nmaterial-kit-snack-bar.coffee\nmaterial-kit-stack.coffee\nmaterial-kit-icon.coffee\nmaterial-kit-text.coffee\nmaterial-kit-utils.coffee\nmaterial-kit-video.coffee\n```\n\n\u003e Framer Studio does not support subfolders in the modules folder, so they'll need to be added to the root.\n\nIn Framer Studio, write `m = require 'material-kit'`.\n\nYou can write any variable name you'd like, but for the purposes of this guide we'll be using `m`.\n\n### Dynamic Layout\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/dynamic.png)\n\nThe most fundamental piece of this module is Dynamic Layout. Dynamic Layout is a robust layout engine that’ll not only help make positioning layers easier and smarter, it'll will make positioning layers across devices possible.\n\n### The Density-independent pixel (DP)\nIn Dynamic Layout, like in Android, everything is based around the dp instead of the pixel. The exact number of pixels will change from device to device, but the number of points will not. There's a simple equation for finding points.\n\n`1dp = 1px * scale`\n\nSide note: you can also use the built-in functions:\n\n* `m.dp(6)` #returns 3 points on HTC One and 2 points on Nexus 4\n* `m.px(1)` #returns 4 pixels on Nexus 6p and 3 pixels on iPhone 6 plus\n\n### Positioning\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/positioning.png)\n\nAs we get away from using pixel positioning, we won't be using `x` and `y`-based positioning. Instead, we'll be setting things called constraints. When you set a constraint, it's like saying that a layer can't go beyond a certain position. There are four constraints for positioning: `leading`, `trailing`, `top`, and `bottom`.\n\nTo set a leading and top constraint on a box, write:\n\n```coffeescript\nlayer = new Layer\nlayer.constraints =\n    top:10\n    leading:10\nm.layout.set()\n```\n\nThis will position the layer at `x:30, y:30` on Samsung S5, and `x:40, y:40` on Samsung S7\n\n\u003eYou can also do this on one line if you'd prefer using this syntax. Just replace the layer.constraints line from above with this line. You'll still need to run the `m.layout.set` function.\n\u003e`layer.constraints = {top:10, leading:10}`\n\n\n#### Setting Opposing Constraints\nIf you set a leading \u0026 trailing or a top \u0026 bottom, Dynamic Layout will do its best to honor the constraints, which will mean the height/width will need to be adjusted. For example, if you set the constraints of a layer to  `leading: 0` and `trailing:0`, the layer's width will be adjusted to the device's width.\n\n\u003e**WARNING** - If you set too many opposing constraints, I'm not sure what'll happen. Best of luck. `¯\\_(ツ)_/¯` Try to just set no more than one of each constraint.\n\n#### Relationships\nOne of the most powerful things of Dynamic Layout is relationships. Relationships allows you to link a layer onto another layer in a variety of ways.\n\n#### Positioning Relationships\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/relationship.png)\n\nWhen you declare a constraint, you can set a constraint as a layer instead of an integer. For example, if you have two layers (`boxA` and `boxB`) you can set `boxB`'s top as `boxA`.\n```coffeescript\nboxB.constraints =\n\ttop:boxA\nm.layout.set()\n```\n\nThis will stack the boxes so that boxB's top edge is constrained to below `boxA`, but what if you want a little buffer? That's really easy. We'll use a little different syntax with wrapping the layer and buffer in brackets.\n```coffeescript\nboxB.constraints =\n\ttop:[boxA, 10]\nm.layout.set()\n```\n\nThis will set `boxB`'s top edge to 10 points below `boxA`.\n\n#### Centering Relationships\n\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/centering.png)\n\nThere are a couple other types of constraints that'll help make positioning layers even easier.  There are two centering constraints: `verticalCenter`, `horizontalCenter`. These constraints will only accept just a layer as a constraint.\n\nFor example, if you'd like boxB to be horizontally centered on boxA, write this:\n```coffeescript\nboxB.constraints =\n\ttop:[boxA, 10]\n\thorizontalCenter:boxA\nm.layout.set()\n```\n\nThis will set `boxB` 10 points below boxA, and it'll center it within `boxA` on the x-axis. The other centering constraint `verticalCenter` will work similarly center `boxB` within `boxA` on the y-axis. If you've set a top/bottom constraint, it'll ignore those constraints.\n\n#### Aligning Relationships\n![](https://dl.dropboxusercontent.com/u/143270556/ioskit/align.png)\n\nThe last type of relationships will allow you to align any edge of layer onto another layer's edge. To do this, there are four constraints at your disposal: `leadingEdges`, `trailingEdges`, `topEdges`, and `bottomEdges`. These layers, like centers, will not accept anything other but another layer.\n\nIf you'd like to align `boxB`'s trailing edge onto `boxA`'s trailing edge, write this:\n```coffeescript\nboxB.constraints =\n\ttop:[boxA, 10]\n\ttrailingEdges:boxA\nm.layout.set()\n```\n\n#### Animating Constraints\nYou can animate between constraints by running ` m.layout.animate()`.\n\n#### Properties\n- **target (optional)** *Layer or Array of layers* \u003cbr\u003e When set, this will only animate the target layers with updated constraints. When this is not set, it'll animate all layers with their updated constraints.\n- **curve, curveOptions, delay, repeat, colorModel** *String* \u003cbr\u003e  Each of these properties will work the same as native animations\n- **time** *Num* \u003cbr\u003e This will be the time of each layer's animation, not the entire animation of all the layers.\n- **stagger** *Num* \u003cbr\u003e This will put an incremental delay across all layers being animated.\n- **fadeOut** *Boolean or Layer* \u003cbr\u003e When set to true, this will animate all layers' opacity to 0. When set to a layer, that layer's opacity will be set to 0.\n- **fadeIn** *Boolean or Layer* \u003cbr\u003e When set to true, this will animate all layers' opacity to 1. When set to a layer, that layer's opacity will be set to 1.\n\n#### Example\nIf we have a bunch of layers in a column and we want them to all move up, we can set the `topLayer`'s constraint to `50`, and all the layers with a relationship with `topLayer` will also move up.\n\n```coffeescript\ntopLayer.constraints.top = 50 ##Set a new constraint\nm.animateLayout\n  stagger:.05\n  curve:\"spring\"\n```\n\u003e When updating a constraint on a layer, please be careful on your syntax. Writing `layer.constraints =` will wipe out your previous object.\n\u003e\n\u003e This will wipe out your top constraint.\n\u003e ````coffeescript\n\u003e topLayer.constraints =\n\u003e \ttop:50\n\u003e \tleading:10\n\u003e topLayer.constraints =\n\u003e \tleading:20\n\u003e ````\n\u003e\n\u003e Where as, this will keep your top constraint.\n\u003e ```coffeescript\n\u003e topLayer.constraints =\n\u003e \ttop:50\n\u003e \tleading:10\n\u003e topLayer.constraints.leading = 20\n\u003e ```\n\n\n#### Size Constraints\nYou can also set `height`/`width` constraints just like above. This will ensure that your layers will remain a particular size.  One big difference in setting a `height`/`width` constraint over a property `height`/`width` is that you'll need to set the `height`/`width` constraint in points.\n\n```coffeescript\nboxB.constraints =\n\ttop:[boxA, 10]\n\ttrailingEdges:boxA\n\theight:100\n\twidth:100\nm.layout.set()\n```\n\n\n#### m.layout.set()\nThis function only need to be called once for all constraints. It'll cycle through all the layers in order of creation, and it'll fulfill all constraints.\n\n#### When to call it\nYou'll need to call it before any `x`/`y` positions are referenced. If you have a function that's based off another layer, you'll need to call `m.layout.set` before that positioning is stored otherwise it'll be wrong or `0`. Once you `call m.layout.set()`, it'll set the position to the accurate position.\n\n#### Mixing up the queue\n`m.layout.set` will accept layers in the parentheses. This will layout **only** that layer and ignore all other constraints. This is to be used if a layer created after others needs to be laid out before others.\n\n```coffeescript\nm.layout.set(boxB)\n```\n\nThis will only layout `boxB` and not `boxA`.\n\nIf you need a completely different order, you can use the target property and pass an array in the order you wish for them to be laid out.\n\n```coffeescript\nm.layout.set\n\ttarget:[boxB, boxD, boxA]\n```\n\n\n### Real device override\nThis module is meant to make prototyping look real, and one of things that prevents this is when you open a prototype that was built for an iPhone 6 on an iPhone 6+. If you do this, you’ll end up seeing a lot of white space. When this module is on, your frame will be overridden by the device in your hand, so the iPhone 6+ will no longer see the iPhone 6 frame. Using Dynamic Layout will ensure that your prototype looks presentable at every size.\n\nFor this to work properly, you'll need a full-screen browser. I use \u0026 recommend [Framer](https://play.google.com/store/apps/details?id=com.framerjs.android\u0026hl=en) on Android and [Frameless](#https://itunes.apple.com/us/app/frameless-full-screen-web/id933580264?mt=8) on iOS.\n\n### Device details library\nYou’ll now be able to refer to a set of new variables that’ll allow you to get more details on the device.\n\n````coffeescript\nm.device.height\u003c/b\u003e # returns the height of the device in pixels\nm.device.width # returns the width of the device in pixels\nm.device.name # returns many different options\n````\n\n## System components\nThese are easy to implement and fully customizable native Material components. The idea is that implementing Material components should be easy \u0026 quick, so that you can spend the time working on what makes your prototype unique.\n\nEvery component in this module was written to feel native to Framer, so the way you create components should feel as familiar as creating a new layer. The difference is that in addition to Framer properties there's added customization parameters, which will be accepted, and any component that can accept constraints from Dynamic Layout is able to.\n\nAfter creation, components will operate as native layers under the variable name you declared. The only difference is the sublayers of the component are accessible via dot notation, so it's easier for you to turn on event listeners etc.\n\n## Material Colors\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/colors.png)\n\nOne of the core parts of material design is color. To make it convenient, there's a color function that has all of [material design's color palette](https://www.google.com/design/spec/style/color.html#color-color-palette) included. Also, all the objects below will by default use them, so when you pass a backgroundColor or color property feel free to use the following codes.\n\nColor codes in material design are setup as name + code like `blue400` or `red100`. The color name is lower camel-case like \"deepPurple\" and any code that includes an \"A\" is uppercase.\n\n#### Example\n```coffeescript\n# Non-material design layers\nlayer = new Layer\n\tcolor:m.color(\"lime700\") ## sets color to #AFB42B\n\n# Material design layers\ntext = new m.Text\n\tcolor:\"yellowA400\" ## sets color to #FFEA00\n```\n\n## Material Icons\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/icons.png)\n\nYou can easly access all the icons in the [Material Design library](https://design.google.com/icons/) with a simple \u0026 easy object.  \n\n#### Properties\n- **name** *String* \u003cbr\u003e String that grabs the icon from the [library](https://design.google.com/icons/)\n- **scale** *Int* \u003cbr\u003e Scales the icon's height \u0026 width.\n- **color** *Color String* \u003cbr\u003e Sets the color of the icon.\n- **superLayer** *String* \u003cbr\u003e Same as Framer's superLayer property.\n- **constraints** *Constraints Object* \u003cbr\u003e Sets the icon's constraints.\n- **clip** *Boolean* \u003cbr\u003e Same as Framer's clip property.\n\n**Please note:** Whenever an icon has more than one words, use an _ between the words. So flight land would be `\"flight_land\"`.\n\n#### Example\n```coffeescript\nicon = new m.Icon\n\tname:\"exit_to_app\"\n\tcolor:\"white\"\n```\n\n## Status Bar\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/statusbar.png)\nThe status bar allows users to see the connection, current time, and battery.\n\n#### Properties\n- **style** *String* \u003cbr\u003e Dark is black white on black. Light is grey on white text.  \n- **opacity** *Int* \u003cbr\u003e Sets the opacity of the layers in the status bar.\n- **color** *Color String* \u003cbr\u003e Sets the color of the layers in the status bar.\n- **backgroundColor** *Color String* \u003cbr\u003e Sets the background color in the status bar.  \n- **clock24** *Boolean* \u003cbr\u003e By default, it's set to false, so it's a 12 hour clock with AM/PM. When set to true, the clock will cycle through 0-23 hours and removes AM/PM.\n\n#### Example\n````coffeescript\nstatusBar = new material-kit.StatusBar\n\tstyle:\"light\"\n````\n\n####Schema\n```coffeescript\nstatusBar : {\n\tstatusBar.batteryIcon\n    statusBar.time\n    statusBar.cellular\n    statusBar.wifi\n}\n```\n\n## App Bar\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/appbar.png)\n\nThe app bar in android is the most versatile component. It can handle tabbing \u0026 key actions.\n\n#### Properties\n- **title** *String* \u003cbr\u003e Sets intial title of app bar.\n- **menu** *Layer or Icon String* \u003cbr\u003e If set, it will appear to the left of the title.\n- **superLayer** *String or Tab* \u003cbr\u003e Same as Framer's superLayer.\n- **backgroundColor** *Boolean* \u003cbr\u003e Sets the background color of the app bar.\n- **titleColor** *Layer or String or Bool* \u003cbr\u003e Sets the color of the title.\n- **actionColor** *Layer or String* \u003cbr\u003e Sets the color of the actions.\n- **actions** *Array of Layers or Strings* \u003cbr\u003e Sets the actions to the right of the Title.\n- **tabs** *Array of String* \u003cbr\u003e If set, the app bar will show tabs.\n- **tabIcons** *Array of Layers or Icon strings* \u003cbr\u003e If set, will replace tab names with icons.\n- **tabsInk** *Ink Object* \u003cbr\u003e Sets the ink effect on the tabs.\n- **tabsAlt** *{Color and/or Opacity}* \u003cbr\u003e Sets the non-active tabs color and/or opacity.\n- **tabsBarColor** *Color String* \u003cbr\u003e Sets color of the bar that appears under the active tab.\n\n#### Example\n````coffeescript\nbar = new m.AppBar\n\tbackgroundColor:\"red600\"\n\ttitle:\"YouTube\"\n\ttabs:[\"YouTube Red\", \"trending\", \"subscriptions\", \"account\"]\n\ttabIcons:[\"home\", \"whatshot\", \"subscriptions\", \"person\"]\n\ttabsInk:{color:\"red800\", scale:3}\n\ttabsBarColor:\"white\"\n\ttabsColor:\"white\"\n\ttabsAlt:{color:\"black\", opacity:.7}\n\tactions:[\"more_vert\", \"search\"]\n````\n\n## Banner\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/banner.png)\n\nThe banner is a non-blocking notification. Typically, the banner will send you to a specific screen in an app.\n\n#### Properties\n- **app** *String* \u003cbr\u003e Sets app text.\n- **title** *String* \u003cbr\u003e Sets title text.\n- **message** *String* \u003cbr\u003e Sets message text.\n- **time** *String* \u003cbr\u003e time string that appears next to title.\n- **icon** *Layer* \u003cbr\u003e This will put the layer inside the banner and size it accordingly. By default, it's a green box.\n- **duration** *Integer* \u003cbr\u003e This will override the time before the banner animates-out. By default, this is set to 7.\n- **animated** *Boolean* \u003cbr\u003e When set to `true` sheet will animate-in.\n\n\u003e**NOTE -** The banner will be, by default, draggable. If you drag down, it'll reset, and if you drag up it'll dismiss \u0026 destroy the banner.\n\n#### Example\n\n```coffeescript\nbanner = new material-kit.Banner\n  title:\"Time to do something\"\n  message:\"Don't miss out\"\n  icon:iconLayer\n  animated:true\n```\n\n\n#### Schema\n\n```javascript\nbanner : {\n  banner.app\n  banner.icon\n  banner.title\n  banner.message\n}\n```\n\n#### Listening to actions\n\nTo make the banner clickable, you can write -\n```coffeescript\nbanner.on Events...\n```\n\n## Video\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/video.png)\nThis is a video object that comes with UI controls.\n\n#### Properties\n- **video** *URL* \u003cbr\u003e Sets the video being played.\n- **image** *URL* \u003cbr\u003e Sets image loaded before playing.\n- **width** *Int* \u003cbr\u003e Sets width of the video.\n- **height** *Int* \u003cbr\u003e Sets the height of the video.\n- **max** *Boolean* \u003cbr\u003e Sets the width \u0026 height to max for the video on the device.\n- **progressColor** *Color String* \u003cbr\u003e Sets color of the seeker \u0026 progress bar.\n- **backgroundColor** *Color String* \u003cbr\u003e Sets background color of the video.\n- **superLayer** *Layer* \u003cbr\u003e Sets superLayer of the video.\n- **autoplay** *Boolean* \u003cbr\u003e If true, the video will start on load.\n- **loop** *Boolean* \u003cbr\u003e  If true, the video will repeat when finished.\n- **muted** *Boolean* \u003cbr\u003e  If true, the video will be muted on computers.\n- **idleLimit** *Int* \u003cbr\u003e  Sets the duration before the controls hide.\n- **showPlayStop** *Boolean* \u003cbr\u003e  If true, the circle behind the play/hide will be shown.\n- **constraints** *Constraints Object* \u003cbr\u003e Sets constraints for the video.\n\n#### Example\n```coffeescript\nvideo = new m.Video\n\tvideo: \"myDog.mp4\"\n```\n\n#### Schema\n```javascript\nvideo : {\n\tvideo.controls\n\t\tvideo.progressBar\n\t\tvideo.seeker\n\t\t\tvideo.seekerDot\n\t\tvideo.timebar\n\t\tvideo.endTime\n\t\tvideo.currentTime\n\t\tvideo.fullscreen\n\t\tvideo.fullscreenExit\n}\n```\n\nDialog\n\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/dialog.png)\n\nDialogs are blocking notifications that will force the users to address the dialog before continuing.\n\n#### Properties\n- **title** *String* \u003cbr\u003e Embolded text at the top.\n- **message** *String* \u003cbr\u003e  Body text before actions.\n- **actions** *Array of Strings* \u003cbr\u003e Series of actions that can be taken on the dialog.  \n\n#### Example\n```coffeescript\ndialog = new m.Dialog\n  title:\"Warning\"\n  message:\"Don't do this\"\n  actions:[\"OK\", \"Cancel\"]\n```\n\n#### Schema\n```javascript\ndialog : {\ndialog.modal\n\tdialog.title\n\tdialog.message\n\tdialog.actions : { OK, Cancel }\ndialog.overlay\n}\n```\n\n#### Listening to Actions\nTo listen to different actions, you can use dot notation if it's a single word or brackets for any case\n\n- Dot notation \u003cbr\u003e `dialog.actions.OK.on Events...`\n- Square bracket notation \u003cbr\u003e `dialog.actions[\"OK\"].on Events...`\n\n\n## Text\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/text.png)\n\nA dynamic text object that'll automatically size for you.\n\n#### Properties\n- **text** *String* \u003cbr\u003e Adds text by default to the field.\n- **fontSize** *Integer* \u003cbr\u003eSets font size in points.\n- **fontWeight** *Integer* \u003cbr\u003e Sets font weight.\n- **fontFamily** *String* \u003cbr\u003e Sets font family.\n- **lineHeight** *Integer* \u003cbr\u003e Sets line height in points. It's automatically done if left unset.\n- **textTransform** *String* \u003cbr\u003e Sets text-transform style property.\n- **opacity** *Integer* \u003cbr\u003e Sets opacity.\n- **width** *Integer* \u003cbr\u003e Sets width in points.\n- **height** *Integer* \u003cbr\u003e Sets height in points.\n- **constraints** *Constraints Object* \u003cbr\u003e Will set the text's constraints and run layout using [Dynamic Layout](#dynamic)\n\n#### Example\n```coffeescript\n\ttext = new m.Text\n\t\ttext:\"Try Material Kit for Framer JS\"\n\t\tfontSize:21\n\t\tfontWeight:100\n\t\twidth:320\n\t\tconstraints:{align:\"center\"}\n```\n\n## Buttons\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/buttons.png)\nButton is a small versatile component that handles press states automatically.\n\n#### Properties\n- **text** *String* \u003cbr\u003e Sets button text.\n- **type** *String* \u003cbr\u003e Can be `floating`, `raised`, `flat`.\n- **backgroundColor** *Hex Color* \u003cbr\u003e Will set the background on big buttons.\n- **icon** *Icon String* \u003cbr\u003e If floating, this will set the icon.\n- **color** *Hex Color* \u003cbr\u003e Sets `small` and `text` colors.\n- **superLayer** *Layer* \u003cbr\u003e set the passed layer as the super layer.\n- **constraints** *Constraints Object* \u003cbr\u003e will set constraints using [Dynamic Layout](#dynamic).\n- **ink** *Ink Object* \u003cbr\u003e Sets parameters of ink.\n- **clip** *Boolean* \u003cbr\u003e Sets whether the ink should be cut off when extending beyond the button object.\n\n#### Example\n```coffeescript\nbutton = new m.Button\n  text:\"Download\"\n  type:\"raised\"\n```\n\n#### Schema\n```javascript\nbutton: {\n\tbutton.label\n}\n```\n\n#### Listening to buttons\nListening to buttons is no different than normal framer.\n\n```coffeescript\nbutton.on Events...\n```\n\n## Snack Bar\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/snackbar.png)\nSnackbars are messages with actions that appear at the bottom of screens. You can assign an action to them.\n\n#### Properties\n- **text** *String* \u003cbr\u003e Sets the text of the snackbar.\n- **action** *String* \u003cbr\u003e Sets the action button of the snackbar.\n- **actionColor** *Color String* \u003cbr\u003e Will set color of the action.\n- **animated** *Boolean* \u003cbr\u003e Animates the snackbar in.\n- **duration** *Int* \u003cbr\u003e Sets the time before animating out in seconds.\n\n#### Example\n```coffeescript\nsnack = new m.SnackBar\n  text:\"I'm afraid you can't do that.\"\n  action:\"Retry\"\n```\n\n#### Schema\n```javascript\nsnack: {\n  snack.text\n  snack.action\n  snack.bg\n}\n```\n\n## Navigation Bar\n![](https://dl.dropboxusercontent.com/u/143270556/material-kit/nav.png)\nThis is the system bar that appears on the bottom of the device. There are no properties for the navigation bar. Please read about the stack when you implement the Navigation Bar.\n\n#### Example\n```coffeescript\nnav = new m.NavBar\n```\n\n#### Schema\n```javascript\nnav: {\n  nav.back\n      icon\n  nav.home\n      icon\n  nav.recent\n      icon\n}\n```\n\n### The Stack\nThe stack manages what layers are shown in the order of initialization. When a user taps on the back button, if there's anything in the stack it'll be exited.\n\n#### Adding to the stack\nTo add something to the stack, you can write a little one liner like this:\n```coffeescript\nm.addToStack(layer)\n```\nThat layer will now be add to the top of the stack.\n\n#### Removing from the stack\nIf you'd like to manually remove something from the stack, you can write:\n```coffeescript\nm.removeFromStack()\n```\nThis will remove the previous layer from the stack.\n\n#### Customizing the animation\nIf your layer has a special animation for when it leaves the stack. Set the layer's exit value.\n```coffeescript\nfadeOut = -\u003e\n\nlayer.animate\n\tproperties:(opacity:0)\n\ttime:.3\n\nlayer.exit = fade()\n```\n\nWhen the layer is removed from the stack it will be faded out.\n\n## Supporting Functions\nThese are a set of functions that were created to help provide functionality to various elements of this module. I opened them up, so if you by chance need any of these functions you can use them.\n\n#### m.utils.inky\nThis will create the ink effect on any layer that's passed through. There's quite a few properties to modify this.\n\n#### Properties\n- **layer** *layer* \u003cbr\u003e Sets the layer to have ink effect.\n- **color** *Color String* \u003cbr\u003e Sets the ink's color.\n- **scale** *Int* \u003cbr\u003e Sets the max scale of the ink.\n- **startScale** *Int* \u003cbr\u003e Sets the initial scale of the ink.\n- **opacity** *Int* \u003cbr\u003e Sets the starting opacity of ink.\n- **curve** *Curve String* \u003cbr\u003e Sets curve animation of the ink.\n- **moveToTap** *Boolean* \u003cbr\u003e If true, the ink will appear below the finger. If false, the ink will appear from the center. By default, this is set to true.\n\n#### m.utils.update(layer, styleArray)\nThis was specifically intended for text objects. If the html or style of a text object is altered, the `width`/`height` of the object would be incorrect. With `m.update`, you'll be able to pass your changes in while also resizing the text layer.\n\n```coffeescript\nm.update(headerOne, [text:\"Done!\"]\n```\n\n#### m.utils.dp(int) \u0026 m.utils.px(int)\nThese functions will automatically convert pixels -\u003e points and points -\u003e pixels.\n\n```coffeescript\nm.dp(6) # will return 3 points on an iPhone 6\nm.px(6) # will return 12 pixels on an iPhone 6\n```\n\n#### m.utils.clean(string)\nThis will remove any space or bracket HTML syntax from a string.\nm.clean(\"`Hi,\u0026nbsp;how\u0026nbsp;are\u0026nbsp;you?\u003cbr\u003e`\") returns \"Hi, how are you?\"\n\n#### m.utils.svg(svg path)\nThis does a series of things: it'll rewrite the SVG path into points, and it'll provide variables to set the layer's height and width.\n```coffeescript\nsvgObj = m.svg(svgPath)\nsvgObj.svg = # is the new SVG path in points\nsvgObj.height = # is the value for the height of the layer\nsvgObj.width = # is the value for the width of the layer\n```\n\n#### m.utils.changeFill(layer, color)\nThis only works with layers with a SVG path. This will change the SVG fill to whatever color is passed.\n\n#### m.utils.capitalize(string)\nThis will capitalize only the first letter of the entire string.\n```coffeescript\nprint m.capitalize(\"welcome to the party\") #returns \"Welcome to the party\"\n```\n\n#### m.utils.getTime()\nFetches the current time and returns a neatly organized time object with some humanization.\n\n```coffeescript\ntime = m.getTime()\n\nprint time.month # prints \"April\"\nprint time.date # prints \"12\"\nprint time.day # prints \"Tuesday\"\nprint time.hours # prints \"10\"\nprint time.mins # prints \"33\"\nprint time.secs # prints \"1\"\n```\n\n#### m.utils.timeDelegate(layer, clock24)\nThis sets up a reoccuring task at the top of every minute to update whatever layer passed to the current time. If `clock24` is set to `true`, it'll return 24-hour clock values. If set to `false` or omitted, it'll return 12-hour clock values.\n\n#### m.utils.timeFormatter(timeObj, clock24)\nThis will create a time string for screen display. It'll return a hours-minutes string based on the `clock24` object.\n\n#### m.utils.color(colorString)\nThis changes the color words to be set to m default colors in place of web color defaults. If it's a hexcode, it'll set the hexcode. If invalid, it'll return a grey hexcode.\n\nSupports - `red, blue, pink, grey/gray, black, white, orange, green, light blue/light-blue, yellow`\n\n```coffeescript\nm.utils.color(\"light-blue) # returns \"#54C7FC\"\n```\n\n#### m.utils.autoColor(colorObject)\nThis will decide whether to return black or white based on the contrast of the color passed through the color object. So an easy example would be: if you pass white it'll return black. If you pass black, it'll return white. It'll work with any color.\n\n```coffeescript\nm.utils.autoColor(m.utils.color(\"yellow\")) # returns \"#000\"\nm.utils.autoColor(m.utils.color(\"blue\")) # returns \"#FFF\"\n```\n\n#### m.utils.bgBlur(layer)\nAdd background blur to any layer using `-webkit-backdrop-filter`. Make sure that whatever layer you use is using `rgba` with an alpha set below `1`.\n\n## How to contribute\nContributions are welcome! If you'd like to add any new components/any new logic, please follow the guidelines below:\n\n### For components\nIf you'd like to add a component, please start a new coffee file, unless it's a directly related to another component similar to `Tab` and `TabBar`. Please use this boilerplate to help make the components consistent.\n\n```coffeescript\n## Allows you to use all the Material Kit components and logic\nm = require 'material-kit'\n\nexports.defaults = {\n\t## Add any thing a user can set in here. For example:\n\t\tbackgroundColor: \"blue\"\n\t\t}\n\n##Creates a property list\nexports.defaults.props = Object.keys(exports.defaults)\n\nexports.create = (array) -\u003e\n\t## Creates a setup object that has defaults + any custom props.\n\tsetup = m.utils.setupComponent(array, exports.defaults)\n\n\tprint setup.backgroundColor ## prints blue\n```\n\n### For logic\nPlease add any layout logic to the layout file. Otherwise, please add the logic to `material-kit-utils.coffee`.\n\n### For data\nPlease add any referencable data object to `material-kit-library.coffee`. You can either reference it with `m.library[\"object\"]` or with `m.assets[\"object\"]`. Whatever works best for you.\n\n### For help\nFeel free to hit me up on [Twitter](https://twitter.com/kvyn_).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk-vyn%2Fframer-material-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk-vyn%2Fframer-material-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk-vyn%2Fframer-material-kit/lists"}