Topic: Bootstrap 3 responsive theme / HTML5

Hi,

I've got a Bootstrap 3 repsonsive theme working.  Well mostly working.  It is a php solution with some proposed changes to the core to delegate rendering to the theme.

The demo site is here.

The source is on github.

I wouldn't recommend installing it yourself, unless you're a developer at this stage.

Cambell

Cambell https://github.com/cambell-prince

Re: Bootstrap 3 responsive theme / HTML5

Wiki-ed it.

Re: Bootstrap 3 responsive theme / HTML5

can you share the code (full zip), because i follow ur instalasion instruction, but not working well

Re: Bootstrap 3 responsive theme / HTML5

I've added a tar package and updated instructions.

Cambell https://github.com/cambell-prince

5 (edited by maulana 12/31/2014 03:45:12 am)

Re: Bootstrap 3 responsive theme / HTML5

cambell wrote:

I've added a tar package and updated instructions.

well there is error again,
http://s25.postimg.org/auft0zz9r/Tanpa_judul.png
i install ur https://github.com/cambell-prince/frontaccounting as zip then i extract to my htdocs (Xampp 1.8.3)
then i extract ur theme to my theme folder, then i change it on my display
but after that there's nothing display on my browser
pls help, i really admire your work big_smile

Re: Bootstrap 3 responsive theme / HTML5

@maulana It looks like you've tried to install it from the 'source' not the tar or zip package.  As you're on windows I've added a zip package for you.  You can download the all in one zip package from the release page.  Choose the green button (all in one package), not the grey one (source code).

Have another read of the instructions, it looks like you're trying to install it as a developer rather than the packages that a user would prefer.

The longer answer, is that the source code for the themes does not have the css styles 'built'.  The source for bootstrap styles comes as less files which are then 'built' into the final css used in the theme.  I've provided gulp build tasks for building the bootstrap less into the final 'default.css' file.  The theme also uses twig templates which are installed via composer.

With modern web development tools end users cannot simply install the source and expect it to work.  There are dependencies to install (via composer), and processes to run (via gulp) to generate the final set of files that would be used.

Cambell https://github.com/cambell-prince

Re: Bootstrap 3 responsive theme / HTML5

oh thanks its working now, before it, i did already composer install big_smile
by the way where can i contact you, maybe i will ask you about ur code, or just here?

Re: Bootstrap 3 responsive theme / HTML5

@maulana I get an email from the forum to topics I've already posted on, so I do see them.  Also I'm on developers@lists.frontaccounting.eu that's a good way to get hold of me.

Cambell https://github.com/cambell-prince

Re: Bootstrap 3 responsive theme / HTML5

@cambell: Whilst the development of the theme will benefit from such splitups of more/less code, the releases for end user usage and feedback / troubleshooting / fixing code may prove to be cumbersome if it is needs to be back referenced to the original files that made up the file being investigated.

Re: Bootstrap 3 responsive theme / HTML5

@apmuthu.  The php files are not split / joined.  The only split / joined files are the css files in which less is compiled into css.  I find that the advantages of less are worth the effort.  Further, the compilation process provides a map file which modern browsers support showing the reference to the source less quite clearly.

Having said that if there is a concrete example you have of something being cumbersome I'm happy for the feedback.

This feature currently requires modifications to the Front Accounting core which need to be installed before this theme would work.  So, its not as simple as simply installing the theme and having it work.  That's why I've made the 'all in one' package available, to make it easier for folk to evaluate.

Cambell https://github.com/cambell-prince

Re: Bootstrap 3 responsive theme / HTML5

@cambell: I understand your development convenience.

CSS files that need tweaking in one version will need to be "re-tweaked" in subsequent versions for end users and the locations in the concatenated css file will then have to be traced back to it's source fragment file each time. The alternative would be to include a file that includes all these files in turn. I have used such in-situ testing of CSS in FireFox's FireBug feature and found it cumbersome - YMMV.

Also if there are too many files that need tweaking in the core, see if they fit a pattern to be included from a single file. They could be functions and / or template code. See what is the easiest way to merge the two together so that we can work from a common core.

A sort of a $Is_Mobile_Theme variable ....
on the lines of RTL ...

12 (edited by cambell 03/14/2016 03:17:28 am)

Re: Bootstrap 3 responsive theme / HTML5

Thanks for that apmuthu.  Having many css files is contrary to current good practice which seeks to minimize the static assets loaded by a page.  Bootstrap itself is built using less, so given that this is a Bootstrap 3 theme it seems natural to use less to produce a single default.css which is what I'm doing here.

I'm not quite sure to what you are referring as being 'tweaked'?  The changes to core were necessary to delegate the render to the theme.  These are not tweaks, but a significant change to allow delegated rendering.  This change has been proposed as a pull request here.  The current core code include html markup that cannot be fit to Bootstrap, the markup needs to change.  I think it is appropriate that rendering be done by classes in the theme at this stage of FA development, rather than propose extensive modifications to the core.

If you've got a specific issue that you would like to see addressed that you would like added to the PR do let me know and I'll look into it.

Cambell https://github.com/cambell-prince

Re: Bootstrap 3 responsive theme / HTML5

@dz, there's several things that are not responsive in the demo http://demo.saygoweb.com/frontaccounting.  The menus are not properly responsive, so that when they collapse (as on a phone), the main menus no longer work.  Also, main page for each menu is also not responsive.  Most of my effort was focussed on getting bootstrap 3 to work inside each view that you get from the menu system.  If you are viewing one of these pages, it should be properly responsive.  If viewing the menu it will not be responsive.

This is really only a proof of concept.  If the developers of front-accounting were to adopt this type of technique then I'm sure we'd see more bootstrap themes become much easier to produce without hacking the core.

Cambell

Cambell https://github.com/cambell-prince

Re: Bootstrap 3 responsive theme / HTML5

I had experience changing template for FrontAccounting using AdminLTE but I abandoned it because it is really hard to make the change generic because some part of the html is written as PHP function, for example the table item in sales order page. Maybe we can discuss how to make an easy modifiable theme schema.