├── README.md ├── SwiftUI-Bento-Box.xcodeproj ├── project.pbxproj ├── project.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ └── IDEWorkspaceChecks.plist └── xcuserdata │ └── rklumph.xcuserdatad │ └── xcschemes │ └── xcschememanagement.plist ├── SwiftUI-Bento-Box ├── Assets.xcassets │ ├── AccentColor.colorset │ │ └── Contents.json │ ├── AppIcon.appiconset │ │ └── Contents.json │ ├── Contents.json │ └── iphone.imageset │ │ ├── Contents.json │ │ └── harmony-iphone2.png ├── Preview Content │ └── Preview Assets.xcassets │ │ └── Contents.json ├── SwiftUI_Bento_BoxApp.swift ├── Utilities │ └── ForegroundGradient.swift └── Views │ ├── A1Box.swift │ ├── A2Box.swift │ ├── B1Box.swift │ ├── B2Box.swift │ ├── B3Box.swift │ ├── C1Box.swift │ ├── C2Box.swift │ ├── C3Box.swift │ ├── C4Box.swift │ ├── C5Box.swift │ ├── CenterImage.swift │ └── ContentView.swift ├── hellothere-23-bento-rounded.png ├── template.png └── views.png /README.md: -------------------------------------------------------------------------------- 1 | # SwiftUI Bento Box 2 | Buy Me A Coffee 3 | 4 | 5 | #### Create your own SwiftUI Bento Box in Xcode to market your app's features! 6 | 7 | ![Image](hellothere-23-bento-rounded.png) 8 | 9 | Note: This project is now being developed as a fully interactive iPad App called [Bento|Craft](https://thatvirtualboy.com/bentocraft), free on the App Store. 10 | 11 | --- 12 | 13 | I originally created this project for [Hello There](https://apple.co/3TWTeey) so I could mimc Apple's gorgeous bento-style feature summaries. After it came together, I thought it would be fun to share it with the iOS Developer community. 14 | 15 | ## A Few Notes 16 | • Works best with a landscape iPad Pro preview 17 | • I've set up the project to be in 3 columns: A, B, and C. Views correspond to their relative placements in preview 18 | • The template uses image placeholders -- you'll need to provide your own content 19 | • This project was created using Xcode 15 beta 6 20 | 21 | #### Each block is its own view 22 | ![Image](views.png) 23 | 24 | ![Image](template.png) 25 | 26 | Feel free to fork and play around with the layout. I'd love to see what you create! 27 | Ping me on Twitter: [@thatvirtualboy](https://twitter.com/thatvirtualboy) // Mastodon: [@thatvirtualboy](https://techhub.social/@thatvirtualboy) 28 | 29 | Buy Me A Coffee 30 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 56; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 692CE6382A8800FD008A2BAA /* SwiftUI_Bento_BoxApp.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE6372A8800FD008A2BAA /* SwiftUI_Bento_BoxApp.swift */; }; 11 | 692CE63C2A880101008A2BAA /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 692CE63B2A880101008A2BAA /* Assets.xcassets */; }; 12 | 692CE63F2A880101008A2BAA /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 692CE63E2A880101008A2BAA /* Preview Assets.xcassets */; }; 13 | 692CE6522A880135008A2BAA /* B2Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE6462A880135008A2BAA /* B2Box.swift */; }; 14 | 692CE6532A880135008A2BAA /* CenterImage.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE6472A880135008A2BAA /* CenterImage.swift */; }; 15 | 692CE6542A880135008A2BAA /* C4Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE6482A880135008A2BAA /* C4Box.swift */; }; 16 | 692CE6552A880135008A2BAA /* A1Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE6492A880135008A2BAA /* A1Box.swift */; }; 17 | 692CE6562A880135008A2BAA /* C1Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE64A2A880135008A2BAA /* C1Box.swift */; }; 18 | 692CE6572A880135008A2BAA /* A2Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE64B2A880135008A2BAA /* A2Box.swift */; }; 19 | 692CE6582A880135008A2BAA /* C5Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE64C2A880135008A2BAA /* C5Box.swift */; }; 20 | 692CE6592A880135008A2BAA /* C2Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE64D2A880135008A2BAA /* C2Box.swift */; }; 21 | 692CE65A2A880135008A2BAA /* B3Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE64E2A880135008A2BAA /* B3Box.swift */; }; 22 | 692CE65B2A880135008A2BAA /* B1Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE64F2A880135008A2BAA /* B1Box.swift */; }; 23 | 692CE65C2A880135008A2BAA /* ContentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE6502A880135008A2BAA /* ContentView.swift */; }; 24 | 692CE65D2A880135008A2BAA /* C3Box.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE6512A880135008A2BAA /* C3Box.swift */; }; 25 | 692CE6602A880210008A2BAA /* ForegroundGradient.swift in Sources */ = {isa = PBXBuildFile; fileRef = 692CE65F2A880210008A2BAA /* ForegroundGradient.swift */; }; 26 | /* End PBXBuildFile section */ 27 | 28 | /* Begin PBXFileReference section */ 29 | 692CE6342A8800FD008A2BAA /* SwiftUI-Bento-Box.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = "SwiftUI-Bento-Box.app"; sourceTree = BUILT_PRODUCTS_DIR; }; 30 | 692CE6372A8800FD008A2BAA /* SwiftUI_Bento_BoxApp.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SwiftUI_Bento_BoxApp.swift; sourceTree = ""; }; 31 | 692CE63B2A880101008A2BAA /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; 32 | 692CE63E2A880101008A2BAA /* Preview Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = "Preview Assets.xcassets"; sourceTree = ""; }; 33 | 692CE6462A880135008A2BAA /* B2Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = B2Box.swift; sourceTree = ""; }; 34 | 692CE6472A880135008A2BAA /* CenterImage.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = CenterImage.swift; sourceTree = ""; }; 35 | 692CE6482A880135008A2BAA /* C4Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = C4Box.swift; sourceTree = ""; }; 36 | 692CE6492A880135008A2BAA /* A1Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = A1Box.swift; sourceTree = ""; }; 37 | 692CE64A2A880135008A2BAA /* C1Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = C1Box.swift; sourceTree = ""; }; 38 | 692CE64B2A880135008A2BAA /* A2Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = A2Box.swift; sourceTree = ""; }; 39 | 692CE64C2A880135008A2BAA /* C5Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = C5Box.swift; sourceTree = ""; }; 40 | 692CE64D2A880135008A2BAA /* C2Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = C2Box.swift; sourceTree = ""; }; 41 | 692CE64E2A880135008A2BAA /* B3Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = B3Box.swift; sourceTree = ""; }; 42 | 692CE64F2A880135008A2BAA /* B1Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = B1Box.swift; sourceTree = ""; }; 43 | 692CE6502A880135008A2BAA /* ContentView.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = ContentView.swift; sourceTree = ""; }; 44 | 692CE6512A880135008A2BAA /* C3Box.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = C3Box.swift; sourceTree = ""; }; 45 | 692CE65F2A880210008A2BAA /* ForegroundGradient.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ForegroundGradient.swift; sourceTree = ""; }; 46 | /* End PBXFileReference section */ 47 | 48 | /* Begin PBXFrameworksBuildPhase section */ 49 | 692CE6312A8800FD008A2BAA /* Frameworks */ = { 50 | isa = PBXFrameworksBuildPhase; 51 | buildActionMask = 2147483647; 52 | files = ( 53 | ); 54 | runOnlyForDeploymentPostprocessing = 0; 55 | }; 56 | /* End PBXFrameworksBuildPhase section */ 57 | 58 | /* Begin PBXGroup section */ 59 | 692CE62B2A8800FD008A2BAA = { 60 | isa = PBXGroup; 61 | children = ( 62 | 692CE6362A8800FD008A2BAA /* SwiftUI-Bento-Box */, 63 | 692CE6352A8800FD008A2BAA /* Products */, 64 | ); 65 | sourceTree = ""; 66 | }; 67 | 692CE6352A8800FD008A2BAA /* Products */ = { 68 | isa = PBXGroup; 69 | children = ( 70 | 692CE6342A8800FD008A2BAA /* SwiftUI-Bento-Box.app */, 71 | ); 72 | name = Products; 73 | sourceTree = ""; 74 | }; 75 | 692CE6362A8800FD008A2BAA /* SwiftUI-Bento-Box */ = { 76 | isa = PBXGroup; 77 | children = ( 78 | 692CE6372A8800FD008A2BAA /* SwiftUI_Bento_BoxApp.swift */, 79 | 692CE65E2A8801FD008A2BAA /* Utilities */, 80 | 692CE6452A880124008A2BAA /* Views */, 81 | 692CE63B2A880101008A2BAA /* Assets.xcassets */, 82 | 692CE63D2A880101008A2BAA /* Preview Content */, 83 | ); 84 | path = "SwiftUI-Bento-Box"; 85 | sourceTree = ""; 86 | }; 87 | 692CE63D2A880101008A2BAA /* Preview Content */ = { 88 | isa = PBXGroup; 89 | children = ( 90 | 692CE63E2A880101008A2BAA /* Preview Assets.xcassets */, 91 | ); 92 | path = "Preview Content"; 93 | sourceTree = ""; 94 | }; 95 | 692CE6452A880124008A2BAA /* Views */ = { 96 | isa = PBXGroup; 97 | children = ( 98 | 692CE6502A880135008A2BAA /* ContentView.swift */, 99 | 692CE6492A880135008A2BAA /* A1Box.swift */, 100 | 692CE64B2A880135008A2BAA /* A2Box.swift */, 101 | 692CE64F2A880135008A2BAA /* B1Box.swift */, 102 | 692CE6462A880135008A2BAA /* B2Box.swift */, 103 | 692CE6472A880135008A2BAA /* CenterImage.swift */, 104 | 692CE64E2A880135008A2BAA /* B3Box.swift */, 105 | 692CE64A2A880135008A2BAA /* C1Box.swift */, 106 | 692CE64D2A880135008A2BAA /* C2Box.swift */, 107 | 692CE6512A880135008A2BAA /* C3Box.swift */, 108 | 692CE6482A880135008A2BAA /* C4Box.swift */, 109 | 692CE64C2A880135008A2BAA /* C5Box.swift */, 110 | ); 111 | path = Views; 112 | sourceTree = ""; 113 | }; 114 | 692CE65E2A8801FD008A2BAA /* Utilities */ = { 115 | isa = PBXGroup; 116 | children = ( 117 | 692CE65F2A880210008A2BAA /* ForegroundGradient.swift */, 118 | ); 119 | path = Utilities; 120 | sourceTree = ""; 121 | }; 122 | /* End PBXGroup section */ 123 | 124 | /* Begin PBXNativeTarget section */ 125 | 692CE6332A8800FD008A2BAA /* SwiftUI-Bento-Box */ = { 126 | isa = PBXNativeTarget; 127 | buildConfigurationList = 692CE6422A880101008A2BAA /* Build configuration list for PBXNativeTarget "SwiftUI-Bento-Box" */; 128 | buildPhases = ( 129 | 692CE6302A8800FD008A2BAA /* Sources */, 130 | 692CE6312A8800FD008A2BAA /* Frameworks */, 131 | 692CE6322A8800FD008A2BAA /* Resources */, 132 | ); 133 | buildRules = ( 134 | ); 135 | dependencies = ( 136 | ); 137 | name = "SwiftUI-Bento-Box"; 138 | productName = "SwiftUI-Bento-Box"; 139 | productReference = 692CE6342A8800FD008A2BAA /* SwiftUI-Bento-Box.app */; 140 | productType = "com.apple.product-type.application"; 141 | }; 142 | /* End PBXNativeTarget section */ 143 | 144 | /* Begin PBXProject section */ 145 | 692CE62C2A8800FD008A2BAA /* Project object */ = { 146 | isa = PBXProject; 147 | attributes = { 148 | BuildIndependentTargetsInParallel = 1; 149 | LastSwiftUpdateCheck = 1500; 150 | LastUpgradeCheck = 1500; 151 | TargetAttributes = { 152 | 692CE6332A8800FD008A2BAA = { 153 | CreatedOnToolsVersion = 15.0; 154 | }; 155 | }; 156 | }; 157 | buildConfigurationList = 692CE62F2A8800FD008A2BAA /* Build configuration list for PBXProject "SwiftUI-Bento-Box" */; 158 | compatibilityVersion = "Xcode 14.0"; 159 | developmentRegion = en; 160 | hasScannedForEncodings = 0; 161 | knownRegions = ( 162 | en, 163 | Base, 164 | ); 165 | mainGroup = 692CE62B2A8800FD008A2BAA; 166 | productRefGroup = 692CE6352A8800FD008A2BAA /* Products */; 167 | projectDirPath = ""; 168 | projectRoot = ""; 169 | targets = ( 170 | 692CE6332A8800FD008A2BAA /* SwiftUI-Bento-Box */, 171 | ); 172 | }; 173 | /* End PBXProject section */ 174 | 175 | /* Begin PBXResourcesBuildPhase section */ 176 | 692CE6322A8800FD008A2BAA /* Resources */ = { 177 | isa = PBXResourcesBuildPhase; 178 | buildActionMask = 2147483647; 179 | files = ( 180 | 692CE63F2A880101008A2BAA /* Preview Assets.xcassets in Resources */, 181 | 692CE63C2A880101008A2BAA /* Assets.xcassets in Resources */, 182 | ); 183 | runOnlyForDeploymentPostprocessing = 0; 184 | }; 185 | /* End PBXResourcesBuildPhase section */ 186 | 187 | /* Begin PBXSourcesBuildPhase section */ 188 | 692CE6302A8800FD008A2BAA /* Sources */ = { 189 | isa = PBXSourcesBuildPhase; 190 | buildActionMask = 2147483647; 191 | files = ( 192 | 692CE65A2A880135008A2BAA /* B3Box.swift in Sources */, 193 | 692CE65D2A880135008A2BAA /* C3Box.swift in Sources */, 194 | 692CE65B2A880135008A2BAA /* B1Box.swift in Sources */, 195 | 692CE6562A880135008A2BAA /* C1Box.swift in Sources */, 196 | 692CE6582A880135008A2BAA /* C5Box.swift in Sources */, 197 | 692CE65C2A880135008A2BAA /* ContentView.swift in Sources */, 198 | 692CE6592A880135008A2BAA /* C2Box.swift in Sources */, 199 | 692CE6602A880210008A2BAA /* ForegroundGradient.swift in Sources */, 200 | 692CE6532A880135008A2BAA /* CenterImage.swift in Sources */, 201 | 692CE6542A880135008A2BAA /* C4Box.swift in Sources */, 202 | 692CE6382A8800FD008A2BAA /* SwiftUI_Bento_BoxApp.swift in Sources */, 203 | 692CE6522A880135008A2BAA /* B2Box.swift in Sources */, 204 | 692CE6552A880135008A2BAA /* A1Box.swift in Sources */, 205 | 692CE6572A880135008A2BAA /* A2Box.swift in Sources */, 206 | ); 207 | runOnlyForDeploymentPostprocessing = 0; 208 | }; 209 | /* End PBXSourcesBuildPhase section */ 210 | 211 | /* Begin XCBuildConfiguration section */ 212 | 692CE6402A880101008A2BAA /* Debug */ = { 213 | isa = XCBuildConfiguration; 214 | buildSettings = { 215 | ALWAYS_SEARCH_USER_PATHS = NO; 216 | ASSETCATALOG_COMPILER_GENERATE_SWIFT_ASSET_SYMBOL_EXTENSIONS = YES; 217 | CLANG_ANALYZER_NONNULL = YES; 218 | CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; 219 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++20"; 220 | CLANG_ENABLE_MODULES = YES; 221 | CLANG_ENABLE_OBJC_ARC = YES; 222 | CLANG_ENABLE_OBJC_WEAK = YES; 223 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 224 | CLANG_WARN_BOOL_CONVERSION = YES; 225 | CLANG_WARN_COMMA = YES; 226 | CLANG_WARN_CONSTANT_CONVERSION = YES; 227 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 228 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 229 | CLANG_WARN_DOCUMENTATION_COMMENTS = YES; 230 | CLANG_WARN_EMPTY_BODY = YES; 231 | CLANG_WARN_ENUM_CONVERSION = YES; 232 | CLANG_WARN_INFINITE_RECURSION = YES; 233 | CLANG_WARN_INT_CONVERSION = YES; 234 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 235 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 236 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 237 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 238 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 239 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 240 | CLANG_WARN_STRICT_PROTOTYPES = YES; 241 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 242 | CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE; 243 | CLANG_WARN_UNREACHABLE_CODE = YES; 244 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 245 | COPY_PHASE_STRIP = NO; 246 | DEBUG_INFORMATION_FORMAT = dwarf; 247 | ENABLE_STRICT_OBJC_MSGSEND = YES; 248 | ENABLE_TESTABILITY = YES; 249 | ENABLE_USER_SCRIPT_SANDBOXING = YES; 250 | GCC_C_LANGUAGE_STANDARD = gnu17; 251 | GCC_DYNAMIC_NO_PIC = NO; 252 | GCC_NO_COMMON_BLOCKS = YES; 253 | GCC_OPTIMIZATION_LEVEL = 0; 254 | GCC_PREPROCESSOR_DEFINITIONS = ( 255 | "DEBUG=1", 256 | "$(inherited)", 257 | ); 258 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 259 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 260 | GCC_WARN_UNDECLARED_SELECTOR = YES; 261 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 262 | GCC_WARN_UNUSED_FUNCTION = YES; 263 | GCC_WARN_UNUSED_VARIABLE = YES; 264 | IPHONEOS_DEPLOYMENT_TARGET = 17.0; 265 | LOCALIZATION_PREFERS_STRING_CATALOGS = YES; 266 | MTL_ENABLE_DEBUG_INFO = INCLUDE_SOURCE; 267 | MTL_FAST_MATH = YES; 268 | ONLY_ACTIVE_ARCH = YES; 269 | SDKROOT = iphoneos; 270 | SWIFT_ACTIVE_COMPILATION_CONDITIONS = "DEBUG $(inherited)"; 271 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 272 | }; 273 | name = Debug; 274 | }; 275 | 692CE6412A880101008A2BAA /* Release */ = { 276 | isa = XCBuildConfiguration; 277 | buildSettings = { 278 | ALWAYS_SEARCH_USER_PATHS = NO; 279 | ASSETCATALOG_COMPILER_GENERATE_SWIFT_ASSET_SYMBOL_EXTENSIONS = YES; 280 | CLANG_ANALYZER_NONNULL = YES; 281 | CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; 282 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++20"; 283 | CLANG_ENABLE_MODULES = YES; 284 | CLANG_ENABLE_OBJC_ARC = YES; 285 | CLANG_ENABLE_OBJC_WEAK = YES; 286 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 287 | CLANG_WARN_BOOL_CONVERSION = YES; 288 | CLANG_WARN_COMMA = YES; 289 | CLANG_WARN_CONSTANT_CONVERSION = YES; 290 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 291 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 292 | CLANG_WARN_DOCUMENTATION_COMMENTS = YES; 293 | CLANG_WARN_EMPTY_BODY = YES; 294 | CLANG_WARN_ENUM_CONVERSION = YES; 295 | CLANG_WARN_INFINITE_RECURSION = YES; 296 | CLANG_WARN_INT_CONVERSION = YES; 297 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 298 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 299 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 300 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 301 | CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES; 302 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 303 | CLANG_WARN_STRICT_PROTOTYPES = YES; 304 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 305 | CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE; 306 | CLANG_WARN_UNREACHABLE_CODE = YES; 307 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 308 | COPY_PHASE_STRIP = NO; 309 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 310 | ENABLE_NS_ASSERTIONS = NO; 311 | ENABLE_STRICT_OBJC_MSGSEND = YES; 312 | ENABLE_USER_SCRIPT_SANDBOXING = YES; 313 | GCC_C_LANGUAGE_STANDARD = gnu17; 314 | GCC_NO_COMMON_BLOCKS = YES; 315 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 316 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 317 | GCC_WARN_UNDECLARED_SELECTOR = YES; 318 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 319 | GCC_WARN_UNUSED_FUNCTION = YES; 320 | GCC_WARN_UNUSED_VARIABLE = YES; 321 | IPHONEOS_DEPLOYMENT_TARGET = 17.0; 322 | LOCALIZATION_PREFERS_STRING_CATALOGS = YES; 323 | MTL_ENABLE_DEBUG_INFO = NO; 324 | MTL_FAST_MATH = YES; 325 | SDKROOT = iphoneos; 326 | SWIFT_COMPILATION_MODE = wholemodule; 327 | VALIDATE_PRODUCT = YES; 328 | }; 329 | name = Release; 330 | }; 331 | 692CE6432A880101008A2BAA /* Debug */ = { 332 | isa = XCBuildConfiguration; 333 | buildSettings = { 334 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 335 | ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor; 336 | CODE_SIGN_STYLE = Automatic; 337 | CURRENT_PROJECT_VERSION = 1; 338 | DEVELOPMENT_ASSET_PATHS = "\"SwiftUI-Bento-Box/Preview Content\""; 339 | DEVELOPMENT_TEAM = 62X8RDXJ3W; 340 | ENABLE_PREVIEWS = YES; 341 | GENERATE_INFOPLIST_FILE = YES; 342 | INFOPLIST_KEY_UIApplicationSceneManifest_Generation = YES; 343 | INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES; 344 | INFOPLIST_KEY_UILaunchScreen_Generation = YES; 345 | INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; 346 | INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; 347 | IPHONEOS_DEPLOYMENT_TARGET = 16.4; 348 | LD_RUNPATH_SEARCH_PATHS = ( 349 | "$(inherited)", 350 | "@executable_path/Frameworks", 351 | ); 352 | MARKETING_VERSION = 1.0; 353 | PRODUCT_BUNDLE_IDENTIFIER = "com.raktech.SwiftUI-Bento-Box"; 354 | PRODUCT_NAME = "$(TARGET_NAME)"; 355 | SWIFT_EMIT_LOC_STRINGS = YES; 356 | SWIFT_VERSION = 5.0; 357 | TARGETED_DEVICE_FAMILY = "1,2"; 358 | }; 359 | name = Debug; 360 | }; 361 | 692CE6442A880101008A2BAA /* Release */ = { 362 | isa = XCBuildConfiguration; 363 | buildSettings = { 364 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 365 | ASSETCATALOG_COMPILER_GLOBAL_ACCENT_COLOR_NAME = AccentColor; 366 | CODE_SIGN_STYLE = Automatic; 367 | CURRENT_PROJECT_VERSION = 1; 368 | DEVELOPMENT_ASSET_PATHS = "\"SwiftUI-Bento-Box/Preview Content\""; 369 | DEVELOPMENT_TEAM = 62X8RDXJ3W; 370 | ENABLE_PREVIEWS = YES; 371 | GENERATE_INFOPLIST_FILE = YES; 372 | INFOPLIST_KEY_UIApplicationSceneManifest_Generation = YES; 373 | INFOPLIST_KEY_UIApplicationSupportsIndirectInputEvents = YES; 374 | INFOPLIST_KEY_UILaunchScreen_Generation = YES; 375 | INFOPLIST_KEY_UISupportedInterfaceOrientations_iPad = "UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; 376 | INFOPLIST_KEY_UISupportedInterfaceOrientations_iPhone = "UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight"; 377 | IPHONEOS_DEPLOYMENT_TARGET = 16.4; 378 | LD_RUNPATH_SEARCH_PATHS = ( 379 | "$(inherited)", 380 | "@executable_path/Frameworks", 381 | ); 382 | MARKETING_VERSION = 1.0; 383 | PRODUCT_BUNDLE_IDENTIFIER = "com.raktech.SwiftUI-Bento-Box"; 384 | PRODUCT_NAME = "$(TARGET_NAME)"; 385 | SWIFT_EMIT_LOC_STRINGS = YES; 386 | SWIFT_VERSION = 5.0; 387 | TARGETED_DEVICE_FAMILY = "1,2"; 388 | }; 389 | name = Release; 390 | }; 391 | /* End XCBuildConfiguration section */ 392 | 393 | /* Begin XCConfigurationList section */ 394 | 692CE62F2A8800FD008A2BAA /* Build configuration list for PBXProject "SwiftUI-Bento-Box" */ = { 395 | isa = XCConfigurationList; 396 | buildConfigurations = ( 397 | 692CE6402A880101008A2BAA /* Debug */, 398 | 692CE6412A880101008A2BAA /* Release */, 399 | ); 400 | defaultConfigurationIsVisible = 0; 401 | defaultConfigurationName = Release; 402 | }; 403 | 692CE6422A880101008A2BAA /* Build configuration list for PBXNativeTarget "SwiftUI-Bento-Box" */ = { 404 | isa = XCConfigurationList; 405 | buildConfigurations = ( 406 | 692CE6432A880101008A2BAA /* Debug */, 407 | 692CE6442A880101008A2BAA /* Release */, 408 | ); 409 | defaultConfigurationIsVisible = 0; 410 | defaultConfigurationName = Release; 411 | }; 412 | /* End XCConfigurationList section */ 413 | }; 414 | rootObject = 692CE62C2A8800FD008A2BAA /* Project object */; 415 | } 416 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box.xcodeproj/xcuserdata/rklumph.xcuserdatad/xcschemes/xcschememanagement.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | SchemeUserState 6 | 7 | SwiftUI-Bento-Box.xcscheme_^#shared#^_ 8 | 9 | orderHint 10 | 0 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Assets.xcassets/AccentColor.colorset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "colors" : [ 3 | { 4 | "idiom" : "universal" 5 | } 6 | ], 7 | "info" : { 8 | "author" : "xcode", 9 | "version" : 1 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "platform" : "ios", 6 | "size" : "1024x1024" 7 | } 8 | ], 9 | "info" : { 10 | "author" : "xcode", 11 | "version" : 1 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "author" : "xcode", 4 | "version" : 1 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Assets.xcassets/iphone.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "filename" : "harmony-iphone2.png", 5 | "idiom" : "universal", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "scale" : "2x" 11 | }, 12 | { 13 | "idiom" : "universal", 14 | "scale" : "3x" 15 | } 16 | ], 17 | "info" : { 18 | "author" : "xcode", 19 | "version" : 1 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Assets.xcassets/iphone.imageset/harmony-iphone2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thatvirtualboy/SwiftUI-Bento-Box/6fb01f60973cd7f1fda3bc041613990678f10142/SwiftUI-Bento-Box/Assets.xcassets/iphone.imageset/harmony-iphone2.png -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Preview Content/Preview Assets.xcassets/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "info" : { 3 | "author" : "xcode", 4 | "version" : 1 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/SwiftUI_Bento_BoxApp.swift: -------------------------------------------------------------------------------- 1 | // 2 | // SwiftUI_Bento_BoxApp.swift 3 | // SwiftUI-Bento-Box 4 | // 5 | // Created by Ryan Klumph on 8/12/23. 6 | // 7 | 8 | import SwiftUI 9 | 10 | @main 11 | struct SwiftUI_Bento_BoxApp: App { 12 | var body: some Scene { 13 | WindowGroup { 14 | ContentView() 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Utilities/ForegroundGradient.swift: -------------------------------------------------------------------------------- 1 | // 2 | // ForegroundGradient.swift 3 | // SwiftUI-Bento-Box 4 | // 5 | // Created by Ryan Klumph on 8/12/23. 6 | // 7 | 8 | import SwiftUI 9 | 10 | extension View { 11 | public func gradientForeground(colors: [Color]) -> some View { 12 | self.overlay(LinearGradient(gradient: .init(colors: colors), 13 | startPoint: .topLeading, 14 | endPoint: .bottomTrailing)) 15 | .mask(self) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/A1Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct A1Box: View { 10 | var body: some View { 11 | ZStack { 12 | RoundedRectangle(cornerRadius: 20.0) 13 | .frame(width: 320, height: 90) 14 | .foregroundColor(.gray.opacity(0.1)) 15 | 16 | Text("\"A1 text goes here\"") 17 | .gradientForeground(colors: [Color.blue, Color.green]) 18 | .bold() 19 | .font(.system(size: 30)) 20 | } 21 | } 22 | } 23 | 24 | #Preview { 25 | A1Box() 26 | } 27 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/A2Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct A2Box: View { 10 | var body: some View { 11 | ZStack { 12 | RoundedRectangle(cornerRadius: 20.0) 13 | .frame(width: 320, height: 505) 14 | .foregroundColor(.gray.opacity(0.1)) 15 | 16 | Image("iphone") 17 | .resizable() 18 | .scaledToFit() 19 | .frame(width: 200) 20 | .offset(y: -30) 21 | 22 | VStack { 23 | Text("A2 Box") 24 | .font(.system(size: 30)) 25 | .offset(y: 205) 26 | Text("Subheadline goes here") 27 | .font(.system(size: 10)) 28 | .offset(y: 208) 29 | } 30 | } 31 | } 32 | } 33 | 34 | #Preview { 35 | A2Box() 36 | } 37 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/B1Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct B1Box: View { 10 | var body: some View { 11 | ZStack { 12 | RoundedRectangle(cornerRadius: 20.0) 13 | .frame(width: 270, height: 170) 14 | .foregroundColor(.gray.opacity(0.1)) 15 | 16 | VStack(alignment: .center) { 17 | Spacer() 18 | Text("B1 Headline") 19 | .font(.system(size: 30)) 20 | .bold() 21 | 22 | HStack { 23 | Image(systemName: "photo") 24 | .resizable() 25 | .frame(width: 70, height: 70) 26 | .blur(radius: 20) 27 | .opacity(0.6) 28 | .cornerRadius(20) 29 | .rotationEffect(.degrees(-25)) 30 | Image(systemName: "photo") 31 | .resizable() 32 | .frame(width: 70, height: 70) 33 | .blur(radius: 20) 34 | .opacity(0.6) 35 | .cornerRadius(20) 36 | .padding(.horizontal, 6) 37 | Image(systemName: "photo") 38 | .resizable() 39 | .frame(width: 70, height: 70) 40 | .blur(radius: 20) 41 | .opacity(0.6) 42 | .cornerRadius(20) 43 | .rotationEffect(.degrees(25)) 44 | } 45 | } 46 | .offset(y: -20) 47 | } 48 | .frame(width: 270, height: 170) 49 | } 50 | } 51 | 52 | #Preview { 53 | B1Box() 54 | } 55 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/B2Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct B2Box: View { 10 | var body: some View { 11 | ZStack { 12 | RoundedRectangle(cornerRadius: 20.0) 13 | .frame(width: 124, height: 170) 14 | .foregroundColor(.gray.opacity(0.1)) 15 | 16 | Image(systemName: "lightbulb.fill") 17 | .font(.system(size: 60)) 18 | .gradientForeground(colors: [Color.orange, Color.yellow]) 19 | .padding(.bottom, 50) 20 | 21 | Text("B2 Box") 22 | .padding(.top, 80) 23 | .font(.system(size: 20)) 24 | 25 | } 26 | } 27 | } 28 | 29 | #Preview { 30 | B2Box() 31 | } 32 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/B3Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct B3Box: View { 10 | var body: some View { 11 | ZStack { 12 | 13 | RoundedRectangle(cornerRadius: 20.0) 14 | .frame(width: 400, height: 240) 15 | .foregroundColor(.gray.opacity(0.1)) 16 | RoundedRectangle(cornerRadius: 20.0) 17 | .frame(width: 360, height: 160) 18 | .foregroundColor(.white) 19 | .offset(x: 0, y: 20) 20 | .overlay { 21 | Text("Something cool goes here") 22 | } 23 | Text("B3 Headline") 24 | .font(.system(size: 30)) 25 | .bold() 26 | .offset(x: 0, y: -90) 27 | } 28 | } 29 | } 30 | 31 | #Preview { 32 | B3Box() 33 | } 34 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/C1Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct C1Box: View { 10 | var body: some View { 11 | ZStack { 12 | RoundedRectangle(cornerRadius: 20.0) 13 | .frame(width: 155, height: 205) 14 | .foregroundColor(.gray.opacity(0.1)) 15 | 16 | Image(systemName: "photo") 17 | .font(.system(size: 80)) 18 | .scaledToFit() 19 | .padding(.bottom, 40) 20 | 21 | Text("C1 Headline") 22 | .padding(.top, 110) 23 | .font(.system(size: 20)) 24 | } 25 | } 26 | } 27 | 28 | #Preview { 29 | C1Box() 30 | } 31 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/C2Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct C2Box: View { 10 | var body: some View { 11 | ZStack { 12 | RoundedRectangle(cornerRadius: 20.0) 13 | .frame(width: 155, height: 205) 14 | .foregroundColor(.gray.opacity(0.1)) 15 | 16 | Image(systemName: "chart.pie.fill") 17 | .font(.system(size: 80)) 18 | .gradientForeground(colors: [Color.pink, Color.purple]) 19 | .padding(.bottom, 50) 20 | 21 | Text("C2 Headline") 22 | .padding(.top, 110) 23 | .font(.system(size: 20)) 24 | 25 | } 26 | } 27 | } 28 | 29 | #Preview { 30 | C2Box() 31 | } 32 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/C3Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct C3Box: View { 10 | var body: some View { 11 | VStack { 12 | ZStack { 13 | RoundedRectangle(cornerRadius: 20.0) 14 | .frame(width: 320, height: 180) 15 | .foregroundColor(.gray.opacity(0.1)) 16 | HStack { 17 | Image(systemName: "photo") 18 | .font(.system(size: 80)) 19 | .offset(x: 20, y: 1) 20 | Spacer() 21 | Text("C3 Headline") 22 | .font(.system(size: 30)) 23 | .gradientForeground(colors: [Color.cyan, Color.mint]) 24 | .bold() 25 | .offset(x: -10) 26 | } 27 | } 28 | .frame(width: 320, height: 160) 29 | } 30 | .frame(width: 320, height: 160) 31 | } 32 | } 33 | 34 | #Preview { 35 | C3Box() 36 | } 37 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/C4Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct C4Box: View { 10 | var body: some View { 11 | ZStack { 12 | RoundedRectangle(cornerRadius: 20.0) 13 | .frame(width: 155, height: 205) 14 | .foregroundColor(.gray.opacity(0.1)) 15 | 16 | Image(systemName: "photo") 17 | .font(.system(size: 80)) 18 | .scaledToFit() 19 | .padding(.bottom, 40) 20 | 21 | Text("C4 Headline") 22 | .padding(.top, 110) 23 | .font(.system(size: 20)) 24 | 25 | } 26 | } 27 | } 28 | 29 | #Preview { 30 | C4Box() 31 | } 32 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/C5Box.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct C5Box: View { 10 | var body: some View { 11 | ZStack { 12 | RoundedRectangle(cornerRadius: 20.0) 13 | .frame(width: 155, height: 205) 14 | .foregroundColor(.gray.opacity(0.1)) 15 | 16 | Image(systemName: "star.bubble.fill") 17 | .resizable() 18 | .frame(width: 80, height: 80) 19 | .scaledToFit() 20 | .gradientForeground(colors: [Color.gray, Color.yellow]) 21 | .padding(.bottom, 40) 22 | 23 | Text("C5 Headline") 24 | .padding(.top, 110) 25 | .font(.system(size: 20)) 26 | .multilineTextAlignment(.center) 27 | 28 | } 29 | } 30 | } 31 | 32 | #Preview { 33 | C5Box() 34 | } 35 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/CenterImage.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct CenterImage: View { 10 | var body: some View { 11 | ZStack { 12 | Color.blue // Swap this with your own image 13 | //.resizable() // UNcomment this to properly resize your image 14 | //.scaledToFill() 15 | .frame(width: 400, height: 175) 16 | .cornerRadius(20) 17 | 18 | Text("Primary Text") 19 | .font(.system(size: 63)) 20 | .foregroundColor(.white) 21 | .offset(y: 30) 22 | } 23 | .frame(width: 400, height: 170) 24 | } 25 | } 26 | 27 | #Preview { 28 | CenterImage() 29 | } 30 | -------------------------------------------------------------------------------- /SwiftUI-Bento-Box/Views/ContentView.swift: -------------------------------------------------------------------------------- 1 | // 2 | // Bento Box Template 3 | // 4 | // Created by Ryan Klumph on 8/10/23. 5 | // 6 | 7 | import SwiftUI 8 | 9 | struct ContentView: View { 10 | var body: some View { 11 | HStack { 12 | 13 | // First Column 14 | VStack(alignment: .leading) { 15 | A1Box() 16 | .offset(y: 4) 17 | A2Box() 18 | .offset(y: -5) 19 | } 20 | 21 | // Second Column 22 | VStack(alignment: .leading) { 23 | HStack { 24 | B1Box() 25 | B2Box() 26 | } 27 | CenterImage() 28 | B3Box() 29 | } 30 | 31 | // Third Column 32 | VStack(alignment: .leading) { 33 | HStack { 34 | C1Box() 35 | C2Box() 36 | } 37 | .offset(y: -8) 38 | C3Box() 39 | .offset(y: -2) 40 | HStack { 41 | C4Box() 42 | C5Box() 43 | } 44 | .offset(y: 8) 45 | } 46 | } 47 | } 48 | } 49 | 50 | #Preview { 51 | ContentView() 52 | } 53 | -------------------------------------------------------------------------------- /hellothere-23-bento-rounded.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thatvirtualboy/SwiftUI-Bento-Box/6fb01f60973cd7f1fda3bc041613990678f10142/hellothere-23-bento-rounded.png -------------------------------------------------------------------------------- /template.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thatvirtualboy/SwiftUI-Bento-Box/6fb01f60973cd7f1fda3bc041613990678f10142/template.png -------------------------------------------------------------------------------- /views.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thatvirtualboy/SwiftUI-Bento-Box/6fb01f60973cd7f1fda3bc041613990678f10142/views.png --------------------------------------------------------------------------------