## HOSS Working Ideas ## Module Builders qns * Do we implement multi-column or two-column only? * Callie says we can look at previous sites (including Camby) for use-cases that'll help determine this * What about mobile / tablet settings in the module builder? * We need a token type system * Saving workflow, do we save per screen, globally, what about validation? ## HOSS JSON settings Theme Settings JSON editor: https://bight.pr-455.hossdev.com/admin/wp-admin/admin.php?page=hoss-theme-settings_dev.php. Replace `bight` with `camby`, `emery`, `petit`, etc Some notes: * `fonts`. Has the list of fonts enabled, there are 3 current types of fonts: * GoogleFont * ExternalViaLinkFont. For use cases like TypeKit where we cannot legally host the font and you are provided a CSS file * LocalFont. Font files that are hosted by us * `styleDefaults`. defaults for WYSIWYG content that is not styled (paragraphs, lists, etc) * `globalModuleSettings`. Contains all Global defaults for each module type "HeroA", "HeroB", etc * `userStyles`. Each userStyle has some properties, mostly related to CSS except a few: * `title`. The display title/label used in WYSIWYG style selector and other places * `skipRichText`. Whether or not to show this style on WYSIWYG fields * `css`. THis is a CSS string, it doesn't use classes. You can use `&` to refer to the element the style is being applied to, e.g. `& { text-shadow: 1px }` There are other JSON settings that live in the frontend, and pending to be migrated to the backend. See example from The Bight below. If you merge both JSON you get the whole set of existing settings. ```json { "breakpoints": { "keys": ["xs", "sm", "md", "lg", "xl"], "values": { "xs": 0, "sm": 576, "md": 768, "lg": 992, "xl": 1399 }, "unit": "px" }, "spacingUnit": 8, "moduleSpacing": { "xs": 30, "sm": 30, "md": 45, "lg": 60, "xl": 60 }, "paddingLevels": { "xs": [0], "sm": [0, 15, 30, 96], "md": [0, 15, 30, 48, 96], "lg": [0, 30, 60, 72, 143], "xl": [0, 48, 60, 96, 190] }, "loadingBarColor": "#4F7585", "gridGutterWidth": 62, "containerMaxWidths": { "lg": 1399 }, "desktopMenuBreakpoint": "lg", "expandedMainWidgetBreakpoint": "md", "layout": { "__typename": "LayoutStyleD", "navStyle": "bold", "navContentBelow": { "__typename": "HtmlContent", "html": "" }, "navWidgetCta": "Inquire", "navWidget": null, "navWidgetLink": "#inquire", "widgetCtaStyle": "us-c40203f4-2249-4964-9bb6-27206bce159f", "widgetCtaStyleFloating": "us-4e6fc9fd-6f41-4f50-ae8f-0cd39c3485bb", "mainNavMenuItemStyle": "us-6fb3a3e1-0146-45ed-a29f-d4b0baab1d71", "floatingNavMenuItemStyle": "us-a41231b1-2566-4adc-a648-6ae78e4c1748", "copyrightLegend": { "__typename": "HtmlContent", "html": "<p class=\"us-bc6b378c-4444-4cd3-bd74-14aabc5a7898\">Providenciales, Turks & Caicos Islands</p>" }, "disclaimerContent": { "__typename": "HtmlContent", "html": "<p class=\"us-0de80449-0281-4cfc-95d7-cf5524a5ee34\">" + "© 2020 The Yard Ltd. All rights reserved. The residences at The Bight by Dream Hotel Group, Turks and Caicos\n" + " Islands, are not owned, developed or sold by Dream Hotel Group, LLC or its affiliates. The Yard Ltd. uses\n" + " the By Dream Hotel Group marks under a license from Dream Hotel Group or its affiliate, which has not\n" + " confirmed the accuracy of any of the statements or representations made herein." + "</p>" }, "instagramLink": "https://www.instagram.com/thebighttci/", "twitterLink": "", "facebookLink": "https://www.facebook.com/thebightTCI/", "mainFooterMenuItemStyle": "us-54cee8a5-7979-449e-8f31-838d93552e76", "navBoldBackground": { "__typename": "BackgroundMediaGroup", "media": { "__typename": "MediaGroup", "primaryMedia": { "__typename": "MediaItem", "altText": "", "width": 2000, "height": 906, "backgroundPosition": null, "caption": null, "objectFit": "cover", "sources": [ { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_1920/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 1920w, https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_1431/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 1431w, https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_480/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 480w", "aspectRatio": "2000:906", "aspectRatioVal": 2.207505518763797 }, { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/ar_16:9,c_fill,g_auto,q_auto/c_scale,w_1610/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 1610w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_16:9,c_fill,g_auto,q_auto/c_scale,w_1543/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 1543w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_16:9,c_fill,g_auto,q_auto/c_scale,w_1094/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 1094w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_16:9,c_fill,g_auto,q_auto/c_scale,w_480/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 480w", "aspectRatio": "16:9", "aspectRatioVal": 1.7777777777777777 }, { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/ar_4:3,c_fill,g_auto,q_auto/c_scale,w_1208/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 1208w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_4:3,c_fill,g_auto,q_auto/c_scale,w_980/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 980w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_4:3,c_fill,g_auto,q_auto/c_scale,w_480/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 480w", "aspectRatio": "4:3", "aspectRatioVal": 1.3333333333333333 }, { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/ar_1:1,c_fill,g_auto,q_auto/c_scale,w_906/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 906w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_1:1,c_fill,g_auto,q_auto/c_scale,w_860/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 860w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_1:1,c_fill,g_auto,q_auto/c_scale,w_480/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 480w", "aspectRatio": "1:1", "aspectRatioVal": 1 }, { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/ar_3:4,c_fill,g_auto,q_auto/c_scale,w_679/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 679w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_3:4,c_fill,g_auto,q_auto/c_scale,w_480/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 480w", "aspectRatio": "3:4", "aspectRatioVal": 0.75 }, { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/ar_9:16,c_fill,g_auto,q_auto/c_scale,w_509/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 509w, https://res.cloudinary.com/sideways/image/upload/f_auto/ar_9:16,c_fill,g_auto,q_auto/c_scale,w_480/v1573418284/bighthotel/2019/11/Hero-Image-Background.jpg 480w", "aspectRatio": "9:16", "aspectRatioVal": 0.5625 } ] }, "mobileMedia": null } }, "footerLogo": { "__typename": "MediaGroup", "primaryMedia": { "__typename": "MediaItem", "altText": "", "width": 715, "height": 905, "backgroundPosition": null, "caption": null, "objectFit": "contain", "sources": [ { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_715/v1580510956/bighthotel/2020/01/WhiteText_GreenLeaf-2.png 715w", "aspectRatio": "715:905", "aspectRatioVal": 0.7900552486187845 } ] }, "mobileMedia": null }, "footerLogoSlogan": { "__typename": "MediaGroup", "primaryMedia": { "__typename": "MediaItem", "altText": "", "width": 360, "height": 60, "backgroundPosition": null, "caption": null, "objectFit": "contain", "sources": [ { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_702/v1577133244/bighthotel/2019/12/Sothebys.png 702w", "aspectRatio": "702:120", "aspectRatioVal": 5.85 } ] } } }, "companyLogoLight": { "__typename": "MediaGroup", "primaryMedia": { "__typename": "MediaItem", "altText": "Logo Bight", "width": 350, "height": 432, "backgroundPosition": null, "caption": null, "objectFit": "contain", "sources": [ { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_350/v1588970047/bight/2020/05/color.png 350w", "aspectRatio": "350:432", "aspectRatioVal": 0.8101851851851852 } ] } }, "companyLogoLightFloating": { "__typename": "MediaGroup", "primaryMedia": { "__typename": "MediaItem", "altText": "Logo Bight", "width": 516, "height": 158, "backgroundPosition": null, "caption": null, "objectFit": "contain", "sources": [ { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_516/v1589316984/bight/2020/05/floating.png 516w, https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_480/v1589316984/bight/2020/05/floating.png 480w", "aspectRatio": "516:158", "aspectRatioVal": 3.2658227848101267 } ] } }, "companyLogoLightMobile": { "__typename": "MediaGroup", "primaryMedia": { "__typename": "MediaItem", "altText": "Logo Bight", "width": 228, "height": 140, "backgroundPosition": null, "caption": null, "objectFit": "contain", "sources": [ { "srcset": "https://res.cloudinary.com/sideways/image/upload/f_auto/c_scale,w_228/v1589318865/bight/2020/05/color-1.png 228w", "aspectRatio": "228:140", "aspectRatioVal": 1.6285714285714286 } ] } }, "companyLogoDark": null, "booking": { "widget": null, "provider": null }, "reservation": { "widget": null, "provider": null }, "favicon32": null, "favicon180": null, "favicon192": null, "pwaColor": "#1F4180", "gtmId": "GTM-T7H4KJ9" } ```