Bootstrap themes are not Themes

[Diogenes]

AppGini says that there are hundreds of themes for Bootstrap 3.x available online.

The Application has a button specifically for "Bootstrap website" to getboostrap.com

the other button says "More themes online" and links to http://bigprof.com/appgini/more-bootstrap-themes
the text on that page says

Get more Bootstrap themes

Bootstrap is a responsive CSS framework that can create neat web page layouts that look good on any device. As of AppGini 5.20, the generated applications use Bootstrap 3 for laying out pages. This means you can easily customize the look of your application using one of the many themes that come built-in (we use the standard Bootstrap theme + 11 others provided courtesy of Bootswatch), or downloading themes made by others -- there are thousands of themes available online, both free and commercial.

So I am confused why are CSS STYLESheets called a THEME?

When I look at the Appgini "/themes" installed folders all I see is CSS styles which might also be called "skins" .

HTML framework produced by Appgini does not change from the one framework that it is has been engineered to generate.

Appgini information is all pointed to encouraging people to go out and either download free Bootstrap 3 THEMES or buy some commercial Themes for Bootstrap AS IF Appgini will be able to input each THEME and when one of these 3rd party Themes are selected by the Developer he or she has a different kind of Appgini form and grid output.

I cannot understand why this false notion is being promoted so heavily by Appgini when the only option actually available is simply which CSS style sheet in the "themes" folder is selected?

Same design just different colors and slightly different buttons.

And why in the Appgini application is this folder even called "/themes"?

In any other application this folder would be called "/styles" or "/skins".

And in the Appgini installation you do have a folder called "/skins" that is not the standard industry definition of "skins".

More properly this would be called "/icons"

This is a very important item in Appgini that is promoted specifically AS IF Appgini can install a whole different Bootstrap Theme and the user simply "plugs it in" to Appgini and can generate the kind of views which Appgini is promoting on this Bootstrap Theme page.

The one single item which Appgini can use is one of the CSS stylesheets out of that theme and I suppose that the CSS that calls for external JS files can be modified to refer to the JS files installed in another folder in Appgini.

But that is as far as it can go. The real THEME functionality is lost, unusuable in most cases without intrusive mods of Appgini.

If I had never seen Bootstrap themes and followed your suggestions I might have paid for one of themes your own website displays at "Get more Bootstrap themes" http://bigprof.com/appgini/more-bootstrap-themes and then been scratching my head for hours trying to figure out why this new theme cannot work like a plugin to Appgini.

Am I misunderstanding this issue?

[peebee]

Yes, I think perhaps you may be misunderstanding the nature of a Bootstrap theme? Or maybe I am?

My own understanding is that a Bootstrap "theme" is pure CSS and the purpose is simply for visual enhancement of standard Bootstrap based on a common set of styling classes. For example, this very popular free Bootstrap Theme site obviously thinks that a theme is a replacement CSS file(s): https://bootswatch.com

In fact, if you download the Bootstrap package from the official bootstrap page, the only mention of "theme" is in the CSS folder. The official Bootstrap site provides an optional Bootstrap "Theme" example page, based purely on "the optional theme stylesheet included in Bootstrap" : http://getbootstrap.com/examples/theme

You can certainly extend Bootstrap functionality with additional Bootstrap components/plugins/custom html or javascript or even Bootstrap based templates but as far as I'm aware, that has nothing to do with the actual theme? I think it is a bit much to expect that simply loading a new Bootstrap theme is going to suddenly change the layout or functionality of an Appgini app - unless of course it was specifically built to enhance the Appgini framework in the first place. There might be an opening there for some enterprising person?

Perhaps there may be some confusion between "Theme" and "Template"?

[a.gneady]

Thanks for your feedback @Digenes ... Like @Peebee explained above, the term 'theme' is used by the official Bootstrap website to describe variations of the CSS framework ... But I do understand your feedback and how confusing it might be to link to the commercial Bootstrap themes that include additional components not supported by AppGini. We'll try to clarify this in more details on the website.

[Diogenes]

Thank you, Gentlemen!

There is a lot of confusion out there but I try to accept the terminology the guys that working in that area are using predominantly.

Themes?
Templates
Skins
Styles

I was confused because the pointed-to examples contained many more files than just CSS, including JS, custom icons, etc!

[jmacdougall]

Tell me about it. I saw in the AG program that it leads you to a theme site. I purchased a theme for $29 yet I cannot use it! Or at least, I am quite sure I cannot.

[graham]

