Skip to content

A baseline view over the application to help verify alignments

License

Notifications You must be signed in to change notification settings

HelioMesquita/TicTacToe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

55 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Objective-c Cocoapods License

This library inserts on your application a baseline grid.

Getting Started

Example of usage on Swiftmazing app

This tool adds the baseline grid over the application, thus allowing you to browse the entire app and verify that the alignment is following the requirements. There are two options of baseline - 4 and 8 size

Motivation

After several problems in ensuring the alignment and baselines established in the project requirement. This tool was developed, together with the design/ux team, to facilitate and ensure that visual elements follow the established baselines.

Prerequisites

This library was developed thinking about compatibility with any project version, so it was developed using objective-c. The iOS compatibility +9.0

Installing

CocoaPods

CocoaPods is a dependency manager for Cocoa projects. For usage and installation instructions, visit their website. Insert in your Podfile:

use_frameworks!

target "YourProject" do
  pod 'TicTacToe'
end

then

pod install

How To Use

Using only AppDelegate

On AppDelegate.swift

import UIKit
#if DEBUG
import TicTacToe
#endif

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    #if DEBUG
    TicTacToePreferences.shared().show()
    #endif
    return true
  }

}

AppDelegate and SceneDelegate

On SceneDelegate.swift

import UIKit
#if DEBUG
import TicTacToe
#endif

class SceneDelegate: UIResponder, UIWindowSceneDelegate {

    (...)

    func sceneDidBecomeActive(_ scene: UIScene) {
        #if DEBUG
        TicTacToePreferences.shared().isUsingScenePattern = true
        TicTacToePreferences.shared().show()
        #endif
    }

Using the Grid

It is possible to observe that there are two areas highlighted in the Debug View Hierachy mode, when these areas are called at the same time they trigger the action to activate or change the way that the baseline is appearing on the screen.

On Simulator

Hold down the Option key, which makes two circles appear that, just tap that area :)

Debug mode Two taps

Authors

License

This project is licensed under the MIT License - see the LICENSE.md file for details

About

A baseline view over the application to help verify alignments

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published