Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/artemnovichkov/zepcode
⚗️ Zeplin extension that generates Swift snippets from colors, fonts, and layers
https://github.com/artemnovichkov/zepcode
extension swift zeplin zeplin-extension
Last synced: 2 months ago
JSON representation
⚗️ Zeplin extension that generates Swift snippets from colors, fonts, and layers
- Host: GitHub
- URL: https://github.com/artemnovichkov/zepcode
- Owner: artemnovichkov
- License: mit
- Created: 2018-02-22T17:33:11.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T23:34:08.000Z (about 2 years ago)
- Last Synced: 2024-10-24T16:50:02.362Z (3 months ago)
- Topics: extension, swift, zeplin, zeplin-extension
- Language: JavaScript
- Homepage: https://extensions.zeplin.io/artem_novichkov/zepcode
- Size: 1.83 MB
- Stars: 80
- Watchers: 8
- Forks: 12
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
[Zeplin extension](https://extensions.zeplin.io/) that generates Swift snippets from colors, fonts and layers.
## Features
- 🖍 Color pallette for iOS
Example
```swift
import UIKit
extension UIColor {
static let electricBlue = UIColor(red: 0/255, green: 86/255, blue: 255/255, alpha: 1)
}
```
Example with custom initializer
```swift
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
```swift
import UIKit
extension UIColor {
static let electricBlue = #colorLiteral(red: 0, green: 0.337254902, blue: 1, alpha: 1)
}
```
- ✏️ Fonts for iOS
Example
```swift
import UIKit
extension UIFont {
static func BloggerSansBold(ofSize: CGFloat) -> UIFont {
return UIFont(name: "BloggerSans-Bold", size: size)!
}
}
```
- 🚧 Snippets for borders and corner radius
Example
```swift
view.layer.borderWidth = 4
view.layer.borderColor = UIColor.white.cgColor
view.layer.cornerRadius = 40
```
- 🌚 Snippets for shadows
Example
```swift
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](https://github.com/artemnovichkov/zepcode/issues/1#issuecomment-370118449).
Radial gradient example
```swift
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..
## 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.
```swift
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](https://extensions.zeplin.io).
## How to make a changes
First, you need last stable Node.js `^8.9.4`. Follow this [guide](https://github.com/creationix/nvm/blob/master/README.md#installation) if you don't have any.
Next, install project dependencies:
```bash
npm i
```
To start developing, to make a build or to execute some functions from extension follow this [guide](https://github.com/zeplin/zem#scripts).
To learn more about zem, [see documentation](https://github.com/zeplin/zem).
If you like to take full control of your build process you can try [zero](https://github.com/baybara-pavel/zero) boilerplate.
## Authors
Artem Novichkov, [email protected] [](https://www.codementor.io/artemnovichkov?utm_source=github&utm_medium=button&utm_term=artemnovichkov&utm_campaign=github)
Baybara Pavel, [email protected]
## License
Zepcode is available under the MIT license. See the LICENSE file for more info.