MaterialKit

Build Beautiful Software

• CocoaPods (MK)

CocoaPods Support

MaterialKit is now on CocoaPods under the name MK.

Floating Action Button

Make a call to action with a Floating Action Button.

var button: FabButton = FabButton()
button.setTitle("+", forState: .Normal)
button.titleLabel!.font = UIFont(name: "Arial", size: 32)
view.addSubview(button)

Layout.size(view, child: button, width: 60, height: 60)

Raised Button

Use a Raised Button to capture attention.

var button: RaisedButton = RaisedButton()
button.setTitle("Raised", forState: .Normal)
view.addSubview(button)

Layout.size(view, child: button, width: 200, height: 60)

Flat Button

Keep it simple and elegant with a Flat Button.

var button: RaisedButton = RaisedButton()
button.setTitle("Flat", forState: .Normal)
view.addSubview(button)

Layout.size(view, child: button, width: 200, height: 60)

Basic Card

Easily make cards with fully customizable components.

var card: BasicCard = BasicCard()

// add a title
card.titleLabel = UILabel()
card.titleLabel!.text = "Card Title"

// add a body of text
card.detailTextLabel = UILabel()
card.detailTextLabel!.text = "I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively."

// add a divider for buttons
card.divider = UIView()

// add a couple buttons
var cancelButton: FlatButton = FlatButton()
cancelButton.pulseColor = MaterialTheme.blueGrey.darken3
cancelButton.setTitle("Cancel", forState: .Normal)
cancelButton.setTitleColor(MaterialTheme.yellow.darken3, forState: .Normal)

var okButton: FlatButton = FlatButton()
okButton.pulseColor = MaterialTheme.blueGrey.darken3
okButton.setTitle("Okay", forState: .Normal)
okButton.setTitleColor(MaterialTheme.yellow.darken3, forState: .Normal)

card.buttons = [cancelButton, okButton]

view.addSubview(card)

view.addConstraints(Layout.constraint("H:|-(pad)-[child]-(pad)-|", options: nil, metrics: ["pad": 20], views: ["child": card]))
view.addConstraints(Layout.constraint("V:|-(pad)-[child]", options: nil, metrics: ["pad": 100], views: ["child": card]))

Image Card

Add photos with an Image Card.

var card: ImageCard = ImageCard()
card.imageView = UIImageView(image: UIImage(named: "photo.jpg"))
view.addSubview(card)

Layout.size(view, child: card, width: 300, height: 175)

Full Image Card

Allow the Image Card to really shine by adding a title, some details, and buttons.

var card: ImageCard = ImageCard()
card.imageView = UIImageView(image: UIImage(named: "photo.jpg"))

// add a title
card.titleLabel = UILabel()
card.titleLabel!.text = "Card Title"

// add a body of text
card.detailTextLabel = UILabel()
card.detailTextLabel!.text = "I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively."

// add a divider for buttons
card.divider = UIView()

// add a couple buttons
var cancelButton: FlatButton = FlatButton()
cancelButton.pulseColor = MaterialTheme.blueGrey.darken3
cancelButton.setTitle("Cancel", forState: .Normal)
cancelButton.setTitleColor(MaterialTheme.yellow.darken3, forState: .Normal)

var okButton: FlatButton = FlatButton()
okButton.pulseColor = MaterialTheme.blueGrey.darken3
okButton.setTitle("Okay", forState: .Normal)
okButton.setTitleColor(MaterialTheme.yellow.darken3, forState: .Normal)

card.buttons = [cancelButton, okButton]

view.addSubview(card)

view.addConstraints(Layout.constraint("H:|-(pad)-[child]-(pad)-|", options: nil, metrics: ["pad": 20], views: ["child": card]))
view.addConstraints(Layout.constraint("V:|-(pad)-[child]", options: nil, metrics: ["pad": 100], views: ["child": card]))

Side Navigation

Add a sleek Side Navigation to give your users a wonderful experience.

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
	sideNav = SideNavController(mainViewController: MainViewController(), leftViewController: LeftViewController(), rightViewController: RightViewController())
	sideNav!.delegate = self
	window = UIWindow(frame: UIScreen.mainScreen().bounds)
	window!.rootViewController = sideNav
	window!.makeKeyAndVisible()
	return true
}

Material Themes

Beautify your app with color. All Material Design color palettes are supported.

Color Palettes

var button: RaisedButton = RaisedButton()
button.setTitle("Raised", forState: .Normal)
button.setTitleColor(MaterialTheme.blue.darken3, forState: .Normal)
button.backgroundColor = MaterialTheme.yellow.darken3
button.pulseColor = MaterialTheme.blueGrey.color

License

AGPLv3

Contributors

• Daniel Dahan
• Adam Dahan
• Michael Reyder