Very nice video by Sam Selikoff in which he sets up a web manifest to make his site feel more app-like. Great production quality. There are some tweaks I’d suggest though: Fixate the header using position: sticky; instead of position: fixed;. No need for that extra margin on the content then. Don’t set the header […]
Tag Archives: ui
React Native Bottom Sheet (Slide Up Panel)
A common pattern in Mobile Apps is to have a Bottom Sheet / Slide Up Panel. React Native Slack Bottom Sheet is a wrapper around Slack’s native PanModal component for iOS. import SlackBottomSheet from 'react-native-slack-bottom-sheet'; <SlackBottomSheet topOffset={100} unmountAnimation={false} initialAnimation={false} presentGlobally={false} backgroundOpacity={0} allowsDragToDismiss={false} allowsTapToDismiss={false} isHapticFeedbackEnabled={false} blocksBackgroundTouches={false} interactsWithOuterScrollView > <View style={StyleSheet.absoluteFillObject}> <ScrollView> <Lorem /> </ScrollView> </View> </SlackBottomSheet> […]
Prevent content from being hidden underneath a fixed header by using scroll-margin-top
If you’ve ever implemented a design with a fixed header, you’ve surely had this problem: You click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That's totally fine, until you have a position: fixed; header at the top of the page obscuring the h3 you're trying to link to! Fixed […]
Craft.js – A React framework for building drag-n-drop page editors.
Page editors are a great way to provide an excellent user experience. However, to build one is often a pretty dreadful task. Craft.js solves this problem by modularising the building blocks of a page editor. It provides a drag-n-drop system and handles the way user components should be rendered, updated and moved – among other […]
Smooth Scrolling Sticky ScrollSpy Navigation
Yesterday evening I was working on some documentation pages. The page layout is quite classic, as it consists of a content pane on the left and a sidebar navigation on the right. Looking for a way to make the page less dull I decided to add a few small things to it: Smooth Scrolling when […]
Fundamentals of Hierarchy in Interface Design
Visual hierarchy is the order in which the user process information by importance. In interface design, like in any other form of design, this concept is necessary to be functional at sight. With the correct use of hierarchy, the mind can group and prioritize elements to give them a specific order, which facilitates the understanding […]
How to Design Delightful Dark Mode Themes
When done well, dark themes have many benefits. They reduce eyestrain. They are easier to read in low light. And, depending on the screen, they can greatly reduce battery consumption. However, it is difficult to create a delightful dark theme. We cannot simply reuse our colors or invert our shades. If we do, we will […]
Blocks UI – A JSX-based page builder
A JSX-based page builder for creating beautiful websites without writing code. Blocks comes with built-in components that are carefully designed and implemented with Theme UI. Blocks UI →
“Hold to confirm” Button
Ooh, I like the organic feel on this “Hold to Confirm” button: Nice combination of CSS Custom Properties, CSS Transitions, and SVG Animations using stroke-dashoffset/stroke-dasharray.
Building Better Interfaces, a talk by Hakim El Hattab
At CSS Day 2019, I was fortunate to see Hakim El Hattab bring his talk Building Better Interfaces. A recording of his talk – and all other talks – are available on YouTube: This session is a deep-dive into the areas of interface design that Hakim has specialized in for over a decade—interactivity and animation. […]