Giter Club home page Giter Club logo

material's Introduction

Material

Material

Welcome to Material, a UI/UX framework for creating beautiful applications. Material's animation system has been completely reworked to take advantage of Motion, a library dedicated to animations and transitions.

Carthage compatible Accio supported Version License Xcode 8.2+ iOS 8.0+ Swift 4.0+ Donate

Photos Sample

Take a look at a sample Photos project to get started.

Photos

Sample Projects

Take a look at Sample Projects to get your projects started.

Features

  • Completely Customizable
  • Motion Animations & Transitions
  • Layout Tools for AutoLayout & Grid Systems
  • Color Library
  • Cards
  • FABMenu
  • Icons
  • TextField
  • Snackbar
  • Tabs
  • Chips
  • SearchBar
  • NavigationController
  • NavigationDrawer
  • BottomNavigationBar
  • Sample Projects
  • And More...

Requirements

  • iOS 8.0+
  • Xcode 8.0+

Communication

  • If you need help, use Stack Overflow. (Tag 'cosmicmind')
  • If you'd like to ask a general question, use Stack Overflow.
  • If you found a bug, and can provide steps to reliably reproduce it, open an issue.
  • If you have a feature request, open an issue.
  • If you want to contribute, submit a pull request.

Installation

Embedded frameworks require a minimum deployment target of iOS 8+.

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. You can install it with the following command:

$ gem install cocoapods

To integrate Material's core features into your Xcode project using CocoaPods, specify it in your Podfile:

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

pod 'Material', '~> 3.1.0'

Then, run the following command:

$ pod install

Carthage

Carthage is a decentralized dependency manager that builds your dependencies and provides you with binary frameworks.

You can install Carthage with Homebrew using the following command:

$ brew update
$ brew install carthage

To integrate Material into your Xcode project using Carthage, specify it in your Cartfile:

github "CosmicMind/Material"

Run carthage update to build the framework and drag the built Material.framework into your Xcode project.

Change Log

Material is a growing project and will encounter changes throughout its development. It is recommended that the Change Log be reviewed prior to updating versions.

Icons

Icons is a library of Google and CosmicMind icons that are available for use within your iOS applications.

Icon

Learn More

Colors

Try the Material Colors app to see the wonderful colors available in Material, or use the online version at MaterialColor.com.

MaterialColors

TextField

A TextField is an excellent way to improve UX. It allows for a placeholder and additional hint details.

TextField

Button

A button is used to trigger an action through a touch event. Material comes with a foundational button, and 4 specialized buttons that can be stylized in any way.

Material Image

Switch

A switch is a control component that toggles between on and off states.

Material Image

Card

A Card is a flexible component that may be configured in any way you like. It has a Toolbar, Bar, and content area that may utilize any UIView type.

Material Image

ImageCard

An ImageCard is an expansion of the base Card. The Toolbar overlays an image area that sits above the dynamic content area.

Image Card Sample

PresenterCard

The PresenterCard is a completely new card style. It allows for a primary presentation area that may be any UIView type in addition to the content area, Toolbar, and Bar components. The options for this card are endless.

Presenter Card Sample

FABMenu

A FABMenu manages a collection of views. A new MenuItem type has been added that manages a title and button to improve UX and visual beauty.

Material Image

Toolbar

Toolbars are super flexible and add excellent control to your navigation flow. They manage a set of left and right views with auto aligning title and detail labels.

Material Image

SearchBar

A SearchBar is a powerful navigation tool that allows for user's input with an instant visual response. A set of left and right views may be added to expand functionality.

SearchBarController

Tabs

Tabs is a new component that links a customizable TabBar to a stack of view controllers making a powerful and visually pleasing component to have in any application.

Tabs

NavigationController

A NavigationController is a specialized view controller that manages a hierarchy of content efficiently, making it easier for users to move within an application.

Material Image

NavigationDrawer

A NavigationDrawer slides in from the left or right and contains the navigation destinations for your application.

Material Image

Snackbar

A Snackbar is a new component that is very simple in its behavior and very powerful in its message. It can be used application wide, or isolated to specific view controllers.

Material Image

Sticker Sheet

To help template your project, checkout Material Sticker Sheet.

MaterialStickerSheet

Much More...

So much more inside. Enjoy!

License

The MIT License (MIT)

Copyright (C) 2019, CosmicMind, Inc. http://cosmicmind.com. All rights reserved.

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

material's People

Contributors

