[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc":671,"blog-author-\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc":1238,"i-material-symbols:arrow-back-rounded":1253},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,296,300,303,307,311,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":676,"buttonUrl":676,"category":1224,"date":1225,"description":1226,"draft":1227,"editorsPick":1227,"extension":1228,"featured":1227,"image":1229,"imageAlt":1230,"meta":1231,"navigation":32,"ogImage":676,"ogImageAlt":676,"path":1232,"seo":1233,"stem":1234,"tags":1235,"__hash__":1237},"blog\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc.md","Building Responsive UI with CSS calc()","Aleru Divine","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fauthor.jpeg",null,"aleru-divine",{"type":679,"value":680,"toc":1208},"minimark",[681,690,695,701,706,709,714,724,733,739,743,758,763,769,775,780,784,790,796,814,818,824,830,838,840,845,851,858,863,869,875,880,887,891,897,903,909,913,919,923,930,933,939,945,956,962,965,969,972,976,982,988,992,998,1004,1006,1012,1015,1019,1022,1028,1032,1038,1044,1048,1054,1060,1064,1070,1074,1080,1086,1092,1098,1102,1108,1115,1121,1124,1130,1132,1138,1144,1148,1154,1160,1164,1170,1174,1183,1189,1193,1202],[682,683,684,685,689],"p",{},"This tutorial guide explores using the CSS ",[686,687,688],"code",{},"calc()"," function. Perhaps you’ve never tried it, or you’ve used it, but ran into some issues along the way. This guide will help you build responsive user interfaces and quickly adapt to different screen resolutions.",[691,692,694],"h2",{"id":693},"a-quick-introduction-to-css-calc","A Quick Introduction to CSS calc()",[682,696,697,698,700],{},"The CSS ",[686,699,688],{}," function is a built-in CSS function that allows us to perform calculations when specifying CSS property values. For example, it simplifies the positioning of an item with an already predetermined margin.",[682,702,703,705],{},[686,704,688],{}," is a native CSS method for doing basic math correctly in CSS as a substitute for any longitudinal value or almost any number. Simple CSS calculations are carried out using this function by using the operators for addition (+), subtraction (-), multiplication (*) and division (\u002F).",[682,707,708],{},"Additionally, wherever length, percentage, time, numbers, integers, frequencies, and angles are specified, this function can be used.",[710,711,713],"h3",{"id":712},"the-calc-function-syntax","The calc() function syntax:",[715,716,721],"pre",{"className":717,"code":719,"language":720},[718],"language-text","width: calc(100% \u002F 6);\nwidth: calc(100% * 6);\nfont-size: calc(7vw + 4px);\nfont-size: calc(7vw - 4px);\n","text",[686,722,719],{"__ignoreMap":723},"",[682,725,726],{},[727,728,732],"a",{"href":729,"rel":730},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=7f424a8b61",[731],"nofollow","Save this code",[682,734,735,736,738],{},"The only input for ",[686,737,688],{}," is one expression. The expression's calculated outcome then determines the value. It may use any of the following operators, while adhering to the usual precedence rules of the operators: +, -, *, and \u002F.",[710,740,742],{"id":741},"key-notes-on-calc","Key Notes on calc()",[744,745,746,755],"ul",{},[747,748,749,750,754],"li",{},"This function can be ",[751,752,753],"strong",{},"nested",".",[747,756,757],{},"Only the usage of the variant with the unit is acceptable for addition and subtraction.",[682,759,760],{},[751,761,762],{},"For example:",[715,764,767],{"className":765,"code":766,"language":720},[718],"- margin-top: calc(0px + 35px); is acceptable, however - margin-top: calc(0 + 35px); \u002F* is not acceptable and is considered invalid *\u002F\n",[686,768,766],{"__ignoreMap":723},[682,770,771],{},[727,772,732],{"href":773,"rel":774},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=4ef44582e2",[731],[744,776,777],{},[747,778,779],{},"Multiplication and division require the second number to be unitless, or it will be invalid.",[682,781,782],{},[751,783,762],{},[715,785,788],{"className":786,"code":787,"language":720},[718]," .box {\n   margin: calc(50px * 2);\n   \u002F* and *\u002F\n   margin: calc(50px \u002F 3);\n}\n",[686,789,787],{"__ignoreMap":723},[682,791,792],{},[727,793,732],{"href":794,"rel":795},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=07eb4b9ba0",[731],[744,797,798,808],{},[747,799,800,801,804,805,754],{},"HTML generates an ",[751,802,803],{},"error"," when you ",[751,806,807],{},"divide by zero",[747,809,810,813],{},[751,811,812],{},"Whitespace"," must be used around the + and - operators, but is not mandatory for the * and \u002F operators. However, it is both permitted and advised to add whitespace for uniformity.",[682,815,816],{},[751,817,762],{},[715,819,822],{"className":820,"code":821,"language":720},[718]," .box {\n   font-size: calc(7vw + 4px);\n   \u002F* Instead of *\u002F\n   font-size: calc(7vw+4px);\n",[686,823,821],{"__ignoreMap":723},[682,825,826],{},[727,827,732],{"href":828,"rel":829},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=86d84f97b8",[731],[744,831,832],{},[747,833,834,835,837],{},"We can use the ",[686,836,688],{}," function to check that form fields are sized appropriately without extending past the edge of the container while retaining the correct margin.",[682,839,762],{},[682,841,842],{},[751,843,844],{},"HTML",[715,846,849],{"className":847,"code":848,"language":720},[718],"\u003Cform>\u003Cdiv class=\"email-box\">\u003Clabel>Enter email:\u003C\u002Flabel>\u003Cinput type=\"text\"\u002F>\u003C\u002Fdiv>\u003C\u002Fform>\n",[686,850,848],{"__ignoreMap":723},[682,852,853],{},[727,854,857],{"href":855,"rel":856},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=b65145a75b",[731],"Share this code",[682,859,860],{},[751,861,862],{},"CSS",[715,864,867],{"className":865,"code":866,"language":720},[718],"input {\n padding: 5px;\n display: block;\n width: calc(100% - 1em);\n}\n.email-box {\n width: calc(100% \u002F 6);\n border: 1px solid #000;\n padding: 4px;\n background-color:#000;\n color: #FFF;\n}\n",[686,868,866],{"__ignoreMap":723},[682,870,871],{},[727,872,732],{"href":873,"rel":874},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=3ee64ca5f2",[731],[682,876,877],{},[751,878,879],{},"OUTPUT",[682,881,882],{},[883,884],"img",{"alt":885,"src":886},"Code output that shows a black and white 'enter email' input","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fimg-001.png",[691,888,890],{"id":889},"unit-conversion-in-css","Unit Conversion in CSS",[682,892,893,894,896],{},"Using ",[686,895,688],{},", a value without an assigned unit can be converted to a value with a unit. This can be achieved by multiplying the value by the number and unit type that you want to convert it to. Also, this is incredibly helpful if you have CSS variables set without the unit.",[715,898,901],{"className":899,"code":900,"language":720},[718],"html{\n --num: 2;\n}\n.color {\n background-color: #000;\n height: 22px;\n width: calc(var(--num) * 11px);\n display: inline-block;\n margin-right: 10px;\n margin: 50px;\n}\n",[686,902,900],{"__ignoreMap":723},[682,904,905],{},[727,906,732],{"href":907,"rel":908},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=f09a47814c",[731],[682,910,911],{},[751,912,879],{},[682,914,915],{},[883,916],{"alt":917,"src":918},"HTML CSS Output showing 6 small squares, each a different color.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fimg-002.png",[691,920,922],{"id":921},"using-calc-to-convert-font-sizes","Using calc() to Convert Font Sizes",[682,924,925,926,929],{},"We can increase our font size based on the viewport or screen size. For example, consider a situation where we need our paragraph's font to be large on a desktop, but small on a mobile device. In this case, the c",[686,927,928],{},"alc()"," method is well suited for the job.",[682,931,932],{},"This will enable us to have smaller fonts in mobile views and larger fonts in desktop views, respectively:",[715,934,937],{"className":935,"code":936,"language":720},[718],"html{font-size: 10px;\n}\nsection{\n color: #ffffff;\n font-size: calc(1rem + 1vw);\n}\nh1{\n text-transform: uppercase;\n}\nbody{\n background-color: #800080;\n}\n",[686,938,936],{"__ignoreMap":723},[682,940,941],{},[727,942,732],{"href":943,"rel":944},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=3ab54abfb3",[731],[682,946,947,948,951,952,955],{},"Above, ",[686,949,950],{},"rem"," = root element’s font-size, which has been set to ",[686,953,954],{},"10px",";",[682,957,958,961],{},[686,959,960],{},"VW"," = viewport width, which helps adjust the entire page depending on the screen type or size.",[682,963,964],{},"The units above can be divided, multiplied, added and subtracted.",[691,966,968],{"id":967},"adjusting-html-elements-position-length-and-height","Adjusting HTML Elements (Position, Length and Height)",[682,970,971],{},"To position the boxes inside the container perfectly, the complete width of the screen (100%) was divided by 5 using the nested CSS method and 20px was subtracted from the resulting number to determine the final value for our minimum width.",[682,973,974],{},[751,975,844],{},[715,977,980],{"className":978,"code":979,"language":720},[718],"\u003Cdiv class=\"container\">\u003Cdiv class=\"box\">\u003Cp>Books\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv class=\"box\">\u003Cp>Hats\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv class=\"box\">\u003Cp>Shoes\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv class=\"box\">\u003Cp>Clothes\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[686,981,979],{"__ignoreMap":723},[682,983,984],{},[727,985,732],{"href":986,"rel":987},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=999c42a668",[731],[682,989,990],{},[751,991,862],{},[715,993,996],{"className":994,"code":995,"language":720},[718],"*{\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\nbody{\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n}\n.container{\n position: relative;\n display: flex;\n width: 350px;\n height: 200px;\n background:#ccc\n}\n.box{\n position: relative; \n min-width: calc((100% \u002F 5) - 20px);\n height: calc(100% - 20px);\n background:#ffffff;\n margin: 10px;\n color: #1f1d1d;\n}\n",[686,997,995],{"__ignoreMap":723},[682,999,1000],{},[727,1001,732],{"href":1002,"rel":1003},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=bf0a41ab3c",[731],[682,1005,879],{},[682,1007,1008],{},[883,1009],{"alt":1010,"src":1011},"A HTML\u002FCSS output that shows a gray table with 4 white colums, each with a different label.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fimg-003.png",[682,1013,1014],{},"Also, you can set overflow to scroll if the contents do not fit.",[691,1016,1018],{"id":1017},"using-css-calc-to-fix-gutters-without-parents","Using CSS calc() to Fix Gutters Without Parents",[682,1020,1021],{},"We can make two boxes or columns adjacent to one another. A fixed gap separates the columns, with the first being 40% wide and the second 60%. Also, we want the gap to be set to 1em. The columns are produced by internal padding within those columns, and they bump straight into one another.",[682,1023,1024,1025,1027],{},"We can use ",[686,1026,688],{}," to set the first column to be 40% wide with a 1em right margin, and the second column to be 60% wide, minus the initial 40% margin we just set the first column to.",[682,1029,1030],{},[751,1031,844],{},[715,1033,1036],{"className":1034,"code":1035,"language":720},[718],"\u003Cdiv class=\"container\">\u003Cdiv class=\"books\">\u003Ch1>BOOKS\u003C\u002Fh1>\u003Cp>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium facilis quibusdam dolores magni maxime quasi unde laboriosam officia exercitationem! Magnam iusto illo fugiat enim ducimus modi voluptatibus adipisci error nesciunt.\u003C\u002Fp>\u003C\u002Fdiv>\u003Cdiv class=\"hats\">\u003Ch1>HATS\u003C\u002Fh1>\u003Cp>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Rem commodi doloribus nesciunt eaque, error ab consequatur consequuntur excepturi aspernatur, quos mollitia, natus delectus qui dolorum expedita illum atque maiores. Vitae?\u003C\u002Fp>\u003C\u002Fdiv>\u003C\u002Fdiv>\n",[686,1037,1035],{"__ignoreMap":723},[682,1039,1040],{},[727,1041,732],{"href":1042,"rel":1043},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=dad1459172",[731],[682,1045,1046],{},[751,1047,862],{},[715,1049,1052],{"className":1050,"code":1051,"language":720},[718],".books{\n width: 40%;\n float: left;\n margin-right: 1em;\n background-color: #2cbe8e;\n color: #ffffff;\n}\n.hats{\n display: block;\n width: calc(60% - 1em);\n float: right;\n background-color: #000000;\n color: #ffffff;\n}\n",[686,1053,1051],{"__ignoreMap":723},[682,1055,1056],{},[727,1057,732],{"href":1058,"rel":1059},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=b2eb4191d5",[731],[682,1061,1062],{},[751,1063,879],{},[682,1065,1066],{},[883,1067],{"alt":1068,"src":1069},"HTML\u002FCSS output that shows two, side by side rectangles the lorem ipsum in them. The rectangle on the left is taller and green, and the one on the right is black","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fimg-004.png",[691,1071,1073],{"id":1072},"using-css-calc-to-improve-background-positioning-to-the-right-bottom","Using CSS calc() to Improve Background Positioning to the Right Bottom",[682,1075,1076,1077,1079],{},"With the help of the ",[686,1078,688],{}," function, we can better determine the relative width of the right bottom of the background of our element as follows:",[715,1081,1084],{"className":1082,"code":1083,"language":720},[718],"background-image: linear-gradient(rgb(34, 34, 34, 0.6),\n rgba(34, 34, 34, 0.6)), \nurl(christophe-rollando-Couy-PRl448-unsplash.jpg);\n background-position: calc(100% - 20px) calc(100% - 20px);\n",[686,1085,1083],{"__ignoreMap":723},[682,1087,1088],{},[727,1089,732],{"href":1090,"rel":1091},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=d25f4fb37f",[731],[682,1093,1094,1095,1097],{},"Also, let's imagine a case where the parent element gets too small to fit the entire module's content. This is a perfect use for the ",[686,1096,688],{}," function.",[691,1099,1101],{"id":1100},"using-css-calc-for-animations","Using CSS calc() for Animations",[682,1103,1104,1105,1107],{},"Specifying variables in the HTML element can utilize the ",[686,1106,688],{}," function to achieve the border and width.",[682,1109,1110,1111,1114],{},"For example, one of our margin tops comes from multiplying the variable (",[686,1112,1113],{},"--size","), which multiplies the value 5px in our HTML element by 50. This makes determining the value easier:",[715,1116,1119],{"className":1117,"code":1118,"language":720},[718],"margin-top: calc(var(--size) * 50)\n",[686,1120,1118],{"__ignoreMap":723},[682,1122,1123],{},"Also:",[715,1125,1128],{"className":1126,"code":1127,"language":720},[718],"border: var(--size) solid #777474\n",[686,1129,1127],{"__ignoreMap":723},[682,1131,844],{},[715,1133,1136],{"className":1134,"code":1135,"language":720},[718],"\u003Cdiv class=\"load\">\u003Cspan class=\"loading\">\u003C\u002Fspan>\u003Cspan class=\"loading\">\u003C\u002Fspan>\u003Cspan class=\"loading\">\u003C\u002Fspan>\u003C\u002Fdiv>\n",[686,1137,1135],{"__ignoreMap":723},[682,1139,1140],{},[727,1141,732],{"href":1142,"rel":1143},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=46e84ca327",[731],[682,1145,1146],{},[751,1147,862],{},[715,1149,1152],{"className":1150,"code":1151,"language":720},[718],".load {\n overflow: hidden;\n width: 100%;\n height: 100%;\n position: float;\n top: 0;\n left: 0;\n display: flex;\n align-items: center;\n align-content: center;\n justify-content: center;\n margin-top: calc(var(--size) * 50);\n}\n.loading {\n border-radius: 100%;\n margin: calc(var(--size) * 2);\n}\n.loading:nth-child(1) {\n animation: css-calc-animation 0.6s ease-in-out alternate infinite;\n border: var(--size) solid #ffffff;\n}\n.loading:nth-child(2) {\n animation: css-calc-animation 0.6s ease-in-out alternate 0.3s infinite;\n border: var(--size) solid #b8b2b2;\n}\n.loading:nth-child(3) {\n animation: css-calc-animation 0.6s ease-in-out alternate 0.4s infinite;\n border: var(--size) solid #777474;\n}\n@keyframes css-calc-animation {\n  100% {\n transform: scale(2);\n  }\n}\n",[686,1153,1151],{"__ignoreMap":723},[682,1155,1156],{},[727,1157,732],{"href":1158,"rel":1159},"https:\u002F\u002Faleru.pieces.cloud\u002F?p=53d74fb9fd",[731],[682,1161,1162],{},[751,1163,879],{},[682,1165,1166],{},[883,1167],{"alt":1168,"src":1169},"loading animation","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fimg-005.png",[691,1171,1173],{"id":1172},"browser-compatibility-with-the-calc-function","Browser Compatibility With the calc() Function",[682,1175,1176,1177,1179,1180,1182],{},"The ",[686,1178,688],{}," function is browser compatible, with some limitations. Below is a list of the browser compatibility of the CSS ",[686,1181,688],{},":",[682,1184,1185],{},[883,1186],{"alt":1187,"src":1188},"informative table on browser compatibility of CSS","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fimg-006.png",[691,1190,1192],{"id":1191},"conclusion","Conclusion",[682,1194,1195,1196,1198,1199,1201],{},"Although the CSS ",[686,1197,688],{}," function might appear to have one specific application, it offers many useful options. For example, it comes in handy when we want to change our website's layout and other components and prevent repetition when doing the same calculations. The ",[686,1200,688],{}," function is a tool every web developer should know and utilize in many ways.",[682,1203,1204,1205,1207],{},"Hopefully, this article was helpful, and now you might consider using ",[686,1206,688],{}," in your next project to simplify the CSS code.",{"title":723,"searchDepth":1209,"depth":1209,"links":1210},2,[1211,1216,1217,1218,1219,1220,1221,1222,1223],{"id":693,"depth":1209,"text":694,"children":1212},[1213,1215],{"id":712,"depth":1214,"text":713},3,{"id":741,"depth":1214,"text":742},{"id":889,"depth":1209,"text":890},{"id":921,"depth":1209,"text":922},{"id":967,"depth":1209,"text":968},{"id":1017,"depth":1209,"text":1018},{"id":1072,"depth":1209,"text":1073},{"id":1100,"depth":1209,"text":1101},{"id":1172,"depth":1209,"text":1173},{"id":1191,"depth":1209,"text":1192},"Software Development","2023-01-03T00:00:00.000Z","The calc() function allows you to perform computations when specifying CSS property values. Learn how to implement it in many different projects.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc\u002Fhero.jpeg","decorative cover image showing a laptop on a wooden table",{},"\u002Fblog\u002Fintroduction-to-building-responsive-ui-with-css-calc",{"title":673,"description":1226},"blog\u002Fintroduction-to-building-responsive-ui-with-css-calc",[1236],"css; responsive","wimuJYzTqiQrsxwGsl83t84roO3cqjYHW3eaoEA-PjE",{"id":1239,"title":674,"body":1240,"description":1244,"draft":1227,"extension":1228,"meta":1247,"navigation":32,"path":1248,"photo":1249,"photoAlt":676,"seo":1250,"stem":1251,"__hash__":1252},"authors\u002Fauthors\u002Faleru-divine.md",{"type":679,"value":1241,"toc":1245},[1242],[682,1243,1244],{},"Aleru is a developer with hands-on experience in JavaScript, Node.js, and CSS. Creator of projects like a Word Scramble game, a dice roll tutorial, and a native server in Node.js. Dedicated to implementing UX best practices and crafting functional, engaging web applications with a strong focus on clean and efficient code.",{"title":723,"searchDepth":1209,"depth":1209,"links":1246},[],{},"\u002Fauthors\u002Faleru-divine","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Faleru-divine.jpeg",{"title":674,"description":1244},"authors\u002Faleru-divine","ZzaZElJFZHRpDh0YLy0o147gOcTC79YAtTzC1dXKx-k",{"left":1254,"top":1254,"width":1255,"height":1255,"rotate":1254,"vFlip":1227,"hFlip":1227,"body":1256},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]