IjzerenHein / Visualformat Editor
Licence: mit
Editor & previewer for Apple's Visual Format Language (built with autolayout.js)
Stars: ✭ 74
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Visualformat Editor
Easyanchor
⚓️ Declarative, extensible, powerful Auto Layout
Stars: ✭ 432 (+483.78%)
Mutual labels: autolayout
Whc autolayoutkit
iOS and Mac OS X platforms currently in use the fastest the simplest development to build the UI layout automatically open source library, strong dynamic layout constraint handling capacity，iOS/Mac OS X平台上目前使用最简单开发构建UI速度最快的自动布局开源库，强悍的动态布局约束处理能力
Stars: ✭ 858 (+1059.46%)
Mutual labels: autolayout
Keyboardlayoutguide
⌨️ Manage iOS keyboard with Apple's missing KeyboardLayoutGuide
Stars: ✭ 1,054 (+1324.32%)
Mutual labels: autolayout
Android Ratiolayout
This is a specified proportion to the size of the Layout or View support library, with which you can easily set a fixed ratio of the size of the Layout or View, internal adaptive size calculation, completely abandon the code to calculate the size! If you have any questions in the course or suggestions, please send an e-mail to the following e-mail, thank you!
Stars: ✭ 462 (+524.32%)
Mutual labels: autolayout
Autolayoutexamplewithmasonry
Different Autolayout examples with Masonry. 用Masonry写的Autolayout案例，持续更新中。详细解答请看tutuge.me
Stars: ✭ 694 (+837.84%)
Mutual labels: autolayout
Autolayout.js
Apple's Auto Layout and Visual Format Language for javascript (using cassowary constraints)
Stars: ✭ 975 (+1217.57%)
Mutual labels: autolayout
Uicollectionview Layouts Kit
📐 A set of custom layouts for UICollectionView with examples [Swift 5.3, iOS 12].
Stars: ✭ 410 (+454.05%)
Mutual labels: autolayout
Screenadaptationkit
🎨iOS rapidScreen Compatible AdapterKit(Deprecate)
Stars: ✭ 70 (-5.41%)
Mutual labels: autolayout
Color Picker For Ios
Colorful: iOS color picker built with Swift.
Stars: ✭ 709 (+858.11%)
Mutual labels: autolayout
Sketchkit
A lightweight auto-layout DSL library for iOS & tvOS.
Stars: ✭ 40 (-45.95%)
Mutual labels: autolayout
Purelayout
The ultimate API for iOS & OS X Auto Layout — impressively simple, immensely powerful. Objective-C and Swift compatible.
Stars: ✭ 7,548 (+10100%)
Mutual labels: autolayout
Toolbar
Awesome autolayout Toolbar. Toolbar is a library for iOS. You can easily create chat InputBar.
Stars: ✭ 458 (+518.92%)
Mutual labels: autolayout
Framelayoutkit
FrameLayoutKit is a super fast and easy to use autolayout kit
Stars: ✭ 53 (-28.38%)
Mutual labels: autolayout
Mylinearlayout
MyLayout is a powerful iOS UI framework implemented by Objective-C. It integrates the functions with Android Layout,iOS AutoLayout,SizeClass, HTML CSS float and flexbox and bootstrap. So you can use LinearLayout,RelativeLayout,FrameLayout,TableLayout,FlowLayout,FloatLayout,PathLayout,GridLayout,LayoutSizeClass to build your App 自动布局 UIView UITab…
Stars: ✭ 4,152 (+5510.81%)
Mutual labels: autolayout
Leego
Declarative, configurable & highly reusable UI development as making Lego bricks.
Stars: ✭ 967 (+1206.76%)
Mutual labels: autolayout
Zhi
Swift Library for Live Reloading Auto Layout Constraints on iOS
Stars: ✭ 72 (-2.7%)
Mutual labels: autolayout
Tangramkit
TangramKit is a powerful iOS UI framework implemented by Swift. It integrates the functions with Android layout,iOS AutoLayout,SizeClass, HTML CSS float and flexbox and bootstrap. So you can use LinearLayout,RelativeLayout,FrameLayout,TableLayout,FlowLayout,FloatLayout,LayoutSizeClass to build your App 自动布局 UIView UITableView UICollectionView
Stars: ✭ 984 (+1229.73%)
Mutual labels: autolayout
Click on the image above to start Visual Formatting :D
The Visual Format Editor allows you to parse and preview Apple's Visual Format Language. It is built using Cassowary.js, AutoLayout.js, famo.us and famous-flex.
Query arguments
The Visual Format Editor can be customized by specifying query-arguments:
| Argument | Type | Description |
|---|---|---|
vfl |
string |
The vfl definition to display. |
extended |
0 / 1
|
Enables or disables extended vfl mode (default: enabled). |
spacing |
array,number
|
Spacing to use (default: 8). |
mode |
string |
Appearence mode: default, compact, nolog, preview. |
settings |
0 / 1
|
Shows or hides the settings pane (default: 1). |
Example:
visualformat-editor/.../index.html?spacing=[20,10]&extended=0
Visual format meta info
Additional meta-info can be added in the form of comments. Using this meta-info, you can instruct the viewer to for instance use a specific aspect ratio or a specific color for a sub-view:
//viewport aspect-ratio:3/1 max-height:300
//colors red:#FF0000 green:#00FF00 blue:#0000FF
//shapes red:circle green:circle blue:circle
H:|-[row:[red(green,blue)]-[green]-[blue]]-|
V:|[row]|
Meta-info is also processed by renderers. If you want to set the meta-info only for previewing purposes, then prefix it with a -. The following example sets the max-width and max-height for previewing a mobile layout. The actual layout renderer will ignore this meta-info.
//-viewport max-width:320 max-height:500
//heights header:44 footer:44
V:|[col:[header][content][footer]]|
H:|[col]|
| Category | Property | Example |
|---|---|---|
viewport |
aspect-ratio:{width}/{height} |
//viewport aspect-ratio:16/9 |
width:[{number}/intrinsic] |
//viewport width:10 |
|
height:[{number}/intrinsic] |
//viewport height:intrinsic |
|
min-width:{number} |
||
max-width:{number} |
||
min-height:{number} |
||
max-height:{number} |
||
spacing |
[{number}/array] |
//spacing:8 or //spacing:[10, 20, 5]
|
widths |
{view-name}:[{number}/intrinsic] |
//widths subview1:100 |
heights |
{view-name}:[{number}/intrinsic] |
//heights subview1:intrinsic |
colors |
{view-name}:{color} |
//colors redview:#FF0000 blueview:#00FF00 |
shapes |
{view-name}:[circle/square] |
//shapes avatar:circle |
Contribute
If you like this project and want to support it, show some love and give it a star.
© 2015 Hein Rutjes
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].