Documentation

Table of Contents

  1. Overview
  2. Download
  3. Installation
  4. Usage
  5. Customization
    1. Color Variables
    2. Mock Data
    3. Components
    4. Modifiers
  6. Dependencies
  7. Changelog

Overview

This section of the documentation describes all the components from iOS Elements based on Sketch Elements. Please take some time and explore all of the components. The following is the list of screens provided by this template.

  • Food
  • Music
  • Photography
  • Social
  • Travel

Download

You can download the project from ioselements.com

Installation

After downloading the files just un-zip it and open in the Xcode. From the welcome window select “open existing project”.

After opening the project make sure to configure all the setting as is the bundle identifier and the signing tab as you are used to.

Usage

Best way to use this project is to create your custom folder in the project root e.g. “MyApp”and start creating your screens here. To start I will just copy paste content from Travel.swift to demonstrate it.

Then in ContentView.swift delete or comment out all the unnecessary lines of code you don’t want to use (there is navigation between example screens). Here is the minimal example of this file without unnecessary code.

Now you should be able to run your project. You are now ready to create your own app with components a and screens provided.

Customization

Customization can be done by defining the Theme in ContentView.swift as follow

@State var selectedTheme = Theme.food

Or through the color variables, icons and components used across the projects. You can edit it directly as it is best way how to use this project.

Color Variables

All color variables are located in ColorPalette.xcassets and the defaults are:

  • BrandPrimary
  • Contras
  • Default
  • Gray
  • SocialPrimary
  • Transparent
  • TravelPrimary

These colors come in 3 variations for Any Appearance, Light Appearance and Dark Appearance. All the colors are then defined in Models/Constants.swift file. Usage is then as easy as

var tintColor: Color = Constant.color.travelPrimary

Mock Data

Mock data are loaded to the app through Models/Data.swift, where they are parsed to the models defined in Models folder.

For example Recipes.json


   {
     "id": "hummus",
     "title": "Hummus",
     "category": "vegetarian",
     "people": 6,
     "minutes": 10,
     "picture": {
       "uri": "https://firebasestorage.googleapis.com/v0/b/react-native-e.appspot.com/o/hummus.jpeg?alt=media&token=86b00866-3989-492e-9206-9127bbd9745d",
       "preview": "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAYABgAAD/4QCMRXhpZgAATU0AKgAAAAgABQESAAMAAAABAAEAAAEaAAUAAAABAAA…”.
     },
     "instructions": [
       "In the bowl of a food processor, combine the tahini and lemon juice and process for 1 minute.",
       "Add the olive oil, minced garlic, cumin, and a 1/2 teaspoon of salt to the whipped tahini and lemon juice. Process for 30 seconds, scrape the sides and bottom of the bowl then process another 30 seconds or until well blended.",
       "Add half of the chickpeas to the food processor and process for 1 minute. Scrape sides and bottom of the bowl, then add remaining chickpeas and process until thick and quite smooth; 1 to 2 minutes."
     ],
     "ingredients": [
       {
         "checked": true,
         "name": "Chickpeas",
         "quantity": "15 ounces"
       },
       {
         "checked": true,
         "name": "Fresh lemon",
         "quantity": "1"
       },
       {
         "checked": false,
         "name": "Well-stirred tahini",
         "quantity": "¼ cup"
       }
     ]
   }

Is parsed as Recipe model defined in Recipe.swift


struct Recipe: Hashable, Codable, Identifiable {
    var id: String
    var title: String
    var people: Int
    var minutes: Int
    var instructions: [String]
    var ingredients: [Ingredient]
    var picture: Picture
    var category: String
}

struct Category: Hashable, Codable, Identifiable {
    var id: String
    var title: String
    var subtitle: String
    var picture: Picture
}

struct Ingredient: Hashable, Codable, Identifiable {
    var id: String {name}
    var checked: Bool
    var name: String
    var quantity: String
}

