From 27f0ca7fcda944027b5e7af6ee6e228ad55792df Mon Sep 17 00:00:00 2001 From: apurvabangali <107414864+apurvabangali@users.noreply.github.com> Date: Tue, 2 Jul 2024 15:03:19 +0530 Subject: [PATCH] refactor: Remove all hard coded sections from theme --- assets/css/theme.css | 753 +--------------------- templates/catalog/_partials/products.tpl | 281 -------- templates/layouts/layout-both-columns.tpl | 389 +---------- 3 files changed, 34 insertions(+), 1389 deletions(-) diff --git a/assets/css/theme.css b/assets/css/theme.css index 6570119..cf1b3b9 100644 --- a/assets/css/theme.css +++ b/assets/css/theme.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.3.5 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */ /* @@ -32,9 +32,11 @@ 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; @@ -50,6 +52,8 @@ html { /* 5 */ font-variation-settings: normal; /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ } /* @@ -121,8 +125,10 @@ strong { } /* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. */ code, @@ -131,8 +137,12 @@ samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-size: 1em; + font-feature-settings: normal; /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ } /* @@ -201,6 +211,8 @@ textarea { /* 1 */ line-height: inherit; /* 1 */ + letter-spacing: inherit; + /* 1 */ color: inherit; /* 1 */ margin: 0; @@ -224,9 +236,9 @@ select { */ button, -[type='button'], -[type='reset'], -[type='submit'] { +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; @@ -653,6 +665,10 @@ select { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } ::backdrop { @@ -703,6 +719,10 @@ select { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } .container { @@ -783,14 +803,6 @@ select { bottom: 0px; } -.bottom-1 { - bottom: 0.25rem; -} - -.bottom-9 { - bottom: 2.25rem; -} - .bottom-\[50\%\] { bottom: 50%; } @@ -807,12 +819,12 @@ select { right: 0px; } -.right-12 { - right: 3rem; +.right-1 { + right: 0.25rem; } -.right-2 { - right: 0.5rem; +.right-12 { + right: 3rem; } .right-4 { @@ -839,58 +851,10 @@ select { top: 100%; } -.right-1 { - right: 0.25rem; -} - .z-10 { z-index: 10; } -.col-span-1 { - grid-column: span 1 / span 1; -} - -.col-span-3 { - grid-column: span 3 / span 3; -} - -.col-start-1 { - grid-column-start: 1; -} - -.col-start-2 { - grid-column-start: 2; -} - -.row-span-1 { - grid-row: span 1 / span 1; -} - -.row-span-2 { - grid-row: span 2 / span 2; -} - -.row-span-3 { - grid-row: span 3 / span 3; -} - -.row-start-1 { - grid-row-start: 1; -} - -.row-start-2 { - grid-row-start: 2; -} - -.row-end-2 { - grid-row-end: 2; -} - -.row-end-3 { - grid-row-end: 3; -} - .-mx-2 { margin-left: -0.5rem; margin-right: -0.5rem; @@ -906,11 +870,6 @@ select { margin-bottom: -0.75rem; } -.mx-3 { - margin-left: 0.75rem; - margin-right: 0.75rem; -} - .mx-4 { margin-left: 1rem; margin-right: 1rem; @@ -936,26 +895,11 @@ select { margin-bottom: 0.5rem; } -.my-20 { - margin-top: 5rem; - margin-bottom: 5rem; -} - .my-8 { margin-top: 2rem; margin-bottom: 2rem; } -.mx-1 { - margin-left: 0.25rem; - margin-right: 0.25rem; -} - -.my-12 { - margin-top: 3rem; - margin-bottom: 3rem; -} - .mb-1 { margin-bottom: 0.25rem; } @@ -964,18 +908,10 @@ select { margin-bottom: 3rem; } -.mb-16 { - margin-bottom: 4rem; -} - .mb-2 { margin-bottom: 0.5rem; } -.mb-20 { - margin-bottom: 5rem; -} - .mb-24 { margin-bottom: 6rem; } @@ -1028,10 +964,6 @@ select { margin-top: 0.5rem; } -.mt-20 { - margin-top: 5rem; -} - .mt-24 { margin-top: 6rem; } @@ -1052,18 +984,6 @@ select { margin-top: 2rem; } -.mt-32 { - margin-top: 8rem; -} - -.mt-48 { - margin-top: 12rem; -} - -.mt-9 { - margin-top: 2.25rem; -} - .block { display: block; } @@ -1084,10 +1004,6 @@ select { display: flow-root; } -.grid { - display: grid; -} - .hidden { display: none; } @@ -1116,18 +1032,10 @@ select { height: 1.5rem; } -.h-72 { - height: 18rem; -} - .h-8 { height: 2rem; } -.h-\[50vh\] { - height: 50vh; -} - .h-auto { height: auto; } @@ -1136,22 +1044,6 @@ select { height: 100%; } -.h-1\/2 { - height: 50%; -} - -.h-\[100px\] { - height: 100px; -} - -.h-\[20px\] { - height: 20px; -} - -.h-\[50px\] { - height: 50px; -} - .max-h-\[40px\] { max-height: 40px; } @@ -1225,14 +1117,6 @@ select { width: max-content; } -.w-\[20px\] { - width: 20px; -} - -.w-\[50px\] { - width: 50px; -} - .max-w-6xl { max-width: 72rem; } @@ -1261,10 +1145,6 @@ select { max-width: 100%; } -.max-w-screen-lg { - max-width: 1024px; -} - .flex-1 { flex: 1 1 0%; } @@ -1300,22 +1180,6 @@ select { list-style-type: square; } -.grid-flow-col { - grid-auto-flow: column; -} - -.grid-cols-2 { - grid-template-columns: repeat(2, minmax(0, 1fr)); -} - -.grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); -} - -.grid-rows-3 { - grid-template-rows: repeat(3, minmax(0, 1fr)); -} - .flex-row { flex-direction: row; } @@ -1328,10 +1192,6 @@ select { flex-direction: column; } -.flex-col-reverse { - flex-direction: column-reverse; -} - .flex-wrap { flex-wrap: wrap; } @@ -1348,10 +1208,6 @@ select { align-items: baseline; } -.justify-start { - justify-content: flex-start; -} - .justify-end { justify-content: flex-end; } @@ -1372,10 +1228,6 @@ select { gap: 0.25rem; } -.gap-12 { - gap: 3rem; -} - .gap-16 { gap: 4rem; } @@ -1400,36 +1252,12 @@ select { gap: 2rem; } -.gap-x-1 { - -moz-column-gap: 0.25rem; - column-gap: 0.25rem; -} - -.gap-y-1 { - row-gap: 0.25rem; -} - -.gap-x-2 { - -moz-column-gap: 0.5rem; - column-gap: 0.5rem; -} - -.gap-y-2 { - row-gap: 0.5rem; -} - .space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } -.space-y-2 > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); -} - .overflow-y-auto { overflow-y: auto; } @@ -1452,10 +1280,6 @@ select { border-width: 1px; } -.border-2 { - border-width: 2px; -} - .border-t { border-top-width: 1px; } @@ -1519,16 +1343,6 @@ select { border-color: rgb(252 165 165 / var(--tw-border-opacity)); } -.border-black { - --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); -} - -.border-white { - --tw-border-opacity: 1; - border-color: rgb(255 255 255 / var(--tw-border-opacity)); -} - .bg-black\/70 { background-color: rgb(0 0 0 / 0.7); } @@ -1597,11 +1411,6 @@ select { object-fit: cover; } -.object-scale-down { - -o-object-fit: scale-down; - object-fit: scale-down; -} - .p-2 { padding: 0.5rem; } @@ -1610,26 +1419,14 @@ select { padding: 0.625rem; } -.p-3 { - padding: 0.75rem; -} - .p-4 { padding: 1rem; } -.p-5 { - padding: 1.25rem; -} - .p-8 { padding: 2rem; } -.p-1 { - padding: 0.25rem; -} - .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1680,30 +1477,10 @@ select { padding-bottom: 2rem; } -.pb-10 { - padding-bottom: 2.5rem; -} - .pb-12 { padding-bottom: 3rem; } -.pb-2 { - padding-bottom: 0.5rem; -} - -.pb-3 { - padding-bottom: 0.75rem; -} - -.pb-6 { - padding-bottom: 1.5rem; -} - -.pl-0 { - padding-left: 0px; -} - .pl-12 { padding-left: 3rem; } @@ -1720,14 +1497,6 @@ select { padding-right: 0px; } -.pr-1 { - padding-right: 0.25rem; -} - -.pr-1\.5 { - padding-right: 0.375rem; -} - .pr-2 { padding-right: 0.5rem; } @@ -1752,50 +1521,10 @@ select { padding-top: 1rem; } -.pt-5 { - padding-top: 1.25rem; -} - .pt-6 { padding-top: 1.5rem; } -.pt-8 { - padding-top: 2rem; -} - -.pb-4 { - padding-bottom: 1rem; -} - -.pl-4 { - padding-left: 1rem; -} - -.pt-0 { - padding-top: 0px; -} - -.pt-1 { - padding-top: 0.25rem; -} - -.pt-2 { - padding-top: 0.5rem; -} - -.pt-3 { - padding-top: 0.75rem; -} - -.pt-7 { - padding-top: 1.75rem; -} - -.pt-9 { - padding-top: 2.25rem; -} - .text-left { text-align: left; } @@ -1817,11 +1546,6 @@ select { line-height: 2rem; } -.text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; -} - .text-base { font-size: 1rem; line-height: 1.5rem; @@ -1847,11 +1571,6 @@ select { line-height: 1rem; } -.text-5xl { - font-size: 3rem; - line-height: 1; -} - .font-bold { font-weight: 700; } @@ -1884,11 +1603,6 @@ select { line-height: 1; } -.text-\[\#000E2A\] { - --tw-text-opacity: 1; - color: rgb(0 14 42 / var(--tw-text-opacity)); -} - .text-blue-900 { --tw-text-opacity: 1; color: rgb(30 58 138 / var(--tw-text-opacity)); @@ -1909,11 +1623,6 @@ select { color: rgb(249 250 251 / var(--tw-text-opacity)); } -.text-gray-500 { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - .text-gray-600 { --tw-text-opacity: 1; color: rgb(75 85 99 / var(--tw-text-opacity)); @@ -1954,11 +1663,6 @@ select { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-gray-300 { - --tw-text-opacity: 1; - color: rgb(209 213 219 / var(--tw-text-opacity)); -} - .underline { text-decoration-line: underline; } @@ -2312,11 +2016,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { .sm\:flex { display: flex; } - - .sm\:px-6 { - padding-left: 1.5rem; - padding-right: 1.5rem; - } } @media (min-width: 768px) { @@ -2324,31 +2023,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { position: absolute; } - .md\:bottom-28 { - bottom: 7rem; - } - - .md\:right-12 { - right: 3rem; - } - - .md\:my-24 { - margin-top: 6rem; - margin-bottom: 6rem; - } - - .md\:mt-0 { - margin-top: 0px; - } - - .md\:mt-24 { - margin-top: 6rem; - } - - .md\:mt-32 { - margin-top: 8rem; - } - .md\:block { display: block; } @@ -2357,10 +2031,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { display: flex; } - .md\:grid { - display: grid; - } - .md\:hidden { display: none; } @@ -2369,26 +2039,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { height: 3rem; } - .md\:h-\[200px\] { - height: 200px; - } - - .md\:h-\[300px\] { - height: 300px; - } - - .md\:h-\[400px\] { - height: 400px; - } - - .md\:h-\[40px\] { - height: 40px; - } - - .md\:h-\[410px\] { - height: 410px; - } - .md\:w-1\/2 { width: 50%; } @@ -2409,46 +2059,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { width: 6rem; } - .md\:w-3\/5 { - width: 60%; - } - .md\:w-3\/6 { width: 50%; } - .md\:w-\[30\%\] { - width: 30%; - } - - .md\:w-\[70\%\] { - width: 70%; - } - - .md\:w-8\/12 { - width: 66.666667%; - } - - .md\:w-\[40\%\] { - width: 40%; - } - - .md\:w-\[40px\] { - width: 40px; - } - - .md\:w-\[50\%\] { - width: 50%; - } - - .md\:w-\[60\%\] { - width: 60%; - } - - .md\:grid-cols-3 { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } - .md\:flex-row { flex-direction: row; } @@ -2461,18 +2075,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { align-items: flex-start; } - .md\:justify-start { - justify-content: flex-start; - } - .md\:gap-0 { gap: 0px; } - .md\:gap-10 { - gap: 2.5rem; - } - .md\:gap-4 { gap: 1rem; } @@ -2485,16 +2091,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { padding: 2rem; } - .md\:px-10 { - padding-left: 2.5rem; - padding-right: 2.5rem; - } - - .md\:px-4 { - padding-left: 1rem; - padding-right: 1rem; - } - .md\:pl-4 { padding-left: 1rem; } @@ -2511,69 +2107,6 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { padding-right: 12rem; } - .md\:pl-10 { - padding-left: 2.5rem; - } - - .md\:pl-12 { - padding-left: 3rem; - } - - .md\:pl-3 { - padding-left: 0.75rem; - } - - .md\:pl-5 { - padding-left: 1.25rem; - } - - .md\:pr-5 { - padding-right: 1.25rem; - } - - .md\:pt-0 { - padding-top: 0px; - } - - .md\:pt-10 { - padding-top: 2.5rem; - } - - .md\:pt-12 { - padding-top: 3rem; - } - - .md\:pt-6 { - padding-top: 1.5rem; - } - - .md\:pt-8 { - padding-top: 2rem; - } - - .md\:pt-9 { - padding-top: 2.25rem; - } - - .md\:text-left { - text-align: left; - } - - .md\:text-2xl { - font-size: 1.5rem; - line-height: 2rem; - } - - .md\:text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; - } - - .md\:text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; - } - .md\:text-base { font-size: 1rem; line-height: 1.5rem; @@ -2589,27 +2122,9 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { line-height: 1.25rem; } - .md\:text-xl { - font-size: 1.25rem; - line-height: 1.75rem; - } - - .md\:text-xs { - font-size: 0.75rem; - line-height: 1rem; - } - .md\:font-bold { font-weight: 700; } - - .md\:font-medium { - font-weight: 500; - } - - .md\:font-semibold { - font-weight: 600; - } } @media (min-width: 1024px) { @@ -2617,44 +2132,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { position: static; } - .lg\:bottom-3 { - bottom: 0.75rem; - } - - .lg\:bottom-48 { - bottom: 12rem; - } - .lg\:right-0 { right: 0px; } - .lg\:right-20 { - right: 5rem; - } - - .lg\:my-20 { - margin-top: 5rem; - margin-bottom: 5rem; - } - - .lg\:my-32 { - margin-top: 8rem; - margin-bottom: 8rem; - } - - .lg\:mb-2 { - margin-bottom: 0.5rem; - } - - .lg\:mb-32 { - margin-bottom: 8rem; - } - - .lg\:mt-32 { - margin-top: 8rem; - } - .lg\:flex { display: flex; } @@ -2663,30 +2144,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { display: none; } - .lg\:h-2\/3 { - height: 66.666667%; - } - - .lg\:h-\[500px\] { - height: 500px; - } - .lg\:h-\[90vh\] { height: 90vh; } - .lg\:h-\[200px\] { - height: 200px; - } - - .lg\:h-\[400px\] { - height: 400px; - } - - .lg\:h-\[60px\] { - height: 60px; - } - .lg\:w-1\/3 { width: 33.333333%; } @@ -2707,22 +2168,10 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { width: 60%; } - .lg\:w-80 { - width: 20rem; - } - .lg\:w-full { width: 100%; } - .lg\:w-52 { - width: 13rem; - } - - .lg\:w-\[60px\] { - width: 60px; - } - .lg\:max-w-full { max-width: 100%; } @@ -2751,121 +2200,15 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { background-color: transparent; } - .lg\:p-4 { - padding: 1rem; - } - - .lg\:px-36 { - padding-left: 9rem; - padding-right: 9rem; - } - - .lg\:px-8 { - padding-left: 2rem; - padding-right: 2rem; - } - .lg\:py-0 { padding-top: 0px; padding-bottom: 0px; } - .lg\:px-20 { - padding-left: 5rem; - padding-right: 5rem; - } - - .lg\:py-8 { - padding-top: 2rem; - padding-bottom: 2rem; - } - - .lg\:pl-2 { - padding-left: 0.5rem; - } - - .lg\:pr-10 { - padding-right: 2.5rem; - } - .lg\:pt-24 { padding-top: 6rem; } - .lg\:pb-6 { - padding-bottom: 1.5rem; - } - - .lg\:pl-24 { - padding-left: 6rem; - } - - .lg\:pl-5 { - padding-left: 1.25rem; - } - - .lg\:pr-6 { - padding-right: 1.5rem; - } - - .lg\:pt-10 { - padding-top: 2.5rem; - } - - .lg\:pt-16 { - padding-top: 4rem; - } - - .lg\:pt-20 { - padding-top: 5rem; - } - - .lg\:pt-8 { - padding-top: 2rem; - } - - .lg\:pt-9 { - padding-top: 2.25rem; - } - - .lg\:text-3xl { - font-size: 1.875rem; - line-height: 2.25rem; - } - - .lg\:text-4xl { - font-size: 2.25rem; - line-height: 2.5rem; - } - - .lg\:text-5xl { - font-size: 3rem; - line-height: 1; - } - - .lg\:text-xl { - font-size: 1.25rem; - line-height: 1.75rem; - } - - .lg\:text-2xl { - font-size: 1.5rem; - line-height: 2rem; - } - - .lg\:text-lg { - font-size: 1.125rem; - line-height: 1.75rem; - } - - .lg\:font-bold { - font-weight: 700; - } - - .lg\:font-semibold { - font-weight: 600; - } - .lg\:shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; @@ -2874,40 +2217,8 @@ input[type="radio"]:focus,input[type="checkbox"]:focus { } @media (min-width: 1280px) { - .xl\:right-56 { - right: 14rem; - } - .xl\:w-1\/4 { width: 25%; } - - .xl\:w-9\/12 { - width: 75%; - } - - .xl\:pl-12 { - padding-left: 3rem; - } - - .xl\:pr-12 { - padding-right: 3rem; - } - - .xl\:text-5xl { - font-size: 3rem; - line-height: 1; - } - - .xl\:text-xl { - font-size: 1.25rem; - line-height: 1.75rem; - } -} - -@media (min-width: 1536px) { - .\32xl\:pr-16 { - padding-right: 4rem; - } } diff --git a/templates/catalog/_partials/products.tpl b/templates/catalog/_partials/products.tpl index ecec0a9..12aaff0 100644 --- a/templates/catalog/_partials/products.tpl +++ b/templates/catalog/_partials/products.tpl @@ -24,27 +24,6 @@ *} -
-

- Curate a Perfect Wardrobe with Our Custom-Made Apparel

-

- Step into our world of custom-made luxury with Brooks Bingham, offering you Custom Business Shirts, - Custom Sport Jackets, Custom Made Tuxedos, and more.

-
-
{foreach from=$listing.products item="product"} @@ -66,263 +45,3 @@
-
- Image -
-

Because You Are Unique.

-

So Is Your Body…

-
-
- -
-
-

- Custom Fit for your Comfort -

-

- Custom-made shirts and tuxedos are tailored specifically for you, offering an unparalleled fit. - Experience unmatched comfort and style with our tailored suits, crafted to celebrate your uniqueness. -

- - Design Your Suit - - - - - -
-
- -
-
- -
-
- -
-
-

- Not Just Made-To-Order -

-

- Our Custom Designed Suits are made to last. Enjoy a personalized, custom-fit experience that not only sets you apart - from ready-to-wear options but is also designed to be durable. -

- - Design Your Suit - - - - - -
-
- -
-
-
-

- Customize Your Apparel in 3 Steps:

-
-
-
    -
  • -
    -
    - Select the Fabric -
    -
    -

    - Select the Fabric

    -

    - Choose from a wide range of trendy fabrics updated every seasons

    -
    -
    -
    • - -
  • -
    -
    - Finalize the Design -
    -
    -

    - Finalize the Design

    -

    - Personalize details like lapels, pockets, and lining through online platform.

    -
    -
    -
    • - -
  • -
    -
    - Get Measured -
    -
    -

    - Get Measured

    -

    - Ensure your custom apparel fits you flawlessly by getting measured.

    -
    -
    -
    • -
-
-
-
- - -
-

- How Can You Get Measured? -

-
-
    -
  • - Simply scan the QR code at checkout.
    • -
  • - Carefully watch the instruction video.
    • -
  • - Next, you will have 2 photos taken to collect all needed measurements to create your custom fit.
    • -
-
-

- (Disclaimer: Please follow the instruction video closely as it will guide you to wear specific clothing, stand barefoot, etc.) -

-
- - Know more - - - - - -
-
diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl index 1bbb0c4..e282618 100644 --- a/templates/layouts/layout-both-columns.tpl +++ b/templates/layouts/layout-both-columns.tpl @@ -54,16 +54,7 @@ {block name='displayBeforeWrapper'} {hook h='displayBeforeWrapper'} {/block} - - {if $page.page_name == 'index'} - -
- -
- - {/if} +
{block name='breadcrumb'} @@ -94,383 +85,7 @@
{/block} - {if $page.page_name == 'index'} - - -
- - - -
-

Design and Visualize what you need

-

Choose what looks good on you

- -
- - -
-
-

- The Art of Custom Clothing -

-

- Personalize your handcrafted look with our exclusive collection of Made-to-Measure men's clothing. -

-

- Take control and feel confident with our Perfect Fit Guarantee -

-
- - Start Customization - -
-
- -
-
- -
-
- -
-
-
- - - -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
-
-

- Tailored Perfection for a Flawless Fit -

-

- Craft your signature style down to the finest details - from quality fabrics and distinctive - buttons to unique pocket hues and lining designs. -

-

Our Perfect Fit Guarantee ensures a tailored look that exudes your confident individuality

-
- - Start Customization - -
-
-
- - -
-

Curated Custom Collection

-

Experience luxury with personalized jackets and custom collections crafted just for you

-
- -
-
-
- - -

Shirts

- -
- -
- - -

Suits

- -
- -
- - -

Sport Jackets

- -
- -
- - -

Tuxedos

- -
-
-
- - -
-
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -
-

- About Brooks Bingham -

-
-
  • Individuality and precision tailoring is what we celebrate.
    • -
  • We are on a mission to provide high-quality, custom-fit clothing that embodies YOU.
    • -
  • Modern with the technology, but we never forget the importance of classic traditional tailoring.
    • -
  • We are all about creating timeless, personalized pieces.
    • -
    -
    -
    - - -
    -
    -

    - Why Choose Brooks Bingham? -

    -
    -
    -

    1.

    -

    Expert

    -

    Craftmanship

    -
    -
    -

    2.

    -

    Innovative

    -

    Customization

    -
    -
    -

    3.

    -

    Quality

    -

    Materials

    -
    -
    -

    4.

    -

    Sustainable

    -

    Practices

    -
    -
    -

    5.

    -

    Exceptional

    -

    Support

    -
    -
    -
    -
    -
    - -
    -
    - -
    -
    - -
    -
    - -
    -
    -
    - - - -
    -
    -
    - -
    -

    - See What They Think -

    -

    - The quality of my bespoke shirts from Brooks Bingham Clothing has been exceptional! -

    -

    - The fabrics, buttons, and stitching are of the highest quality. -

    -

    Matt K

    -
    - - - - - - - - - - - - - - - -
    -
    -
    - -
    -
    - - - - -
    - - -
    -

    Step into Style with a Custom Touch

    -

    - Our perfect fit guarantee ensures that every plece you order is tailored to your exact specifications, - delivering a perfect fit every time. -

    -
    - - Start Customization - -
    -
    -
    - -
    -

    BROOKSBINGHAM

    -

    Are you one of the millions of men that off the rack clothing just doesn't work for you? - A generic size built for the generic man? Brooks Bingham Clothing started exactly for this reason. - We are athletes, surrounded by athletes and strive to work with those that search for perfection. - And we were sick and tired of spending thousands on garments just to spend hundreds or thousands more - for a tailor to sort of make it fit. We strive to be a luxury solution in the clothing industry while providing - custom garments built and des gned by you for you. We give you all the power to be as creative as possible - while designing your clothing followed by the implementation of photo technology to collect all needed measurements. - Through our 3D tocits you have the ability to see and explore millions of options to complete your one of a kind piece. - We thank you for taking the time to explore Brooks Bingham Clothing and we look forward to helping you explore the - world of custom garments. -

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -

    Business Suits for Men

    -

    Make a powerful impression and radiate confidence

    - Tailored business Suits designed for you to make a - powerful impression and radiate confidence. -
    -
    -

    Browse through our design

    -

    Get inspired with our curated outfit ideas

    - -
    -
    -

    Get the perfect fit

    -

    Get inspired with our curated outfit ideas

    - The future of fashion with our innovative designs. Customization options tailored to your measurements and discover your perfect fit in minutes -
    -
    -
    - -
    -
    -

    Wear Your Identity

    -

    Fashion that speaks volumes

    - -
    -
    -

    Timeless Quality

    -

    Fashion that stands the test of time

    - Invest in enduring fashion with our commitment to quality and - durability.From custom-made tuxedos to business suits, each piece stands the test of time. -
    -
    -

    Tailored to your specifications

    -

    Tailor every detail to match your preferences

    -
    -
    -
    - - - - {l s='View More' d='Shop.Theme.Catalog'} - - - - -
    -
    -
    -

    “ - BrooksBingham is your destination for custom-tailored menswear, where authenticity is woven into every stitch.”

    - -

    Our perfect fit guarantee ensures that every piece you order is tailored to your exact specifications, delivering a perfect fit every time.

    -
    -
    -
    - - {/if} + {block name="right_column"}