Lesson 4 – Building intuitive admin interfaces for MainWP add-ons

MainWP has adopted or integrated Fomantic UI as its UI framework. Fomantic UI is a framework that builds on top of Semantic UI, providing a powerful and flexible toolset for creating responsive, user-friendly interfaces without the need to import any new CSS or JS into your project.

Here’s a basic guide on how to use Fomantic UI:

1. Include Fomantic UI in your project: There is no need to inport Fomantic UI as it will already be available within your project by default within the Core MainWP code.
2. HTML Structure: You may start creating the HTML structure of add-on using Fomantic UI. Fomantic UI provides a set of predefined classes and components that you can use to structure your content.
3. Add Fomantic UI classes: Fomantic UI uses a set of predefined classes to style HTML elements. You can add these classes to your HTML elements to apply styling. For example, to create a button with Fomantic UI, you can use the button element and add the class ui button.
4. Customize with JavaScript: Fomantic UI includes JavaScript components for interactive elements like dropdowns, modals, and accordions. You can initialize these components using JavaScript to add interactivity to your UI. For example, to initialize a dropdown, you can use the following JavaScript code:
5. Responsive Design: Fomantic UI is built with responsiveness in mind. You can use its grid system to create layouts that adapt to different screen sizes. The grid system uses classes like ui grid and column to define the layout of your page.
6. Theming: Fomantic UI allows you to customize the appearance of your UI by modifying variables in its theme files. You can create custom themes by changing variables like colors, fonts, and spacing to match your design requirements.
7. Documentation and Examples: Refer to the official Fomantic UI documentation for detailed information on its classes, components, and usage examples. The documentation provides code snippets and live examples to help you understand how to use Fomantic UI effectively.

By following these steps and experimenting with Fomantic UI’s classes and components, you can create stylish and responsive interfaces for your web projects.

Within the Next Lesson we will be going over Storing and retrieving data with a WordPress Plugin