(Lazy question) design/css tutorial?

[Nathaniel]

Hi everyone,

My team and I have been using paid-for bootstrap designs which have created a number of issues with Wappler, so we need to learn how to use Wappler when it comes to design and CSS. In particular, I’m interested in having dynamic CSS styles that we can instantiate somewhere.

I’m under a time constraint, and I was wondering if there are any tutorials around, in the community or the docs, that we can start looking into. I know it’s quite lame and lazy not to search before asking.

Thanks for any pointers!

[franse]

@Nathaniel

which have created a number of issues with Wappler,

Maybe is an obvious question but. Have you read this?:

Using Bootstrap with Custom Paths

Often, when using custom Bootstrap 4 templates purchased or downloaded from a template provider you need to use custom include paths for the Bootstrap 4 css and js files. Local and CDN options available in the Frameworks menu are not suitable in such cases. Using Custom Bootstrap 4 Paths First you need to setup your project and place all the template files in the site root. You can see that the Bootstrap files for this specific template are located in a specific vendor folder. Of course, these …

Also:

Using the Design Panel

Design panel provides you with visual tools to style your page content. You can design for different screen sizes, which creates the required styles and media queries for the selected device. Adding Custom CSS Styles File The design panel requires you to add a custom CSS file, where the styles are being written and saved. This can easily be done, by selecting your custom CSS file in the Project Settings. Select the project settings icon (pen icon), at the top part of Wappler window. The…

About this:

@Nathaniel

I’m interested in having dynamic CSS styles that we can instantiate somewhere.

Take a look at this:

Using the Toggle Component

Intro The тoggle component is a simple, but quite handy component. It can be used to toggle visibility, styling, classes of the elements on your pages. In this tutorial we will show you a couple of examples - toggling visibility and toggling a class. Toggle Component Overview As all the App Connect components, the toggle component should be added in the App Structure, before you can use it. Right click App: [Screenshot_1] Then select Data > Toggle: [Screenshot_2] The toggle component h…