From 8cce2f46ad50ed24050cfc6139b101f1a9c1e7a4 Mon Sep 17 00:00:00 2001 From: Adrian Szuszkiewicz Date: Thu, 1 Aug 2024 15:13:52 +0200 Subject: [PATCH] Edit the styling article (References: #30) --- .../moonshine.dev/styling_mxhx_forms/index.md | 157 ++++++++++-------- 1 file changed, 87 insertions(+), 70 deletions(-) diff --git a/docs/moonshine.dev/styling_mxhx_forms/index.md b/docs/moonshine.dev/styling_mxhx_forms/index.md index 79e1cd2..a97e543 100644 --- a/docs/moonshine.dev/styling_mxhx_forms/index.md +++ b/docs/moonshine.dev/styling_mxhx_forms/index.md @@ -6,116 +6,126 @@ layout: docpage ### Styling MXHX Forms -Intro +Welcome back to our series on mastering UI design with [Moonshine.dev](https://www.moonshine.dev/)! In [Part 2](/docs/moonshine.dev/diving_into_mxhx), we explored MXHX's powerful capabilities for defining UI components and layouts directly in the code tab. We covered layout types like AnchorLayout, HorizontalLayout, and VerticalLayout to help you build structured interfaces. -#### Creating Feedback Form +Now, in Part 3, we're focusing on making your UIs look amazing by diving into advanced styling techniques. We’ll show you how to use MXHX to apply custom styles that enhance the visual appeal of your applications. Let’s get started and make your interfaces shine! -- Staying in the Design Tab, drag a Form Container to the Canvas -- In the Common properties tab, give it an ID of "FeedbackForm" (will make it easier to find it) +#### Creating a Feedback Form -![Screenshot: Giving ID](./img/giving-id.png) +1. While in the **Design Tab**, drag a **Form Container** onto the Canvas. +2. In the **Common Properties** tab, set its ID to `"FeedbackForm"` for easy identification. -- Give it a width of 500px and height of 300px -- Applay a VerticalLayout to it -- Give it a Gap of 5px and set all paddings to 20px + ![Screenshot: Giving ID](./img/giving-id.png) -The result should look like this: -![Screenshot: Blank Feedback Form](./img/feedback-form.png) +3. Adjust the form's dimensions to a width of **500px** and a height of **300px**. +4. Apply a **VerticalLayout** with a **5px gap** and set all **paddings to 20px**. + + The form should look like this: -- Take a look at the outline tab. There should be a from with ID of a "FeedbackForm". It's helpful if you want to select it and other elements are obscuring it. + ![Screenshot: Blank Feedback Form](./img/feedback-form.png) + +5. Check the **Outline Tab** to verify that the form with ID `"FeedbackForm"` is listed. This helps you select it if other elements are in the way. #### Put the Form Elements in Place -- Drag a Label component into Feedback Form and give it a text of "Give Us Your Feedback". -- Drag another Label componet and give it a text of "Name:". -- Drag a TextInput component -- Drag another Label and give it a text of "Feedback:". -- Drag a TextArea component -- Drag a button and give it a text of "Submit". +1. Drag a **Label** component into the **Feedback Form** and set its text to **"Give Us Your Feedback"**. +2. Drag another **Label** component and set its text to **"Name:"**. +3. Drag a **TextInput** component below the "Name:" label. +4. Drag another **Label** and set its text to **"Feedback:"**. +5. Drag a **TextArea** component below the "Feedback:" label. +6. Drag a **Button** and set its text to **"Submit"**. -The result should look like this: -![Screenshot: Feedback Form with Elements](./img/feedback-form-elements.png) + The result should look like this: + + ![Screenshot: Feedback Form with Elements](./img/feedback-form-elements.png) #### Styling Header -- Select the Give Us Your Feedback header, either by clicking on its element in Design tab, or on its name in Outline tab. -- In the Properties panel, Common properties tab go to the Text Styles section. -- Give it a font of \_sans. -- Give it a size of 24 -- Give it a color of 0x0c4a6e +1. Select the **"Give Us Your Feedback"** header by clicking on its element in the **Design Tab** or selecting its name in the **Outline Tab**. +2. In the **Properties Panel**, go to the **Common Properties** tab and locate the **Text Styles** section. +3. Set the font to **\_sans**. +4. Change the font size to **24**. +5. Set the color to **0x0c4a6e**. -![Screenshot: Text Styles](./img/text-styles.png) + ![Screenshot: Text Styles](./img/text-styles.png) -The result should look like this: + The result should look like this: -![Screenshot: Styled Header](./img/header.png) + ![Screenshot: Styled Header](./img/header.png) #### Styling Labels -- Select the Name label -- Give it a font \_sans -- Give it a size of 10 -- Give it a color of 0x0c4a6e -- Set the style to Bold +1. Select the **Name** label. +2. Set the font to **\_sans**. +3. Change the font size to **10**. +4. Set the color to **0x0c4a6e**. +5. Apply the **Bold** style. -Do the exact same thing with Feedback label. +6. Repeat the same steps for the **Feedback** label. -The result should look like this: + The result should look like this: -![Screenshot: Styled Labels](./img/labels.png) + ![Screenshot: Styled Labels](./img/labels.png) -#### Styling the fields +#### Styling the Fields -We can also style the text fields to take up the whole width of our form. To do this: +We can style the text fields to take up the entire width of our form. To do this: -- Select the name TextInput -- In the properties go to Position & Size section -- Set the Width to 100 and units to % +1. Select the **Name** `TextInput` field. +2. In the **Properties Panel**, navigate to the **Position & Size** section. +3. Set the **Width** to **100** and the units to **%**. -![Screenshot: Setting width to 100 percent](./img/100-percent.png) + ![Screenshot: Setting width to 100 percent](./img/100-percent.png) -Do the same with Feedback Text Area. +4. Repeat the same steps for the **Feedback** `TextArea`. -The result should look like this: + The result should look like this: -![Screenshot: Full Width](./img/full-width.png) + ![Screenshot: Full Width](./img/full-width.png) -#### Styling Form +#### Styling the Form -- Select the FeedbackForm containter. If you have trouble doing it in Designer tab, you can also do it in the Outline tab. You should be able to identify it by ID we gave it earlier. -- Go to the Properties and go to the Background section -- Select SkinType: RectangeSkin. New properties should appear. -- Select FillStyle to SolidColor, then give it a color of 0xf0f9ff -- Select Border LineStyle to SolidColor, then give it a thickness of 2, color of 0x0c4a6e and corner radius of 10 +1. Select the **FeedbackForm** container. If you have trouble selecting it in the **Designer Tab**, you can also find it in the **Outline Tab** by the ID we assigned earlier. +2. In the **Properties Panel**, go to the **Background** section. +3. Set the **SkinType** to **RectangleSkin**. New properties should appear. +4. Set the **FillStyle** to **SolidColor** and assign it the color **0xf0f9ff**. +5. Set the **Border LineStyle** to **SolidColor** and configure the following: -![Screenshot: Background Properties](./img/background-properties.png) + - Thickness: **2** + - Color: **0x0c4a6e** + - Corner Radius: **10** -The result should look like this: + ![Screenshot: Background Properties](./img/background-properties.png) + + The result should look like this: + + ![Screenshot: Form Border](./img/form-border.png) + +#### Styling the Button -![Screenshot: Form Border](./img/form-border.png) +To style the button, we will adjust both the text styles and the background properties. -#### Styling Button +##### Text Styling -For this we're going to combine Text Styles and Background. +1. Set the font to **\_sans**. +2. Set the font size to **14**. +3. Set the text color to **0xffffff**. +4. Apply the **Bold** style. -For text: +##### Background Styling -- Set font to \_sans -- Set size to 14 -- Set color to 0xffffff -- Set bold +For now, we'll focus on styling the button's default state. It's possible to apply different styles for states like **Up**, **Hover**, **Down**, and **Disabled**. -For background, we're going to style only the default style for now. It is possible to apply different styles for states of Up, Hover, Down and Disabled. +1. Set the state to **Default**. +2. Choose **RectangleSkin** for the skin type. +3. Set the fill to a solid color of **0x0284c7**. +4. Set the **Border LineStyle** to **SolidColor** with the following properties: -- Set state to default -- Set rectangle skin -- Set fill to solid color of 0x0284c7 -- Set border to solid color -- Set border thicknes to 2 -- Set border color to 0x0c4a6e -- Set corner radius to 5 + - Thickness: **2** + - Color: **0x0c4a6e** + - Corner Radius: **5** -Also set button width to 150px and height to 30px. +5. Also, set the button width to **150px** and height to **30px**. The result should look like this: @@ -123,4 +133,11 @@ The result should look like this: #### Conclusion -There you go +In Part 3, we took a deep dive into advanced styling techniques with [Moonshine.dev](https://www.moonshine.dev/) and MXHX. You learned how to make your user interfaces not only functional but also visually stunning. By applying custom styles, you can now create cohesive and attractive designs that stand out. + +With these styling skills under your belt, you’re ready to tackle Part 4, where we’ll focus on nested layouts. This next step will teach you how to build more complex and responsive designs, taking your UI development to the next level. + +Stay tuned for more exciting tips and tricks as we continue our journey in UI design. For more resources, check out: + +- [mxhx.dev](https://mxhx.dev/) +- [feathersui.com](https://feathersui.com/)