At the risk of using the 'wrong' terminology, what I would like to do (and I imagine other people to) is create our own app 'house style' separate of the standard +15 odd 'themes' available. And then be able to quickly change the colours, fonts and to an extent the size of elements, according to client's taste. (The 15 themes only appear to be a slight colour variation of each other.) So step 1 would be to create my own 'theme' to use AppGini's termin ology, So I looked at the standard bootstrap_theme.css which has 634 lines and my cosmo.css file with 6735. And then I thought I would track down each element in my app with Firefox using the Inspector, identify the class and by doing so build my own housestyle.css 'theme' which only need to contain the classes actually being used - easier to manage/duplicate and create alternatives. Anyway, that doesn't seem a great way forward. So when in the AG admin panel it says 'So, it's easy to find hundreds of free and commercial themes online. You can even make your own themes.' - my question can someone give me an example of just one that can be downloaded and applied immediately to app? and for the second part of the statement - how? (I mean, how to make own theme.) Should I somehow attempt to identify each Bootstrap class used in AppGini (if so, how best to go about this?) and then use the https://getbootstrap.com/docs/3.4/customize/ facility? Or do what it suggests here: https://getbootstrap.com/docs/3.4/examples/theme/ This might also help: https://stackoverflow.com/questions/183 ... 3/19450210 It's okay to have 1+15 themes included but much better to be able to easily create alternatives to match client requirements/corporate colours etc. Apologies if some of this is obvious but I normally use my own CSS - I'm not familiar with Bootstrap (other than the grid.) Thanks as always in advance for any comments/input.

[jsetzer]

I recommend using a customizer like this one...
https://www.bootstrap-live-customizer.com/
(there are more customizers out there, find the one which fits the best for you)

Tips

A few tips from my personal experience with Bootstrap theme customization:

1. You may learn a little bit about LESS before you start because all Bootstrap (3) themes are based on less (variables + rules + ...) and have to be compiled into CSS before you can use them. The page I have mentioned above helps a lot doing this. You can edit your color variables, types, margins etc. and download a complete .css file afterwards.
2. Before you start editing all parameters in any customizer, do a little check with only a few modifications. Download the .css, integrate it in your AppGini code and check if everything works fine.
3. There are different Bootstrap versions and the customizer you chose has to produce output compatible with Bootstrap 3.
4. Don't forget to always clear browser cache before reloading - otherwise you may see outdated (cached) css settings.
5. Also don't forget that AppGini will overwrite certain css files on code-generation unless you protect them.
6. Don't be surprised: it takes time to customize a theme. A lot of time sometimes.

I only did it once and it took me hours. One advantage of the built-in Bootswatch themes is: The have already been compiled and ship with AppGini. And many users are used to those themes because they are very common.

This should be a good starting point for your own customizations.
Hope this helps!
Jan

PS: This is a screenshot of my "Microsoft Office look-alike" Bootstrap theme for a project based on AppGini:
(work im progress, small screen, don't blame me for the cut German translations in the buttons)

chrome_493OQMta6i.png (225.84 KiB) Viewed 3352 times

[graham]

Actually, that's the sort of advice I was hoping for and I appreciate it. I will do it because I think it is necessary and I will report back here in due course either for a question or to present a guide for others.

[graham]

So a last point for now .. maybe now is the time for Ahmed to change the wording on the admin instructions from 'So, it's easy to find hundreds of free and commercial themes online. You can even make your own themes.' To something like ... 'You have a choice of 1+15 'themes'. It is also possible to create your own themes (requires a Bootstrap customizer and knowledge of LESS).

[jsetzer]

I'm sorry if I did not explain this good enough.

I'd like to emphasize that you don't need a bootstrap customizer, but it helps a lot. You don't need to know less, but it helps understanding. You need (almost) nothing else than a text editor.

But the tools mentioned above will safe you hours of time in comparison to just using notepad.exe. And the tool will safe you years of learning the required web technologies.

We can use AppGini out of the box and it will work in all modern browsers on many devices for many use cases up to a certain point - even as a non-programmer. AppGini takes care of database migrations, validation, authentication, session handling, sql injection and so much more. BigProf, Twitter, Bootswatch team and many more developers have done 95% of the hard job already.

But as always: if we want more or if we don't like the defaults: hands on!

I've been working with different code generators over the years, even programmed own generators and ORM tools for government. Believe me or not: A multipurpose tool like AppGini will never cover all specific needs. There will always be a point from which on you will need additional skills. Always.

If there is a real business requirement for changing the colors and typo, the tools mentioned above will help you doing your job, but they will not do the job for you.

[graham]

That's fine. I understand that. That's why I'm making the effort pretty much from scratch with PHP/SQL in order to be able to take what is a great product (AppGini) and hopefully extend it even further. Not just style but functionality too. Your comments are very helpful because it's important to understand the boundaries. So thank you Jan.