Skip to content

Commit

Permalink
Update README and CodePen URL for Tailwind 2 and AutoLayout 3.
Browse files Browse the repository at this point in the history
  • Loading branch information
bernaferrari committed Nov 24, 2020
1 parent 27dc0f6 commit 5fa606b
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 6 deletions.
8 changes: 3 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,16 +42,14 @@ When finding the unknown (a `Group` or `Frame` with more than one child and no v

### Tailwind limitations

- **Width:** Tailwind has a maximum width of 256px. If an item passes this, the width will be set to `w-full` (unless it is already relative like `w-1/2`, `w-1/3`, etc). This is usually a feature, but be careful: if most layers in your project are larger than 256px, the plugin's result might be less than optimal.
- **Height:** The plugin avoids setting the height whenever possible, because width and height work differently in CSS. `h-full` means get the full height of the parent, but the parent **must** have it, while `w-full` doesn't require it. During experiments, avoiding a fixed height, in most cases, brought improved responsiveness and avoided nondeterministic scenarios.
- **Width:** Tailwind has a maximum width of 384px. If an item passes this, the width will be set to `w-full` (unless it is already relative like `w-1/2`, `w-1/3`, etc). This is usually a feature, but be careful: if most layers in your project are larger than 384px, the plugin's result might be less than optimal.

### Flutter limits and ideas

- **Align:** currently items are aligned inside a Row/Column according to their average position. Todo: find a way to improve this.
- **Unreadable code:** output code is not formatted, but even [dartpad](https://dartpad.dev/) offers a format button.
- **Unformatted code:** output code is not formatted, but even [dartpad](https://dartpad.dev/) offers a format button.
- **Stack:** in some simpler cases, a `Stack` could be replaced with a `Container` and a `BoxDecoration`. Discover those cases and optimize them.
- **Material Styles**: text could be matched to existing Material styles (like outputting `Headline6` when text size is 20).
- **Identify FlatButtons**: the plugin could identify specific buttons and output them instead of always using `Container` or `Material`.
- **Identify Buttons**: the plugin could identify specific buttons and output them instead of always using `Container` or `Material`.

## How to build the project

Expand Down
2 changes: 1 addition & 1 deletion src/ui/ScreenTailwind.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@
</p>
</div>
<div class="flex space-x-4 mt-2">
<a href="https://codepen.io/bernardoferrari/pen/mdVBJxe" target="_blank">
<a href="https://codepen.io/bernardoferrari/pen/zYKOBxa" target="_blank">
<button
class="px-4 py-2 font-semibold text-gray-800 bg-white border
border-gray-400 rounded shadow hover:bg-gray-50">
Expand Down

0 comments on commit 5fa606b

Please sign in to comment.