Skip to content

⚗️ Zeplin extension that generates Swift snippets from colors, fonts, and layers

License

Notifications You must be signed in to change notification settings

artemnovichkov/zepcode

Repository files navigation

Zeplin Extension Build Status

Zeplin extension that generates Swift snippets from colors, fonts and layers.

Features

  • 🖍 Color pallette for iOS

    Example
    import UIKit
    
    extension UIColor {
    
        static let electricBlue = UIColor(red: 0/255, green: 86/255, blue: 255/255, alpha: 1)
    }
    Example with custom initializer
    import UIKit
    
    extension UIColor {
    
        convenience init(r red: Int, g green: Int, b blue: Int, a: CGFloat = 1) { // swiftlint:disable:this identifier_name
            self.init(red: CGFloat(red) / 255, 
                      green: CGFloat(green) / 255, 
                      blue: CGFloat(blue) / 255, 
                      alpha: a)
        }
    
        static let electricBlue = UIColor(r: 0, g: 86, b: 255)
    }
    Example with color literals
    import UIKit
    
    extension UIColor {
    
        static let electricBlue = #colorLiteral(red: 0, green: 0.337254902, blue: 1, alpha: 1)
    }
  • ✏️ Fonts for iOS

    Example
    import UIKit
    
    extension UIFont {
    
        static func BloggerSansBold(ofSize: CGFloat) -> UIFont {
            return UIFont(name: "BloggerSans-Bold", size: size)!
        }
    }
  • 🚧 Snippets for borders and corner radius

    Example
    view.layer.borderWidth = 4
    view.layer.borderColor = UIColor.white.cgColor
    view.layer.cornerRadius = 40
  • 🌚 Snippets for shadows

    Example
    view.layer.shadowColor = UIColor(r: 0, g: 0, b: 0, a: 0.5).cgColor
    view.layer.shadowOpacity = 1
    view.layer.shadowOffset = CGSize(width: 0, height: 2)
    view.layer.shadowRadius = 4 / 2
    let rect = view.bounds.insetBy(dx: -2, dy: -2)
    view.layer.shadowPath = UIBezierPath(rect: rect).cgPath
  • 🎨 Gradients (Work in progress)

    Linear gradient example

    Check out LinearGradientPlayground and read explanation of the implementation here.

    Radial gradient example
    final class RadialGradientView: UIView {
    
        private var radius: CGFloat {
            return min(bounds.width / 2, bounds.height / 2)
        }
    
        private let colors = [UIColor.red.cgColor, UIColor.neonGreen.cgColor]
    
        var options: CGGradientDrawingOptions = CGGradientDrawingOptions(rawValue: 0)
    
        // MARK: - Lifecycle
    
        override init(frame: CGRect) {
            super.init(frame: frame)
            clipsToBounds = true
        }
    
        required init?(coder aDecoder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    
        override func layoutSubviews() {
            super.layoutSubviews()
            layer.cornerRadius = radius
        }
    
        override func draw(_ rect: CGRect) {
            let context = UIGraphicsGetCurrentContext()
    
            let colorSpace = CGColorSpaceCreateDeviceRGB()
            let colorsCount = colors.count
            var locations = (0..<colorsCount).map { i in
                return CGFloat(i) / CGFloat(colorsCount)
            }
    
            guard let gradient = CGGradient(colorsSpace: colorSpace, colors: colors as CFArray, locations: locations) else {
                return
            }
    
            context?.drawRadialGradient(gradient,
                                       startCenter: center,
                                       startRadius: 0,
                                       endCenter: center,
                                       endRadius: radius,
                                       options: options)
            }
    }

Options

Use color names

Use color names from Color Palette or default UIColor(red:green:blue:alpha:) initializers.

Initializer style

  • Default — Use the default UIColor(red:green:blue:alpha:) initializer.
  • Custom — Use UIColor(r:g:b:a:) initializer.
  • Literal — Use color literals #colorLiteral(red:green:blue:alpha:) that will appear in Xcode as a colored rect that presents a color picker.

Use layer extension for shadows

Use a function below for shadow parameters. Don't forget to add this extension to your project.

import UIKit

extension CALayer {

    func makeShadow(color: UIColor,
                    x: CGFloat = 0,
                    y: CGFloat = 0,
                    blur: CGFloat = 0,
                    spread: CGFloat = 0) {
        shadowColor = color.cgColor
        shadowOpacity = 1
        shadowOffset = CGSize(width: x, height: y)
        shadowRadius = blur / 2
        if spread == 0 {
            shadowPath = nil
        }
        else {
            let rect = bounds.insetBy(dx: -spread, dy: -spread)
            shadowPath = UIBezierPath(rect: rect).cgPath
        }
    }
}

How to Install

Zepcode is available on Zeplin Extensions.

How to make a changes

First, you need last stable Node.js ^8.9.4. Follow this guide if you don't have any.

Next, install project dependencies:

npm i

To start developing, to make a build or to execute some functions from extension follow this guide.

To learn more about zem, see documentation.

If you like to take full control of your build process you can try zero boilerplate.

Authors

Artem Novichkov, novichkoff93@gmail.com Get help on Codementor

Baybara Pavel, baybara.pavel@gmail.com

License

Zepcode is available under the MIT license. See the LICENSE file for more info.