struct Instruction: Hashable, Codable, Identifiable {
    var description: String
    var id: String {description}
}

For other data it is similar. Her is list of other data used for mocks.

  • recipes
  • restaurants
  • recipeCategories
  • stories
  • conversations
  • posts
  • users
  • guides
  • cities

Components

All reusable components are located in Elements folder. Usage is similar across all the components and can be seen in preview for each component. E.g. Stars Component is defined in Elements/Stars.swift and is structure is as follow:


struct Stars: View {

    // implementation

}

// usage example
struct Stars_Previews: PreviewProvider {
    static var previews: some View {
        Stars(4, label: "167 reviews", color: Color("TravelPrimary"))
    }
}

Here is the list of all reusable components.

  • Modal
  • Card
  • Header
  • Button
  • Table
  • Stars
  • Segmented Picker
  • Collapsable Picker
  • SegmentedPickerCollapsed
  • Count Picker
  • Profile
  • VenuesList

Modifiers

Modifiers can be used through extension API defined in Elements/ViewExtensions.swift. For TabBarModifier it is:



TabView() {
        Text(“Tab 1”)
    }
        .tabBarOpaque()

There are 3 modifiers that can be used across the project.

  • NavigationBarModifier
  • TabBarModifier
  • SizeAwareViewModifier

Dependencies

Whole project using only modern Swift Page Manager and is not dependent on any other managers as is CocoaPods etc. These Swift packages are managed from Project view in Swift Packages tab.  Below is a list of all dependencies used by iOS Elements.

URLImage 0.9.10

URLImage is a SwiftUI view that displays an image downloaded from provided URL. URLImage manages downloading remote image and caching it locally, both in memory and on disk, for you.

Changelog

1.0.0 (35f3a910 6th January 2021)

  • Initial Release of iOS Elements

License

The Prosperity Public License 3.0.0

Purpose

This license allows you to use and share this software for noncommercial purposes for free and to try this software for commercial purposes for thirty days.

Agreement

In order to receive this license, you have to agree to its rules. Those rules are both obligations under that agreement and conditions to your license. Don't do anything with this software that triggers a rule you can't or won't follow.

Notices

Make sure everyone who gets a copy of any part of this software from you, with or without changes, also gets the text of this license and the contributor and source code lines above.

Commercial Trial

Limit your use of this software for commercial purposes to a thirty-day trial period. If you use this software for work, your company gets one trial period for all personnel, not one trial per person.

Contributions Back

Developing feedback, changes, or additions that you contribute back to the contributor on the terms of a standardized public software license such as the Blue Oak Model License 1.0.0, the Apache License 2.0, the MIT license, or the two-clause BSD license doesn't count as use for a commercial purpose.

Personal Uses

Personal use for research, experiment, and testing for the benefit of public knowledge, personal study, private entertainment, hobby projects, amateur pursuits, or religious observance, without any anticipated commercial application, doesn't count as use for a commercial purpose.

Noncommercial Organizations

Use by any charitable organization, educational institution, public research organization, public safety or health organization, environmental protection organization, or government institution doesn't count as use for a commercial purpose regardless of the source of funding or obligations resulting from the funding.

Defense

Don't make any legal claim against anyone accusing this software, with or without changes, alone or with other technology, of infringing any patent.

The contributor licenses you to do everything with this software that would otherwise infringe their copyright in it.

Patent

The contributor licenses you to do everything with this software that would otherwise infringe any patents they can license or become able to license.

Reliability

The contributor can't revoke this license.

No Liability

As far as the law allows, this software comes as is, without any warranty or condition, and the contributor won't be liable to anyone for any damages related to this software or this license, under any kind of legal claim.

Help

Even with the great documentation, you're likely to get stuck at some point. If you've encountered a bug with iOS Elements, please post an issue and one of our maintainers will happily reach out to you. No question's too silly to ask but we recommend checking the documentation and existing issues before opening and a new one.