Highlighted

jQuery UI and jQuery Mobile: can they work together?

LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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."

Views

635

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

jQuery UI and jQuery Mobile: can they work together?

LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Adobe Community Professional
Correct answer by Nancy OShea | Adobe Community Professional

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."

Views

636

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 06, 2018 0
LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 1
LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

What do you use for responsive design, now?

V/r,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 1
Adobe Community Professional ,
Apr 06, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 1
LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
LEGEND ,
Apr 06, 2018

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 0
Adobe Community Professional ,
Apr 06, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 06, 2018 1
LEGEND ,
Apr 09, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2018 0
Adobe Community Professional ,
Apr 09, 2018

Copy link to clipboard

Copied

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, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2018 0
Adobe Community Professional ,
Apr 09, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2018 0
Adobe Community Professional ,
Apr 09, 2018

Copy link to clipboard

Copied


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 09, 2018 0
LEGEND ,
Apr 10, 2018

Copy link to clipboard

Copied

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2018 0
Adobe Community Professional ,
Apr 10, 2018

Copy link to clipboard

Copied

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.


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2018 1
LEGEND ,
Apr 10, 2018

Copy link to clipboard

Copied

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,

^ _ ^

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2018 0