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,
^ _ ^
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
...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.
Copy link to clipboard
Copied
What do you use for responsive design, now?
V/r,
^ _ ^
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.
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
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.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
The problem I find with css grid layouts is -
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).
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.
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...
Nancy
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,
^ _ ^
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.
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,
^ _ ^
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."
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,
^ _ ^
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/
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,
^ _ ^