One of the most frequent questions we heard from you is how does Mobiscroll look on desktop? We mostly have mobile examples, don’t talk too much about bigger screens and interaction with a mouse pointer, but we have an answer for you below…

Super happy to announce the latest version of Mobiscroll. This is probably the biggest yet since version 4.0 and it comes packed. While our roots are in mobile, and we can comfortably call our products mobile-first we have now officially made a big step towards being really desktop friendly and completely responsive. I am not just talking about positioning the components, but really making the user experience exceptional.

There are a number of new features and components that make this possible.

Introducing our fully responsive grid layout

If you’ve ever used a grid system before or you’re familiar with the Bootstrap 12 column grid, you’ll find yourself at home with the new Mobiscroll grid layout. It comes with everything you need to build fully responsive layouts ranging from mobile to extra-large screens through five breakpoints.

Built with flexbox it features vertical and horizontal alignment of content blocks, column offsets, push & pull for fine-tuning the responsive rendering and dynamic columns for content you are not sure how big it will grow.

Give the demos a try and play around, download them and resize the window to see everything in action. The grid layout is part of Mobiscroll Lite, which means you can download it for free.

Desktop components

Scrollbars, different modes for positioning, updated look & feel and a fitting way to interact with components on desktop. Those are the things that come on top of the polished mobile components and make up the desktop rendering.

We’re introducing a new setting called touchUi, which is true by default. Turning that off will signal to Mobiscroll that it should render the components in desktop mode. The same settings work – there might be some that don’t make sense on desktop – with the idea to simply and easily set up desktop rendering without the need to do a totally separate initialization or use different components.

Head on over to the demos and give them a try. Components that render as scroll-wheels on mobile are now scrollable with a nice scrollbar on desktop too.

Responsive breakpoints

The third component for the full desktop experience is the new responsive setting. Based on five predefined, commonly used breakpoints that you can override or even specify custom widths, it is a breeze to configure a fully responsive behavior.

It is very simple now to have a bottom positioned scroller component on mobile, while having a dropdown control on desktop. Or have a date & time scroller on mobile and a calendar component with a time picker on desktop. Mix and match settings however you need to make the experience better for your users, and pass the collection in the responsive setting.

responsive: {
    xsmall: {
        controls: ['date']
    },
    small: {
        controls: ['calendar'],
        display: 'bubble'
    },
    medium: {
        controls: ['calendar'],
        months: 2,
        yearChange: false,
        touchUi: false
    }
}

The responsiveness is taken into account on screen resize and even orientation change, you don’t need to worry about re-rendering, everything will work out of the box.

Additionally we made a couple of improvements to the demo page. If you see a little responsive icon for certain demos, it means the demo panels can be resized right from the page. You can of course open the demos in full-screen and manually drag to the size you would like. Head on over to the demo page and see how they look. While you’re at it, also enjoy the slightly redesigned demo page and let us know how you feel about it.

Collapsible panels and accordions

With the new collapsible feature of cards and form groups you can create accordions and collapsible panels. Accordions are collection of collapsible containers only allowing a single panel to be open.

Render content that is hidden or visible by default and trigger the collapse and expand actions dynamically through the API or let users manually do it.

For the cards the card header acts as a “collapse-to state” and in case of form groups the group header is the content which is visible when the panel is closed.

See collapsible and accordion cards in action and check out the these demos on breaking up long forms into groups and showing frequently asked questions, one at a time.

New languages

We have two new translations: Thai and Ukrainian, which pushes the number of built-in supported languages to 37.

We’ve renamed Widget to Popup

We believe that the name Popup is more fitting for what the component stands for. It is there to solve all your pop-up and pop-over needs with custom content or functionality that is built from other components. Widget didn’t communicate that clearly and was a bit ambiguous. So starting from now you should use popup when you initialize such a component. The old syntax will still work until probably Mobiscroll 5, but it’s never too early to get prepared.

We’re just getting started

As for our plans, what I can share right now is that we’ll be investing more into making Mobiscroll the go-to tool for building responsive apps for both mobile and the web. We heard it and are here to help you make great products across a multitude of devices and screens.

To learn more, explore the demos, browse the documentation and see the changelog. We can’t wait to hear about what you’ll build with the new tools and components.

As always, this release is available for download to all customers who have an active maintenance. You can also update through NPM if that is how you get your libraries.