Bootstrap - Responsive websites - responsive-design

I was going to look into Bootstrap for developing websites. For those that use it, does Bootstrap do most of the responsive coding for you or makes it any easier?

Bootstrap does include classes to help you build responsive websites. It even includes some nice features for responsive navigation bars, etc. So yes it does make it a lot easier to build responsive websites.
I would suggest to just have a look at the docs. You can start here and here and see if you like it.

Related

create web app that works on deskop and mobile

i want to create a web app that works on a desktop and a mobile. i kinda have one at the moment but doesnt work on mobile well. Whats the best way around this? i know flash is being phrased out and java doesnt work on all mobile devices. I'm not not good with css, etc. This is current web app. http://www.acdcpowermonitor.com/Systemlive.aspx?systemid=1000000001&AspxAutoDetectCookieSupport=1 i want it to just work on a webpage.
hope you can help
regards
jeremy
you can make your web application responsive. bootstrap is a great tool to that with minimum css knowledge.
Yes you can use bootstrap
Ref- https://www.w3schools.com/bootstrap/bootstrap_get_started.asp
And use eclipse if u want else Notepad++
You can use
Bootstrap
Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first web sites.
Bootstrap is completely free to download and use!
latest version bootstrap#4.0.0-beta
https://getbootstrap.com/docs/4.0/getting-started/introduction/
and you can use for this
Grid system
this is a powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
you can learn it
https://getbootstrap.com/docs/4.0/layout/grid/
The Bootstrap grid system has four classes:
xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)
The classes above can be combined to create more dynamic and flexible layouts.
Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.
look at https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

How to change old php site into responsive site

Please let me know how to convert old php site - www.cnc4milling.com into a responsive web. Site using php and css
Your replies will be very appreciated
Best Regards
There is no such thing as converting a site through a tool, or simple technique.
Seeing that site, it seems like you may only rewrite your HTML and CSS code. Try using CSS Flexbox or Twitter's Bootstrap to achieve responsiveness. There are more ways then those I speak of, each with it's own benefits. Study all of those for better understanding of your needs.
And good luck!

How to make yui2 responsive

I am using yui2 (I know it is archived now but I had hands on experience with this version and did not have time to learn yui3 due to tight deadline) in some of the pages of my project.The pages without yui listing are made responsive for mobile view using responsive css.But now the pages with yui2 design are not responsive.I want to know if I can add lines of code so that it can become responsive.Please help.
YUI or not, you can use Pure CSS grids: http://purecss.io/grids/#pure-responsive-grids
I found the solution:
follow steps given here:https://css-tricks.com/responsive-data-tables/
in the css provided replace table,td etc with #uryuidivname table,#urdivname td

OnsenUI vs Ionic Framework

