{"id":84,"date":"2024-10-03T12:37:43","date_gmt":"2024-10-03T16:37:43","guid":{"rendered":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/?page_id=84"},"modified":"2025-06-18T14:35:42","modified_gmt":"2025-06-18T18:35:42","slug":"bu-base-styles","status":"publish","type":"page","link":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/handbook\/wp-core\/block-architecture\/viewstyle\/bu-base-styles\/","title":{"rendered":"BU Base"},"content":{"rendered":"\n<p>BU Base is a new NPM package that provides a standardized set of CSS properties and select mixins from Responsive Foundation to streamline our styling process across our products and themes. Eventually, this may replace burf-tools entirely.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"1024\" height=\"631\" src=\"\/gutenberg\/files\/2024\/12\/283595964-50f7057a-cabc-4558-9b8a-8d7452ccc9cd-1024x631.png\" alt=\"Screen Shot 2023-11-16 at 4 10 29 PM\" class=\"wp-image-312\" srcset=\"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2024\/12\/283595964-50f7057a-cabc-4558-9b8a-8d7452ccc9cd-1024x631.png 1024w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2024\/12\/283595964-50f7057a-cabc-4558-9b8a-8d7452ccc9cd-636x392.png 636w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2024\/12\/283595964-50f7057a-cabc-4558-9b8a-8d7452ccc9cd-768x473.png 768w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2024\/12\/283595964-50f7057a-cabc-4558-9b8a-8d7452ccc9cd-1536x946.png 1536w, https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/files\/2024\/12\/283595964-50f7057a-cabc-4558-9b8a-8d7452ccc9cd-2048x1262.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption><em>Flowchart to illustrate BU Base and how it fits in our ecosystem by Dakota Chichester<\/em><br><\/figcaption><\/figure>\n\n\n\n<ul><li>CSS variables will allow plugins to integrate with themes automatically, streamlining the process for designers and minimizing the amount of styles required<\/li><li>WordPress is also heavily utilizing CSS variables as part of&nbsp;<code>theme.json<\/code>, which will make updating our products easier in the future if we incorporate these conventions where\/when possible (future-proofing)<\/li><\/ul>\n\n\n\n<h2><meta charset=\"utf-8\">How to Use BU Base<\/h2>\n\n\n\n<p>BU Base creates a CSS variable in _semantic.scss.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>:where(html) {\n     --bu-thumbnail-lg: 150px;\n}<\/code><\/pre>\n\n\n\n<p>Foundation then uses this variable in \/burf-customizations\/profiles\/_profile-format-advanced.scss:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.profile-photo-advanced {\n\theight: var(--profile-advanced-photo-size, var(--bu-thumbnail-lg, 150px));\n}<\/code><\/pre>\n\n\n\n<p><meta charset=\"utf-8\">First we have a placeholder variable specific to profiles, for use if you want to customize the size only in BU profiles; a broader BU base variable that&#8217;s determining the thumbnail size by default throughout your theme and plugins; and lastly a fallback in case the variables don&#8217;t exist.<\/p>\n\n\n\n<p>If you want to change <code>--<strong>bu-thumbnail-lg<\/strong><\/code> in your theme, you can do so. This will update all instances throughout the theme and plugins that use this variable automatically. In your theme, this might look something like:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code><meta charset=\"utf-8\">:where(html) {\n     --bu-thumbnail-lg: 250px;\n}<\/code><\/pre>\n\n\n\n<p>If you want a different size for the profiles advanced layout, then you can just use the placeholder variable <code>--<strong>profile-advanced-photo-size<\/strong><\/code> which will override the BU base variable. You&#8217;ll find that commented out for you in your theme in scss\/plugins\/bu-profiles\/<meta charset=\"utf-8\">_profile-format-advanced.scss:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.profile-format-advanced {\n    --profile-advanced-photo-size: 200px;\n}<\/code><\/pre>\n\n\n\n<p>A plugin, like BU Testimonials, may also use this variable from BU Base. For instance:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.bu-testimonial-photo {\n    height: var(--bu-testimonial-image-size, var(--bu-thumbnail-lg, 150px));\n}<\/code><\/pre>\n\n\n\n<p>This follows the same principles as outlined above: a placeholder variable specific to BU testimonials if you want to customize the size only in testimonials; a broader BU base variable that&#8217;s determining the thumbnail size by default throughout your theme and plugins; and lastly a fallback in case the variables don&#8217;t exist.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>BU Base consists of <strong>primitive and semantic CSS properties.<\/strong><\/p>\n\n\n\n<h3>Primitive Properties<\/h3>\n\n\n\n<p>Primitive properties are a standardized set of un-opinionated CSS properties that will then be used in themes, plugins, etc. Essentially the individual lego pieces. These CSS variables should <strong>not <\/strong>be modified.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    --size-1:            1rem;       \/\/ 16px\n    --size-2:            1.5rem;     \/\/ 24px\n    --size-3:            2rem;       \/\/ 32px\n    --size-4:            2.5rem;     \/\/ 40px\n    --size-5:            3rem;       \/\/ 48px\n    --size-6:            3.5rem;     \/\/ 56px\n    --size-7:            4rem;       \/\/ 64px\n    --size-8:            4.5rem;     \/\/ 72px\n    --size-9:            5rem;       \/\/ 80px\n    --size-10:           6rem;       \/\/ 96px<\/code><\/pre>\n\n\n\n<p>View <a href=\"https:\/\/github.com\/bu-ist\/bu-base\/blob\/main\/primitive-props.scss\">a complete list of the primitive props<\/a> available in BU Base.<br><\/p>\n\n\n\n<h3>Semantic Props<\/h3>\n\n\n\n<p>Semantic properties are a starter kit that takes the primitive properties and starts applying them to BU-specific uses. These CSS variables can and should be modified per your theme or plugin&#8217;s requirements.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>    --bu-spacing-sm: var(--shim-8);\n    --bu-spacing-md: var(--size-4);\n    --bu-spacing-lg: var(--size-7);\n\n    --bu-spacing:        var(--size-3);\n    --bu-spacing-half:   calc(var(--bu-spacing) * 0.5);\n    --bu-spacing-double: calc(var(--bu-spacing) * 2);<\/code><\/pre>\n\n\n\n<p>View <a href=\"https:\/\/github.com\/bu-ist\/bu-base\/blob\/main\/styles\/_semantic.scss\">a complete list of the semantic props<\/a> available in BU Base.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<h2>Using BU Base with Foundation variables<\/h2>\n\n\n\n<p>BU Base variables are used throughout Foundation, Child Starter, and eventually plugins, to make it easier to quickly customize or override variables. <\/p>\n\n\n\n<p>Foundation also has its own CSS variables. In Child Starter, you&#8217;ll find examples of the Foundation variables commented out in any relevant stylesheets. This is so you know a) what the variable is declared to (a specific class or :where(html), etc.) and the naming of the variable for easier customization. You can use BU base variables in combination with the Foundation variables as shown below.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/ =========================================================\n\/\/ Custom Properties (Example)\n\/\/ =========================================================\n\n.comments-area {\n   --comment-font: var(--bu-text-font);\n}<\/code><\/pre>\n\n\n\n<p><br><\/p>\n","protected":false},"excerpt":{"rendered":"<p>BU Base is a new NPM package that provides a standardized set of CSS properties and select mixins from Responsive Foundation to streamline our styling process across our products and themes. Eventually, this may replace burf-tools entirely. CSS variables will allow plugins to integrate with themes automatically, streamlining the process for designers and minimizing the [&hellip;]<\/p>\n","protected":false},"author":3670,"featured_media":0,"parent":82,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"status-is-a-reserved-term":[],"assignee":[],"_links":{"self":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/84"}],"collection":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/users\/3670"}],"replies":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":17,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":706,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/84\/revisions\/706"}],"up":[{"embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/pages\/82"}],"wp:attachment":[{"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"status-is-a-reserved-term","embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/status-is-a-reserved-term?post=84"},{"taxonomy":"assignee","embeddable":true,"href":"https:\/\/id-developer-upgrade-58.cms-devl.bu.edu\/gutenberg\/wp-json\/wp\/v2\/assignee?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}