[](http://badge.fury.io/js/brim) [](http://badge.fury.io/bo/brim)
Brim enables minimal-ui for the iOS 8.
In iOS 7.1, a property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars in Safari as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
The minimal-ui viewport property is no longer supported in iOS 8.
The minimal-ui itself is not gone. User can enter the minimal-ui with a "touch-drag down" gesture.
There are several pre-conditions, such as that there has to be enough content to enable user to scroll. Furthermore, there is no way of calculating the dimensions of the minimal-ui using the screen variables, and thus no way of telling when user is in the minimal-ui.
Brim tackles all of the issues associated with determining when user is in the minimal-ui, a method of instructing user to enter the minimal-ui, and a mechanism to lock user in the minimal-ui following the spec defined in the iOS 7.1.
There are three element required to make Brim work:
brim-treadmill.<body>. It has to have ID brim-mask and no styling that would affect the position or the dimensions of the element.<body>. It has to have ID brim-main and no styling that would affect the position or the dimensions of the element.When page is loaded, Brim will create a treadmill. The role of treadmill is to make sure that the page content height is always greater than the viewport height. This ensures that user can enter the viewport and viewport continues to persist if you reload the page.
Upon loading the page or after changing the orientation, Brim is using Scream (developed as part of this project) to detect if page is in the minimal-ui view (page that has been previously in minimal-ui and has been reloaded will remain in the minimal-ui if content height is greater than the viewport height).
For documentation purposes it is worth noting that you cannot use Scream to detect if device is in minimal-ui straight after the orientationchange event because window dimensions do not reflect the new orientation until the rotation animation has ended. You have to attach a listener to the orientationchangeend (developed as part of this project) event.
When page is in the minimal-ui, Brim will disable scrolling of the document (it does this in a safe way that does not affect the contents of the main element). Disabling document scrolling prevents accidentally leaving the minimal-ui when scrolling upwards. As per the original iOS 7.1 spec, tapping the top bar brings back the rest of the chrome.
When page is in the full view, Brim will show the mask element.
<!DOCTYPE html>
<html>
<head>
<script src="./bower_components/scream/dist/scream.js"></script>
<script src="./bower_components/brim/dist/brim.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var scream,
brim;
scream = gajus.Scream({
width: {
portrait: 320,
landscape: 640
}
});
brim = gajus.Brim({
viewport: scream
});
});
</script>
</head>
<body>
<div id="brim-mask">
<!-- Content displayed to the user when in full view. -->
</div>
<div id="brim-main">
<!-- Content displayed to the user when in minimal view. -->
</div>
</body>
</html>
If mask element does not have active content, it is advisable to disable pointer events:
#brim-mask {
pointer-events: none;
}
Do not set style that would change position or dimensions of the mask or the main element.
Do not style the treadmill.
brim.on('viewchange', function (e) {
// Invoked when view changes.
// @var {String} 'full', 'minimal'
e.viewName;
});
Using Bower:
bower install brim
Using NPM:
npm install brim
The old-fashioned way, download either of the following files:
FAQs
View (minimal-ui) manager for iOS 8.
We found that brim demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
After Matplotlib rejected an AI-written PR, the agent fired back with a blog post, igniting debate over AI contributions and maintainer burden.
Security News
HashiCorp disclosed a high-severity RCE in next-mdx-remote affecting versions 4.3.0 to 5.x when compiling untrusted MDX on the server.
Security News
Security researchers report widespread abuse of OpenClaw skills to deliver info-stealing malware, exposing a new supply chain risk as agent ecosystems scale.