Blasphemy! Yes, I know, but I just had to do this. I wanted to see if it's possible to get Mastodon default user interface to resemble Twitter, but be a lot better than it ever was.
Please note that this started as a personal experiment for fun, but then got more serious.
See my original Mastodon post.
Read the blog post: The day I decided to build my own "Twitter".
- Why would anyone want Mastodon to look like Twitter?
- Features
- Installation for Mastodon instance admins
- Installation for regular users, contributing and testing
- Other tweaks and customizations
- FAQ
- Goals
Because you can? Let's face it, we're kinda used to it, Mastodon already resembles the birdsite. Twitter UI is not bad, it's just that it's not for everyone. Twitter (in my opinion) made some bad choices with the new UI for example with the typography, so in a sense I wanted to see if I could make Mastodon look like Twitter, but better.
This is why I have defaulted Mastodon deep purple colors in this "theme", if you will. If you really want the vanilla birdsite-look, please modify the colors yourself. Or go to the hellsite if you really love it so much.
Here are some of the UI things Mastodon Bird UI is trying to solve (read the Mastodon post):
- Dark version on mobile
- Light version on mobile
- Dark version on Linux desktop
- Dark version of the profile on Linux desktop
- Light version on Linux desktop
- Dark profile on macOS desktop
- Light version on macOS desktop
- Twitter colors on desktop (outdated)
As this is CSS-only, they are not really "features" but more like aesthetic changes.
- Respects the profile Site theme setting and sets dark/light based on this alone
- Missing alt text indicators (faded with "Alt text missing" text in the center)
- Subtle deep purple ribbon in the right corner for private messages
- CSS variables for everything
- Threaded replies (limited, see issue #4)
- Avatars on the left in feed view
- Unified transparent backgrounds
- Dark patterns for dropdowns and other pop overs like emoji picker
- Tinted deep purple, subtle beautiness
- Action bar in the bottom on mobile
- Micro-interaction in the like/favourite icon (see more about this)
- Circling boost animation
- Support for RTL languages
- Hide lists by default, show them on hover
- Carefully polished UI with hand picked/designed icons based on open source versions of Iconoir, Ionicons and Feather
- Copy the contents of style.css
- Install it as CSS to your assets (add it to your build process to app/javascript/styles and rebuild assets) or (preferred) use Custom CSS in the Appearance settings in your instance (https://yourinstance/admin/settings/appearance):
- Install Live CSS Editor (or any other extension like Stylus that allows you to inject CSS into web pages) or use Unite for macOS or use the user.js by eg
- Copy the contents of style.css
- Open extension and paste the CSS into the editor
- If you use Live CSS Editor, click 📌-icon so the styles will be remembered for the domain or if you want just to use it as needed, activate styles from the extension's popup
While Mastodon Bird UI works perfectly fine out of the box, there are some things you might want to modify to make it look even better.
If you like bigger link previews, please implement this.
Edit this line and recompile assets with yarn build:production.
If you're a polyglot like me, you can hide the translate link on other languages than default by adding this at the end of the Custom CSS (this example is for people who understand Finnish and German):
.status__content__text[lang="de"].translate ~ .status__content__read-more-button,
.status__content__text[lang="fi"].translate ~ .status__content__read-more-button {
display: none;
}There is currently no proper thread support in replies on Mastodon core. There's an issue about it that I have commented. You should also see the discussion on issue #4.
- Implement this. Tested and online at mementomori.social. This changes the HTML structure so that creating threaded lines is possible.
- Enable Mastodon Bird UI 1.3.8 or later
- It works!
There are two micro-interaction animations in this UI, both are inspired by the Twitter's original UI animation. The star is originally a work of a Twitter designer Brian Waddington. The heart is by Twitter design team. Both animations have been completely re-created by me, frame by frame. The star animation itself contains 100 hand made frames.
| Twitter likes | Twitter fave star (2015) |
|---|---|
 |
 |
If you like the heart, just remove everything between Star animation micro-interactions start (depends on the heart icon above) and Star animation micro-interactions end.
I get many questions about this UI, so here I'm going to answer to them.
Of course! This is all open source, customizable and extendable. You can fork this repo and make changes to the CSS. You can also use the Custom CSS box in {yourinstance.social/admin/settings/appearance} to add your own styles directly.
Not everything is possible via CSS only. In fact, some of the tweaks I had to do to the Mastodon core, see my fork here and the tweaks above.
However, even if they were possible, I won't implement all requests. My opinionated choices are not the only answer, but I'm not willing to add every possible customization to this UI as default. I want to keep it simple and extendable.
See the end of this comment.
I'm not a software developer. I'm a front end developer (and a bit of a designer) and my expertise is in CSS, UX and HTML. I don't know how to create a Mastodon app for Android, iOS or web and while I know a bit of python, JavaScript, Ruby and other programming languages, I don't have time and patience to create an app from scratch right now.
There are other people who are working on magnificent apps for Mastodon, so I'm not going to reinvent the wheel. I simply like the Twitter-ish UI and Mastodon default web back-end and I want to have these combined on my instance. As CSS is the language I live and breathe daily, it's really easy and fast for me to create a UI like this.
Also, Mastodon web UI works as an app already. See my answer here.
See the previous answer. Mastodon Bird UI is not an app, it's a CSS file that you can use with any Mastodon instance. You don't need to run a separate instance just for this UI and perhaps you shouldn't either.
If you really would want this to run in a separate URL, you could in theory set up another nginx host for a subdomain and just use ngx_http_sub_module to load up a CSS file. I haven't tried this and it might not be even possible, but it's worth a try.
It's a choice. I don't use the advanced web interface myself, it's too noisy for me. It would also complicate the CSS file a lot and I'm currently not willing to do that.
It would mean that I would have to go through every single element all over again and make sure the advanced web interface is styled properly. It would also make the CSS file very large and I want to keep the single CSS file as maintainable as possible.
Similar answer than to the question above. We don't spend much time in the admin interface and it's not a priority for me to style it. It would mean too much work and it's not worth it right now.
- CSS only. This means some pseudos and modern CSS hacks. The intent is to have the code base as simple and extendable as possible. The styles should be easily modifiable. Ready-made code works when placed in Custom CSS box in {yourinstance.social/admin/settings/appearance}
- Dependency free. No JavaScript, no build process, no nothing. Just plain CSS. Linting is optional and just here to make sure the code quality is good.
- Single-column layout only. This experiment is not meant for advanced layout.