Arc Browser Boosts – How To Tweak Website CSS
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: https://arc.net/
Daring Fireball: https://daringfireball.net/
Daring Fireball Arc Boost: https://arc.net/boost/67EB8124-2215-4...
Daring Fireball Arc Boost Code: https://codepen.io/ZoranJambor/pen/zY...
In-Depth Guide to CSS Logical Properties: • In-Depth Guide to CSS Logical Properties
In-Depth Guide Guide to grid-template-areas: • The easiest way to get started with C...
Subscribe to CSS Weekly Newsletter:
💌 https://css-weekly.com/
Help support my channel
👨🎓 Get a course: https://masteringlinting.com/
🪧 Buy a CSS sticker pack: https://stickers.css-weekly.com
💖 Support me on Patreon: / cssweekly
Keep up-to-date with CSS Weekly:
🐦 Twitter: / @cssweekly
🎶 TikTok: / cssweekly
🎇 Instagram: / cssweekly
📘 Facebook: / cssweekly
Keep up to date with what I'm up to:
👨💼 Blog: https://zoranjambor.com
💼 LinkedIn: / 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