HyperSwift - a HTML and CSS Generator
About
HyperSwift (name pending) is a DSL written purely in Swift aimed to generate HTML styled with CSS.
Main Features
- Vertical and Horizontal stack wrappers
- Native HTML Elements
- CSS Stylesheet generation
Code Snippits
505 Page from garrepi.dev:
import HyperSwift
VStack(justify: .center, align: .center) {
HStack(justify: .spaceEvenly, align: .center) {
Image(url: "/images/error_bomb.png")
.width(100)
.height(100)
Header(.header3) { "HTTP 500" }
.font(weight: "bold", size: 40, family: "SF Mono")
}
Paragraph(fiveOfiveMessage)
}
.backgroundColor(GColors.lightRed)
.textAlign(.center)
.margin(5, .percent)
.display(.flex)
.shadow(x: 20, y: 30, color: GColors.cardShadow)
.border(width: 1, color: .black)
CSS
To add CSS to the stylesheet, you have to call one of the functions defined in CSSExtensions.swift.
If an element has a class name, the styles will automatically be added to CSSStyleSheet.swift's stylesheet.
Calling .generateStyleSheet() on CSSStyleSheet.swift will return a string containing the stylesheet.
Examples
HyperSwift is being used on garrepi.dev as we speak! Checkout the source code here.
Usage
in your Package.swift:
. . .
.package(url: "https://github.com/johngarrett/HyperSwift", .branch("main")),
. . .Contributing
I would love help with this -- there's a lot that needs to get done.
I have little free time and an even little-er ability to focus on one project. Feel free to send in a PR with ideas, suggestions, or actual code!
reach out to me on twitter if you have questions I can answer