adam88labs avatar adamdahan avatar ahusseini avatar confusedvorlon avatar danieldahan avatar ed-mejia avatar gilthonweapps avatar hu55a1n1 avatar intoxicated avatar jeehut avatar markst avatar michalrentka avatar mjgaylord avatar mjurenka avatar mohpor avatar multinerd avatar mumensh avatar nhnam avatar ninjaishere avatar orkhanalikhanov avatar phlippieb avatar prateeksan avatar ramonvic avatar rockwotj avatar seubseub avatar shoheiyokoyama avatar slxl avatar stevemoser avatar vivi7 avatar xrayman 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

material's Issues

Unable to simultaneously satisfy constraints.

screen shot 2015-09-19 at 9 22 41 am

I have attached image of my storyboard and it is empty i have commented out most of my code to only show the MK Card

When i add this code to the MK Card I get constraint issues
//material Kit Card
card.detailLabel = UILabel()
card.detailLabel?.textAlignment = .Center
card.detailLabel?.font = UIFont(name:"Arial", size: 45)
view.backgroundColor = MaterialTheme.grey.darken1

(when i remove the line of code above this issue is gone, could it be the size of the font?)

2015-09-19 09:26:09.075 RapWordGenerator[42757:9240231] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
"<NSLayoutConstraint:0x7f8b8c08e980 V:|-(8)-[UILabel:0x7f8b8c08a4f0] (Names: '|':UIView:0x7f8b8c08c1f0 )>",
"<NSLayoutConstraint:0x7f8b8c08ea00 V:[UILabel:0x7f8b8c08a4f0(<=144)]>",
"<NSLayoutConstraint:0x7f8b8c08ea80 V:[UILabel:0x7f8b8c08a4f0]-(8)-| (Names: '|':UIView:0x7f8b8c08c1f0 )>",
"<NSLayoutConstraint:0x7f8b8c08e860 V:|-(0)-[UIView:0x7f8b8c08c1f0] (Names: '|':MaterialKit.BasicCard:0x7f8b8af1ff10 )>",
"<NSLayoutConstraint:0x7f8b8c08e0d0 V:[UIView:0x7f8b8c08c1f0]-(0)-| (Names: '|':MaterialKit.BasicCard:0x7f8b8af1ff10 )>",
"<NSLayoutConstraint:0x7f8b8c098310 V:[MaterialKit.BasicCard:0x7f8b8af1ff10(310)]>"
)

Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x7f8b8c08ea80 V:[UILabel:0x7f8b8c08a4f0]-(8)-| (Names: '|':UIView:0x7f8b8c08c1f0 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKit/UIView.h> may also be helpful.

Turn off Pulse

Is there a way to turn off pulsation so that there is only the appearance that the button is being lifted / raised?

I've tried button.pulseColor = UIColor.clearColor() but that doesn't have the desired effect (there is still a dark pulse)

Question: Card padding

I would like to add more padding around the title and description labels. How would I go about this?

Add SideNav

This should work as a container class. The initial implementation will support a left side nav view controller.

Multiple line titleLabel

I would like the option to enable multi-line titles. Something like this:

card.titleLabel!.lineBreakMode = NSLineBreakMode.ByWordWrapping
card.titleLabel!.numberOfLines = 0

could allow the title to be multi-line with the card resizing appropriately.

Thank you for the amazing library!

.GIF Support

Hey, it's me again.. Looking to support animated gif's in ImageCardView. Any thoughts?

lldb in MaterialButton

Bug in MaterialButton in this block:

private func prepareBackgroundColorView() {
        backgroundColorView.translatesAutoresizingMaskIntoConstraints = false
        backgroundColorView.layer.masksToBounds = true
        backgroundColorView.clipsToBounds = true
        backgroundColorView.userInteractionEnabled = false
        insertSubview(backgroundColorView, atIndex: 0)
        Layout.expandToParent(self, child: backgroundColorView)
    }

Where the insertSubview line fails with lldb

Old style of image card

Hello! I just got an update approved today with Swift 2 and MK so great work all around :)

Just curious about what happened to the old style of image card? I would like to have that style with the image above, title overlaid, and card content+buttons below.

Thanks!

Image card of varying size

Is it possible for the ImageCardView to change the size of its image view to the width-height ratio of the UIImage being loaded into it?

Support for tap image closure

Hi all,

I'd like the ability to provide a block that will run when the image in an ImageCardView is tapped:

card.tapImageBlock = {()
in
    // Do something here
}

Any thoughts?

P.S. I want to use this to open a lightbox with that image, if there is a way I can accomplish this now, please let me know.

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.