Uploaded January 2024 | Updated September 2026, 1 week ago
An in-depth guide on using Boosts in Arc browser (@TheBrowserCompany) to tweak CSS of websites to your own needsโon a practical example of adjusting Daring Fireball (@daringfireball) to become mobile responsive using CSS Grid. You'll learn how to use Arc Boots, Changes Drawer in DevTools, how to easily set up mobile-responsive CSS Grid, and more.
๐ Links
Arc browser: arc.net
Daring Fireball: daringfireball.net
Daring Fireball Arc Boost: arc.net/boost/67EB8124-2215-4755-9BF5-9AAAF8538B7C
Daring Fireball Arc Boost Code: codepen.io/ZoranJambor/pen/zYbRJXj
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
In-Depth Guide Guide to grid-template-areas: youtu.be/sAsX9e2NzZ4
Subscribe to CSS Weekly Newsletter:
๐ css-weekly.com
Help support my channel
๐จโ๐ Get a course: masteringlinting.com
๐ชง Buy a CSS sticker pack: stickers.css-weekly.com
๐ Support me on Patreon: patreon.com/cssweekly
Keep up-to-date with CSS Weekly:
๐ฆ Twitter: twitter.com/@cssweekly
๐ถ TikTok: tiktok.com/@cssweekly
๐ Instagram: instagram.com/cssweekly
๐ Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
๐จโ๐ผ Blog: zoranjambor.com
๐ผ LinkedIn: linkedin.com/in/zoranjambor
๐ย Chapters
00:00 Intro
02:28 How Arcย browserย Boosts work
03:43 How to tweak code in Arcย browserย Boosts
03:56 How to show/hide sidebar in Arc Browser
04:15 How to open Developer Tools from Arc Boost
05:09 How to copy CSS changes from DevTools to Arc Boost
06:50 How to tweak the fixed layout sizing in DevTools
08:50 How to prepare absolute layout for CSS Grid
10:32 How to set CSS Grid using grid-template-areas
12:22 How to set optimal line lengths in CSS
13:24 How to add gap between CSS Grid elements
13:55 How to tweak sizing of CSS Grid columns
15:10 Howgrid switch reasoingn - adjust mobile version
15:39 How to copy CSS changes from DevTools to Arc Boost
16:22 How to fix sidebar margin problems
17:00 How to adjust layout for mobile responsive version
18:57 How to adjust sidebar for mobile responsive version
19:45 How to adjust ad for mobile resposive version
22:06 How to adjust logo for mobile responsive version
23:32 How to adjust search & copyright for mobile responsive version
25:08 How we tweaked Daring Fireball in Arc Boost
25:35 Why should Arc support Boosts on mobile
26:00 Conclusion
- Zoran Jambor
#css #arcbrowser
An in-depth guide on using Boosts in Arc browser (@TheBrowserCompany) to tweak CSS of websites to your own needsโon a practical example of adjusting Daring Fireball (@daringfireball) to become mobile responsive using CSS Grid. You'll learn how to use Arc Boots, Changes Drawer in DevTools, how to easily set up mobile-responsive CSS Grid, and more.
๐ Links
Arc browser: arc.net
Daring Fireball: daringfireball.net
Daring Fireball Arc Boost: arc.net/boost/67EB8124-2215-4755-9BF5-9AAAF8538B7C
Daring Fireball Arc Boost Code: codepen.io/ZoranJambor/pen/zYbRJXj
In-Depth Guide to CSS Logical Properties: youtu.be/cV9JhEV4Ll0
In-Depth Guide Guide to grid-template-areas: youtu.be/sAsX9e2NzZ4
Subscribe to CSS Weekly Newsletter:
๐ css-weekly.com
Help support my channel
๐จโ๐ Get a course: masteringlinting.com
๐ชง Buy a CSS sticker pack: stickers.css-weekly.com
๐ Support me on Patreon: patreon.com/cssweekly
Keep up-to-date with CSS Weekly:
๐ฆ Twitter: twitter.com/@cssweekly
๐ถ TikTok: tiktok.com/@cssweekly
๐ Instagram: instagram.com/cssweekly
๐ Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
๐จโ๐ผ Blog: zoranjambor.com
๐ผ LinkedIn: linkedin.com/in/zoranjambor
๐ย Chapters
00:00 Intro
02:28 How Arcย browserย Boosts work
03:43 How to tweak code in Arcย browserย Boosts
03:56 How to show/hide sidebar in Arc Browser
04:15 How to open Developer Tools from Arc Boost
05:09 How to copy CSS changes from DevTools to Arc Boost
06:50 How to tweak the fixed layout sizing in DevTools
08:50 How to prepare absolute layout for CSS Grid
10:32 How to set CSS Grid using grid-template-areas
12:22 How to set optimal line lengths in CSS
13:24 How to add gap between CSS Grid elements
13:55 How to tweak sizing of CSS Grid columns
15:10 Howgrid switch reasoingn - adjust mobile version
15:39 How to copy CSS changes from DevTools to Arc Boost
16:22 How to fix sidebar margin problems
17:00 How to adjust layout for mobile responsive version
18:57 How to adjust sidebar for mobile responsive version
19:45 How to adjust ad for mobile resposive version
22:06 How to adjust logo for mobile responsive version
23:32 How to adjust search & copyright for mobile responsive version
25:08 How we tweaked Daring Fireball in Arc Boost
25:35 Why should Arc support Boosts on mobile
26:00 Conclusion
- Zoran Jambor
#css #arcbrowser
