Today, I make a public release of the initial version of FreakUI, a modern, disign-first and easy to use framework for iOS and macOS, which I have been building on the go while designing and imporving experience of my applications. FreakUI is currently in active development, and I'm continuously enhancing it with new components, features, extensions and tokens. All of my publicly available Apple projects now use FreakUI.
Note:
While not everything is documented yet, and the package is still a work in progress, I believe that the time has come to take a step and make FreakUI available for developer community.
The package itself provides a nice structured documentation, so after you import it to your project, you can explore, try and test how everything works.
What's inside FreakUI v0.5.0-alpha?
1. Effortless Dark & Light Mode Support
When you import the package in your project, you can either continue working with default FreakUI colors, or create your own custom Theme conforming to FreakUITheme
protocol.
This gives you a list of color properties for dark and light mode, for which you can assign HEX values as strings.
Then you need to initialize this Theme in your @main
app initializer.
The detailed process of thie initial setup is described here.
After that you can say goodbye to the pain of applying different themes manually via Environment
.
Here's how it works in short: your app receives a collection of UI-related colors defined as .primaryAccent
, .secondaryFont
, etc.
When you use these color (for both Color and Shape) in your project, FreakUI handles the color variants based on the device's color scheme automatically.
2. Convenient View Layouts
Wrap your main view into NavigationStack
, then add FViewLayout
container, and FreakUI will handle the logic of applying and positioning your content depending on the view's place in the hierarchy.
Specify the layout as .parent
, .child
, or .sheet
(.popUp
for macOS) - all the background and action colors will be handled automatically.
This is especially useful when working on different platforms in a single target. However, you may still want to handle macOS-related top-level views in a separate objects, which is described in the package documentation. I'm conituosly improving this setup to finally satisfy all the platforms in the single target, on the single view.
3. Tokenized Sizes and Radiuses
Coming from 10 years of design experience, I know that consistency is a key for the great design. That's why I decided to tokenize everything which is related to the size of the UI, such as paddings, radiuses, and fonts.
FreakUI provides a collection of tokens (such as .paddingXL
, .radiusXS
, etc.) to keep your design consistent.
Each token has several scale options, so, when specifying your custom theme, you can choose which scale to apply.
If you use these tokens across your app interface, changing the scale of your custom Theme will allow you to easily experiment with different looks and feels of your application.
4. View Containers
To maintain consistency across the app interface, FreakUI provides a set of different containers for wrapping your content. Containers instantly make your views look solid and consistent, and you can always specify the sizing, alignment, and scale on the call.
5. Dashboard Components
If your app focuses on displaying valuable information (as it should), it will definitely benefit from FreakUI collection of components to build beautiful dashboards. It includes:
- Data cells
- Data labels
- Indicators
- Custom progress bars with multiple values
- SwiftUI Chart custom modifiers
- And many more design elements
6. Date and Number Formatters
Current version handles various date and number formatters, so you can focus on user experience instead of cluttering your codebase with custom static properties and extensions. Get features like:
- Displaying dates in short or precise formats
- Correct time locale for users
- Showing
Double
andInt
values with "+" signs - And many more formatting options
7. Navigation Bar Enhancements
Apply colors to navigation bar titles out of the box. After going through many challenges, I'm extremely happy that FreakUI can do it the right way. While it's already handled with FreakUI view layouts, you can always customize navigation bar titles separately with convenient modifiers.
8. Haptic and Toast Managers
- Haptics: Just add a call to the HapticManager singleton from FreakUI to add haptic feedback to your actions.
- Toasts: Wrap your main view in
ZStack
, add theToastView
on top, and call the singleton function for any action with custom icons and messages.
Details specified in the documentation.
9. Tokenized Font Sizes
While still a work in progress (and I'm not completely satisfied with the current font sizing structure), it's already looking quite good in productuion. Tokenized font stucture allows you to use the consistent set of font sizes, and do not specify the font propeties directy in your codebase.
Font library:
The font sizig structure will be updated soon. On recieve, your interface typography will look different, but much better.
10. And many more
Of course, there are many other small features and convenient little helpers that I didn't include in this post. I encourage you to test FreakUI, push it to the limit, and send me your feedback.
Try FreakUI today
The FreakUI Framework is extremelly lightweight, and it will literally take a minute for you to add it to your app, and start testing what's possible. Go and check it for yourself.
During the alpha phase, FreakUI is free for anyone.
I'll personally support you through every step of implementing the Framework's logic, providing hands-on code-level support to ensure everything is set up correctly. This way, we make sure together that your project is getting all the FreakUI benefits.
Good luck and happy coding!