jQuery UI and jQuery Mobile: can they work together?

Report · Apr 06, 2018

Hello, all,

I'm setting to create my first responsive design project (an internal blog), and I've worked with jQuery UI before. But I've never worked with jQuery Mobile, and have read threads where UI and Mobile don't necessarily play well together. Granted, the threads are years old, and maybe things have changed. IDK.

But I wanted to get everyone's opinion on this. Can UI and Mobile work together? Or is there a better way to make a responsive design that works well on desktop, cell, and tablet screens?

V/r,

^ _ ^

Report · Apr 06, 2018

All I can tell you is that I used the jQuery UI accordion widget with jQuery mobile when it was introduced into Dw, (cs5.5/6) without problems. Since then never used either.

Report · Apr 06, 2018

What do you use for responsive design, now?

V/r,

^ _ ^

Report · Apr 06, 2018

I just use flexbox, but I do experiment with css grid layouts which i think is not as good for rwd, yet.

I say "yet", because it maybe the better solution once more real world examples of its use are available. Jury still out for me.

Report · Apr 09, 2018

pziecina wrote
I just use flexbox, but I do experiment with css grid layouts which i think is not as good for rwd, yet.
I say "yet", because it maybe the better solution once more real world examples of its use are available. Jury still out for me.

There are two major differences between flex and grid, namely

Flexbox is made for one dimensional layouts and Grid is made for two dimensional layouts.
Flexbox takes basis in the content while Grid takes basis in the layout.

To illustrate what I mean, the following quick mock-up shows the whole layout as grid (2 dimensional), the menu items as flex (1 dimensional)

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <style>
    .container {
      display: grid;
      grid-template-columns: repeat(12, 1fr); /* 12 grid columns for demo only */
      grid-template-rows: 50px 350px 50px; /* heights for demo only */
    }
    
    header {
      grid-column: span 12;
      display: flex;
      background-color: lightgreen;
    }
    
    aside {
      grid-column: span 2;
      background-color: lightcoral;
    }
    
    main {
      grid-column: span 10;
      background-color: burlywood;
    }
    
    footer {
      grid-column: span 12;
      background-color: lightgreen;
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <nav> <!-- needs further styling -->
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
      </nav>
    </header>
    <aside>Sidebar</aside>
    <main>Content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

Notice the absence of content for the grid layout and the presence of content for the flex layout.

Wappler, the only real Dreamweaver alternative.

Report · Apr 09, 2018

Wappler, the only real Dreamweaver alternative.

Report · Apr 10, 2018

The problem I find with css grid layouts is -

I have yet to see any grid layout examples that I cannot do with flex
flex layouts flow from desktop down to smartphone with less media-querys for layout than grid

As I say, much more experimentation is required with grids using real world layouts, before I can say grids are ready for use in rwd. They are ready for use if one is using a different layout for each device, (desktop, laptop, tablet, smartphone).

Just my opinion, and everyone should experiment for themselves, (maybe posting their examples in the forum).

Report · Apr 10, 2018

pziecina wrote
The problem I find with css grid layouts is -
I have yet to see any grid layout examples that I cannot do with flex

Very true, in fact I can expand on that by mentioning display: table and display: inline-block. I was careful not to mention floats and the old fashioned html tables.

Wappler, the only real Dreamweaver alternative.

Report · Apr 06, 2018

jQuery Mobile is for building a 1 page mobile app, not a web site.

If you want a responsive web site, look at Bootstrap 4 framework which uses the Flexbox model or as Paula said, manually code with Flexbox. Although you can use jQuery UI with Bootstrap, there's rarely a need for it since Bootstrap uses the jQuery core library and has ready-made classes for tabbed panels, accordions, modal windows, etc...

Bootstrap 4 Tutorial

Nancy

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 06, 2018

Thank you for the information, Nancy. I had no idea that Mobile was just for a single-page app.

I had read a blog whereby someone mentioned that Bootstrap is the most commonly used framework, but that didn't necessarily mean that Bootstrap was the "one size fits all" best choice for everyone. But I'm not sure about what I am going to require, so can't really decide if I should go with Bootstrap, Foundation, or any of the other hundreds of frameworks that are currently available. I looked at Skeleton for a personal project, and do not like it, at all.

V/r,

^ _ ^

Report · Apr 06, 2018

Don't forget to ask yourself where you want the site to go, not just now but in the future.

If what you do is never going past your local area then you only need consider local requirerments. One of my main concerns was always the footprint of each page, (how many bytes are transfered) that was because what I worked on was used all over the world, even Antarctica.

Note: Before anyone says they have ultra-superfast speeds in Antartica, remember they pay for it by the amount of data transferred. Conversely G3 is often more used in the sub continents than land line connections, where dial-up speeds are considered fast.

Report · Apr 06, 2018

Okay, I'm looking at Bootstrap. So, I need to have jQuery (already have that set), popper (never heard of it), and the Bootstrap files all loaded? What is popper.js?

V/r,

^ _ ^

Report · Apr 06, 2018

WolfShade wrote
What is popper.js?

GitHub - FezVrasta/popper.js: A kickass library to manage your poppers

"Popper.js is a positioning engine. Its purpose is to calculate the position of an element to make it possible to position it near a given reference element.

The engine is completely modular and most of its features are implemented as modifiers (similar to middlewares or plugins). The whole code base is written in ES2015 and its features are automatically tested on real browsers thanks to SauceLabs and TravisCI.

Popper.js has zero dependencies. No jQuery, no LoDash, nothing.
It's used by big companies like Twitter in Bootstrap v4, Microsoft in WebClipper, and Atlassian in AtlasKit."

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 09, 2018

Okay, I'm clearly not a CSS guy.

So, from what I can tell, you either compile Bootstrap (which I don't know how to do), or you can download basic .css/.js files and drop them into your project, but don't do as much as the self-compiled. AFAIK. I'm not seeing any other options except CDN, which will not happen (mostly because DEV is isolated from the internet.)

Also, I'm not finding any Bootstrap 4 examples (I found Bootstrap 3 examples, but many things don't work in v4.) Any suggestions on decent v4 tutorials?

V/r,

^ _ ^

Report · Apr 09, 2018

I use the entire package when developing projects. Even if I don't need everything, it's there until I'm certain I can remove it.

Bootstrap 3 uses LESS. Bootstrap 4 uses SASS. I think Bootstrap 3 is easier to work with when first creating custom builds. Bootstrap 4 is a bit more involved.

Bootstrap 3 Customize & Download

https://getbootstrap.com/docs/3.3/customize/

Bootstrap 4 Theming with SASS

https://getbootstrap.com/docs/4.1/getting-started/theming/

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Report · Apr 10, 2018

Thanks for the links, Nancy.

We are not using any package managers. Am I correct in assuming that I download the source files, place them in a folder called "bootstrap" in the root of my project, then create a folder called scss and make customizations from there?

V/r,

^ _ ^

Adobe Community

jQuery UI and jQuery Mobile: can they work together?

1 Correct answer