Tutorials

🔥 How to Customize the Layout of Daily?

webdev, product

Users have different preferences when it comes to the user interface (UI) of a product. For instance, the dark mode has been quite famous and we have seen almost every company and product jumping to this bandwagon. And users do love the dark mode. ♥️

At Daily, we invest a great amount of time designing and validating the user experience (UX) and the UI. That's why at Daily, you will find way more than just Dark/Light modes. You can pretty much customize the complete look and feel of it.

If you haven't been playing around with Daily, this guide will help you make your way through layout customization in it.

🎨 Layout Options

Layout options decide how the content is displayed in Daily. There are two modes in the Daily:

  • Card View
  • Insane View

Both of them are explained below.

🃏 Card View

It's not the card view as depicted by the emoji. Rather, it's a card containing the image of the content, the title, and the other details. It is the default view of Daily.

Apart from the title, it contains UI components with details like source name, tags, total read time, bookmark action, and a report menu. Below is how it looks:

Daily Card View

👨‍💻 Insane View

The insane view is more like a list view. It displays all the content in the form of list items and you can see more content on the same screen. As compared to the card view, it only lacks the image of the content.

Below is a preview of insane mode:

Daily Insane View

⚙️ Configure Layout

Changing Layout in Daily is pretty easy. In fact, it's just two clicks away. Click on the Layout Settings option on the top and select your layout under the Layout option. Yes, we have a GIF for you! 😉

Change view in Daily

🧐 More Customization Options

Apart from the layout customization, there are other options available to you in Daily as well. Below is a list of those useful features and their usage:

🗂 Spaciness

This feature allows you to control the space between/around the individual items in card view and around the items in the list view. There are three options available to you and their names are self-depictive:

  1. Eco — Least spacing
  2. Roomy — Moderate Spacing
  3. Cozy — Maximum Spacing

Again, like the layout options, it is super easy to customize the spiciness as well. Go to the Layout Settings in Daily and find the options under the Spaciness heading.

Change spaciness in Daily

✨ Card Animations

By default the cards have animation. You can see those when you hover over the cards. If you don't like those animations, you can also disable them.

To disable the animations, go to the Layout Settings and toggle the Card Animations option to disable it. Once you disable it, you will only see the zoom-in effect for the image not for the card itself.

Yes, we have a GIF for you.

Switch Card Animation

🌓 Dark/Light Mode

Last, but definitely not least is the option to switch between dark and light mode on Daily. To switch the mode, again go to the Layout Settings and toggle the Light Theme option. By default, it's the Dark Theme, we know you love Dark Mode! 💯

Switch Daily Themes

🙌 Wrap Up!

Oh, wrap! It's was a detailed post with appropriate images/GIFs to help you easily understand and customize your Daily layouts.

If you have any issues, feel free to reach out to us or drop your questions in the comments below.


👋 Follow us on Twitter to stay up-to-date!

Thanks to Daily, developers can focus on code instead of searching for news. Get immediate access to all these posts and much more just by opening a new tab.

Daily Poster

Featured Posts

Never search for dev news again.

Get daily.dev

Try for free

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.