Maybe THE UI design of 2021
What countless writers on Medium are writing about and users of Apple's messenger call their UI update is what VS code modders dubbed "vscode-frosted-glass-theme": The design principle I am talking about is called Glassmorphism and from big tech to smaller outlets everyone seems to play with it. The effect itself is usually based on creating a semi-transparent frosted glass look based on the CSS property backdrop-filter and creates looks like this:
Have at it
If you want to explore this trend, feel free to explore a little (and free) starter template:
gaudiamus-css
/
glass
template / demo of a gaudiamus design
Glass
Very simple gaudiamus example to build on top of.
Use it:
- fork this repository
- clone & enjoy
Requirements
- SASS (dartSass, as libSASS is deprecated and does not support some used features)
First steps
The file style/_variables.scss is a good starting point.
It includes common Gaudiamus variables and controls values like
colors, breakpoints etc.
Files
_buttons.scss
Handles button & icon behavior
_card.scss
Handles card glassmorphism
_effects.scss
Masking, clipping & scrollbar
_form
HTML form elements (input, textarea, select, checkbox)
_menu
Navbar & mobile menu
_variables
SCSS-variables
style.scss
Main stylesheet & font setup
components/toggle.js
VanillaJS toggle e.g. for menu behavior. Should work nicely with all frameworks.
You can fork & clone and directly play with the HTML, but the true power comes with the included sass files for customization.
Beginner friendly
This template is built on gaudiamus and is therefore a great way to learn the ins and outs of CSS preprocessing with SASS, a powerful and useful tool when it comes to creating websites, designs & behavior.
Top comments (0)