I want to start developing a mobile hybrid app using angularjs, css3 and html5. Was searching for a framework and found these two. Both are looking very nice however I was not able to get a good comparison between both of them. Can anyone please list down pros and cons for both.
A comparison between them in terms of scalable, out of the box components, speed and compatibility with Angular and devices targeted will be very helpful
One year has passed since both frameworks were released. Onsen UI is currently in stable 1.2 version while Ionic is in the last release candidate state.
I have worked with both of them so let me give you a short overview, I also wrote a much larger blog article, you'll find it at the end of this answer.
I won't go into much details about the core framework; if you have a previous AngularJS knowledge you will easily transition to Ionic or Onsen UI.
Both frameworks are built around AngularJS and they heavily depend on directives, you can also easily build your custom directives. Onsen UI also features a jQuery support (unnecessary if you ask me).
Both frameworks support Android 4+, iOS 6+ (some features are available on Android 2.3), Onsen UI also officially supports Firefox OS and desktop browsers. Ionic don't have an official desktop support, but it will still work (it will not be pretty, imagine ).
Ionic currently don't support Windows Mobile platform (it will have it in the future); Onsen UI support is currently in development (since November 2014).
Both frameworks support some kind of splitview feature so they can be used for table development.
Both frameworks have a distinctive beautiful looking flat UI. I prefer Ionic over Onsen UI look and feel, but this is a matter of personal taste. Both default themes look iOS 7 like.
Onsen UI supports native looking themes for Android and iOS. Ionic framework uses the same theme for all platforms, but some features will depend on the platform (for example tab look and feel)
Both frameworks have a working theme builder.
Ionic supports SASS while Onsen UI is built around Topcoat CSS library.
Both frameworks have a large widget support (directives)
Onsen UI has a better documentation. It is separated at two different locations. First one is “Components” where you can see different directives and each one has a working example you can use and replicate. Second part is a “Guide” where you are guided through the application creation process.
Ionic has a disorganized documentation (heavily fragmented). It lacks a real “getting started” tutorial, even if you have previous AngularJS experience. It shows you pieces, but not how to connect them correctly.
On the other hand Ionic has much larger community so you will easily find problem solutions.
Ionic framework has a great official forum + large StackOverflow community. At the same time, Onsen UI uses only StackOverflow as a help center (I would call this a fail).
Onsen UI has an HTML5 IDE called MONACA IDE (great tool), Ionic IDE is currently in production; you can participate in beta test.
Ionic has a growing 3rd party plugin community (for example date picker); I couldn't find any 3rd party Onsen UI plugin
I wrote a much larger article covering Ionic / Onsen UI changes, find it here.
Since both frameworks are pretty new and not very popular (yet!), I don't think anybody has taken the time to do an extensive comparison between the two. I don't even think the final set of out of the box components is determined by the developers themselves yet, active development is still going on.
As for compatibility, hybrid apps run in the native browsers of the devices where they are installed on. Both frameworks need CSS3, so old phones will never be supported by either of the frameworks.
The OnsenUI-tag here on StackOverflow is the only support OnsenUI offers (currently), and at the moment of writing there are 0 questions/answers. Ionic has a very active forum on their website + some questions/answers here on SO.
I think having an active community backing up a framework will eventually lead to a better framework. Therefore I'd go for Ionic. Personally, I find Ionic's standard-design more appealing as well, but you should judge that for yourself.
Ionic
more lean to Angular style like routes,controllers and template and it's structure is kind of complicated in first hand.
command like "ionic start myApp tabs" still don't available in onsenUI
Material Design like "Cardboard" are available
OnsenUI
simpler structure, easy to start
couple with Monaca IDE, some of features are only available only if you use Monaca. otherwise you have to create things by yourself.
supported ios8 design recently
Ionic has a more mature feature and CSS component set and out of the box. Injectable delegate services, representing the UI elements (directives) gives you more control over UI/UX interactions. The development community is (currently) very active and it's gaining traction.
I cannot properly speak to speed/performance between the two but know both are optimized for mobile.
As I develop more, I will report back with comparisons. Good luck.
Just started using ionic after some time native development. Must seriously say it has some great cli features! For example you can start your project from a gist in my opinion this is nice to have for poc's
Havent been able to test everything but what i've seen really impresses me!
It's well documented in there own way, active community and it keeps getting better.
Just wanted to share my thoughts for what it's worth
Im working in Ionic Framework during 1 year with a real project, i have created a game with Ionic, its very special because hybrid app is not best choice if you want create game. When you develop a game you need performance !
However if you develop simple game with few animation, its good.
Here is my game in playstore, its a memory game "Memory Party" :
https://play.google.com/store/apps/details?id=fr.jhaccoun
Why Ionic is a good choice :
very very very good documentation (tutorial, forum, article,...)
stable (ionic 1), you can find many apps in store
Easy to develop (ionic come with many tools to help the developer, you can develop and test in live in your phone without deploy thanks live reload
Many cordova modules are available
you don't need mobile skills, just angularjs, html, css...
Ionic provide beautiful components and you can custom the components if you like
I found Ionic the best for some reasons, like their community support and the documentation. I am still evaluating the onsen from a long time but still havent found the one unique thing that will drift me towards it compared to Ionic

Web application on a mobile platform

First, my question might sound like a duplicate, but I have been going through a lot of questions on this forum and haven't found the answer to what I am looking for.
I have an existing web application built using Java, struts2 and jsps. I want the web site to be mobile - friendly. I am not looking at developing native apps right now. I want the mobile-site to have a native-app like appearance. So if a user goes to the browser on a mobile and accesses my site it should have that native look and feel. So I looked at Sencha touch 2 to begin with. I am new to Mobile development and would appreciate help in understanding how to go about evaluating Sencha touch 2 as a viable option. I see from examples that in ST the UI is mostly built using ExtJs javascript.
My questions are the following
Is there a way to port my existing jsps and html to the mobile view , without building them from scratch?
Since the css for the site is currently built for 'screen' media, this will obviously have to be worked out , but does Sencha Touch
provide any functionality of using an existing css and customising it
for a mobile device?
Appreciate your help,
Unfortunately, the answer to your first question is no.
Java/JSP and Javascript are totally different in essence. No convention could be made to convert between these two.
For the second one, SASS/SCSS might be the things you're looking for: http://sass-lang.com/. It's because Sencha Touch components' CSS properties are build through SCSS files. You can take advantage of these. For further ideas, see: http://www.sencha.com/blog/an-introduction-to-theming-sencha-touch

Resources