Popularity
1.0
Declining
Activity
3.7
-
81
7
11

Programming language: JavaScript
Tags: Editors     JavaScript     Webpack     Zeplin     Zeplin-extension    
Latest version: v0.8.0

Zepcode alternatives and similar libraries

Based on the "Editors" category

Do you think we are missing an alternative of Zepcode or a related project?

Add another 'Editors' Library

README

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](.github/LinearGradientPlayground.playground) 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](.github/CALayer+Shadow.swift) 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](extensions.zeplin.io).

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.


*Note that all licence references and agreements mentioned in the Zepcode README section above are relevant to that project's source code only.