Framework Converter: Difference between revisions

From NSB App Studio
Jump to navigation Jump to search
No edit summary
Line 6: Line 6:


The app itself is written in AppStudio, using Node libraries. It compiles into standalone apps for Windows and MacOS using Electron. The project is kept in a public repository in GitHub, called [https://github.com/nsbasic/framework-converter.appstudio framework-converter].
The app itself is written in AppStudio, using Node libraries. It compiles into standalone apps for Windows and MacOS using Electron. The project is kept in a public repository in GitHub, called [https://github.com/nsbasic/framework-converter.appstudio framework-converter].
Users are invited to open issues, look at the code and improve the app.


==== Notes on Bootstrap 3 Conversions ====
==== Notes on Bootstrap 3 Conversions ====
Bootstrap changed a lot underneath the surface from Version 3 to Version 4. Some controls were dropped, some where added. Default font sizes changed. The conversion will replace all the controls with Bootstrap 4 equivalents (where possible), but will not have perfect alignment. You'll need to tune your app.
All controls are converted, with the exception of controls which were dropped in Bootstrap 4.
These are:
<ul>
<li>Pageheader
<li>Panel
<li>Tabs
<li>Thumbnail
</ul>
The converter will replace these controls with a simple Container of the same name and dimensions.
You will need to replace these controls with a Bootstrap 4 control which works similarly.
Panel and Thumbnail can be replaced with the Card control.
Tabs can be replaced with the Navs control.
Pageheader can be replaced with the Label control.
<ul>
<li>Font sizes may need to be adjusted, especially if you are using a theme.
<li>The names of icons may be different. BS3 used Font Awesome, while BS4 uses Open Iconic. They have different names for icons.
<li>Controls with Header/Detail structures (like Checkbox) will need tweaking afterwards. BS4 uses different spacing than BS3.
<li>You will need to test different screen widths to find issues.
</ul>


==== Notes on jQuery Mobile Conversions =====
==== Notes on jQuery Mobile Conversions =====
This app converts all controls of a jQuery Mobile project to Bootstrap 4.


Users are invited to open issues, look at the code and improve the app.
The new controls will be styled as BS4 controls, which means they will have a different design
than jQuery Mobile. This is deliberate: the BS4 controls reflect current web design,
not what was being done in 2014, when JQM was last updated.
 
All controls are converted, with the exception of controls which have no matching Bootstrap 4 control:
These are:
<ul>
<li>Collapsible
<li>Panel
<li>Popup
<li>Tooltip
</ul>
 
All controls will have some differences. Listgroup does convert, but the Bootstrap 4 version does
have all the same features.
 
<p>The converter will replace these controls with a simple Container of the same name and dimensions.
You will need to replace these controls with a Bootstrap 4 control which works similarly.
 
You should test different screen widths to find issues.


=== Running the Framework Converter ===
=== Running the Framework Converter ===

Revision as of 22:35, 22 January 2019

The Framework Converter is an app which converts control frameworks to Bootstrap 4. It works on projects saved using AppStudio.

It can convert

  • jQuery Mobile 1.4 to Bootstrap 4
  • Bootstrap 3 to Bootstrap 4

The app itself is written in AppStudio, using Node libraries. It compiles into standalone apps for Windows and MacOS using Electron. The project is kept in a public repository in GitHub, called framework-converter.

Users are invited to open issues, look at the code and improve the app.

Notes on Bootstrap 3 Conversions

Bootstrap changed a lot underneath the surface from Version 3 to Version 4. Some controls were dropped, some where added. Default font sizes changed. The conversion will replace all the controls with Bootstrap 4 equivalents (where possible), but will not have perfect alignment. You'll need to tune your app.

All controls are converted, with the exception of controls which were dropped in Bootstrap 4. These are:

  • Pageheader
  • Panel
  • Tabs
  • Thumbnail

The converter will replace these controls with a simple Container of the same name and dimensions. You will need to replace these controls with a Bootstrap 4 control which works similarly. Panel and Thumbnail can be replaced with the Card control. Tabs can be replaced with the Navs control. Pageheader can be replaced with the Label control.

  • Font sizes may need to be adjusted, especially if you are using a theme.
  • The names of icons may be different. BS3 used Font Awesome, while BS4 uses Open Iconic. They have different names for icons.
  • Controls with Header/Detail structures (like Checkbox) will need tweaking afterwards. BS4 uses different spacing than BS3.
  • You will need to test different screen widths to find issues.

Notes on jQuery Mobile Conversions =

This app converts all controls of a jQuery Mobile project to Bootstrap 4.

The new controls will be styled as BS4 controls, which means they will have a different design than jQuery Mobile. This is deliberate: the BS4 controls reflect current web design, not what was being done in 2014, when JQM was last updated.

All controls are converted, with the exception of controls which have no matching Bootstrap 4 control: These are:

  • Collapsible
  • Panel
  • Popup
  • Tooltip

All controls will have some differences. Listgroup does convert, but the Bootstrap 4 version does have all the same features.

The converter will replace these controls with a simple Container of the same name and dimensions. You will need to replace these controls with a Bootstrap 4 control which works similarly. You should test different screen widths to find issues.

Running the Framework Converter

Reporting Issues

Modifying the Framework Converter