Group expertise fields in Expert Profile
profile--fullNew Expert Pool templates, Expertise language in profile template
Create a template to provide to Grow Twig for Expert pool type entities, and display the expertise language in profiles.
New
Expert pool replicating Learning group and boilerplate styles in expert-pool.scssexpertiseLanguage in Profile profile--full.twigwith-issues in _color-coded.scssImproved Program Curriculum full and UI improvements for program elements
New
discovery-journey-phase--full.twigstage objectongoing) in timeline.scsscolor-coded.scss mixin: ongoing, scheduled, and finishedentitydate.scssgraphic being set in date.twigFixes
card.scsstimeline.scssGroup and learning group templates
New
learning-group and learning-group.scssdiscovery-journey-phase--full.twigNew view mode for Event: meeting agenda
An ultra-compressed view mode to be used while embedded in another entity’s teaser. Inspired by a meeting’ list view.
New
assets/src/scss/_mixins/_meeting-agenda.scssmeeting-agenda view mode in event--meeting-agenda.twigImprovements
_toolbar.scss adapterBoilerplate templates for program curriculum and module Entities
New
web/libraries/custom/sia-design-system/library/css/admin-drupal-8.cssNew templates for Project (i.e. Discovery Journey Project) and Participant
New
05-entity/project entity/project.scss05-entity/discovery-journey-participant delegating to Profileentity/discovery-journey-participant.scssNew templates for Discovery Journey Phase
New
05-entity/discovery-journey-phaseentity/discovery-journey-phase.scssFixes
with-icon.scss (tag: v2.59.1)Resolve divergence
Moved repository to github
No significant changes in the codebase.
Fixes
New Boolean value mixin for on-off fields
After using it for the A&AP’s multiple value Support program field, it’s now part of the Design System.
New
boolean-value.scss) and integrate it in the Workflow unit styles (workflow-info.scss)Styled sub-features, new Elements group, and better CTA contrast
New
elements) that functions as a helper for icon-less grid Features and includes the features.twig template directly with no modificationscolumns-2) to the Features group (features.twig) for very long text in 4-feature groups and include l-grid--wide into the grid list class when presentsecondary modifier) Sub-features variant to the Features group (features.twig) for features of less importance presenting smaller icons and blocky headings styled in features.scsswide grid modifier in Grids (_utilities/grids.scss) and provide own --items-X modifiers and adapt the Grid mixin (_mixins/grid.scss) to take wide into account when there’s exactly 4 itemsImprovements
_mixins/theme.scss (not --blend-in) and reverting it in _mixins/container-with-background.scss_unit/cta.scssteams.config.yml)list-unstyled and wide modifiers from the list class of the Color brand demo (color.twig) and add the now common --items-X modifier classImprove themed menu item highlight contrast
Improvements
highlight in theme.scss mixinStyle highlighted items in a Menu
When ‘highlight’ is set in the configuration, style the item differently.
New
dark-blue background in menu.scss unit$accent-color in the theme.scss mixinmenu) unit, Site navigation (site-navigation) region, in the Single (single) demoImprovements
--lighter as a variant for colors in the colors.scss helpersprofiles) group notice below it’s headingEmbedded Notice for Profiles and Highlight for Profile index card
New
profies.twig)index-card.twig) styled by people-list-item.scss mixinAdd Website coordinator to the exclusions in custom block editor CSS
New
not( .role-website_coordinator ) to the rule hiding the post status in block-editor.scss (compiles into admin-wordpress.css)Fixes
Add a deco and better spacing to Section Header
Also fix too narrow layout: the containers were uncomfortably narrow, especially profile cards and timelines.
New
section-header.twig when provided by config in section-header.config.yml and adjust spacing in section-header.scssbanner.scsssingle.config.ymlFixes
container mixin to container-max-width-huge in the container.scss mixin.Allow video embeds in full Profile; selectively improve line length
When the video embed context is passed through to the full Profile template, display it above the bio in the main container.
To improve readibility adapt the container mixin (and include new helpers) to max out at 1140px (the x-large max width), but adapt to smaller sizes when provided a 3rd parameter of a max size by including a padding on the end side.
New
container mixin parameters to specifiy a max-width in @mixin/container.scss with a default max size of $container-max-width-x-large (1140px).l-container--max-large and l-container--narrow &
l-container--max-medium using the new container mixin parameters in layout.scss$container-max-width-large and for left-aligned to $container-max-width-hugeembed included in full Profile when the videoEmbed context is provided by profile.config.yml to profile--full.twigresource.scss and resource--card.twig respectivelyresources.config.ymlpost--full.twigjob.scss and a large one for accessories in job--full.twigpage.scsscontainer-max-width-large container in page.scssImprovements
sass() calls in gulpfile.jsFixes
resource--full.twigfeatures.scssNew map for Brazil
map-brcountry-maps.config.ymlImprove display of list item and resource thumbnails
Fix variable width backgrounds for Resource teasers by allowing images to be shown and fixing the “background only” hidden image misbehavior.
New
data-style from List item when it’s not backgroundOnly in list-item.twigresource.scssAdd a GDPR acceptance to the Mailing List unit
To mirror the newsletter CTA and use it in the site footer, include the acceptance.
New
sitePolicy check to mailing-list-form.twig and its configSass global function deprecation in favor of modules
Global functions are replaced by module functions:
@use "sass:color"; and color.channel in stead of red(), blue(), green(), and color.adjust in stead of transparentize(), lighten(), and darken()@use "sass:list"; and list.index() in stead of index()@use "sass:map"; and map.get() in stead of map-get()@use "sass:meta"; and meta.type-of() in stead of type-of()@use "sass:string"; and string.slice in stead of str-slice(), string.length in stead of str-length()math.percentage in stead of percentage() (sass:math already in use)New Banner area positioned background photo and Agenda ajustments fixes
Create a variant for a section (e.g. in a banner) that positions a column (i.e. area) with a background image to its start or end 1/3, and wrap text so that it doesn’t overlap
New
positioned-backround.scss mixinpositioned-background--section, with 2 positions: start and end, to banner.config.ymlbackground--section variant content wrapper to the positioned-background.scss from the section.scss mixinFixes
agenda.scss)agenda-item.scss)reboot.scss (tag: v2.45.2)Event Agenda UX overhaul and maintenance update
Main new updates are that:
New
Add a new process_agenda() that adds classes, ARIA attributes, and prepares agenda items to be opened in modals
Split the display of the Agenda for no-js (the previous behavior) and with-js the new open in modal in agenda.scss
Style the featherlight container for an Agenda item in agenda-item.scss
a71944c3d 2024-11-21 New one-liner override in Agenda unit: If the oneLiner is present in an Agenda date, the day is no longer numbered and instead the week day: one-liner combo is shown in agenda.twig (tag: v2.44.2)
e24993eb0 2024-11-21 New well-being (wellbeing) and admin admin color codes for Agenda item unit in agenda-item.scss (tag: v2.44.1)
Improvements
leaf-border-radius mixin in tag.scsssia_global_variables to the preview templatesFixes
oneLiner and use a dateIndex and skippedDates to adjust day numberings in agenda.twig (tag: v2.44.3)agenda.config.yml) for the previous fix (tag: v2.44.4)build task using WIP files (tag: v2.44.5)Maintenance update, mostly campaign related fixes
Catch-up on cosmetic and functional commits, plus the new banner UI color improvement:
Fixes
has-overlay elements (e.g. the banner) by overwriting the black heading color with a new rule taken from the theme mixin targetting headings in campaign-impact-blueprint.scsssuccess) or negative (error) response in global.js:process_mailing_list_forms() (tag: v2.43.4, tag: releases/v2.43.4)campaign-impact-blueprint.scss and mailing-list-form.scss (tag: v2.43.3, tag: releases/v2.43.3)input type='text') turning black on hover and focus in Impact Blueprint caused by greedy rule destined for submit elements in campaign-impact-blueprint.scss (tag: v2.43.2, tag: releases/v2.43.2)mailing-list-form.twig (tag: v2.43.1, tag: releases/v2.43.1)
Improvements
gulp build from deploy.sh and allow for leaving work in progress un-stagedProcess mailing list subscriptions asynchronously MVP
Hook via JS into the mailing list forms that have a specific class and, when a global variable is present, configure the form’s submit handler to format and send input data to an endpoint.
Once the response comes, adapt the UI to reflect the positive or negative outcome. When it’s positive, send a Mailing list subscribe event to GTM.
New
global.js for hijacking the form’s submit handler to POSTing depending on config and update the UI depending on the resultcontext.preview.inlineScript (used in mailing-list-form.config.yml) processed in preview.twig and preview-rtl.twig and added to the head elementmailing-list-form) by adding the signaling async class and providing global window variables to develop the global.js:process_mailing_list_forms() handlerImprovements
mailing-list-form.scss r-content region display in campaign-impact-blueprint.scssglobal.js after the jQuery( document ).ready event in discreete functions to improve the readability of the callback functionFirst branded campaign styles for Impact Blueprint
Create a mechanism for campaigns to style pages:
scss/campaignsgulp watcherr-content regionNew
scss/campaigns/ folder in styles_campaigns() in gulpfiletemplate/impact-blueprintscss/campaigns/campaign-impact-blueprint.scssImprovements
page-lead width to 84% below a screen size of $breakpoint-mediumFixes
contain (tag: v2.41.2)contain background for Resource teaser or list item (tag: v2.41.1)New Mailing List Form unit and Mailjet embed unit components
New
unit/forms/mailing-list-form.twig.unit/mailjet-embedded-form.twig with support for additional list opt-ins.New Resources group template
Needed for the new resources block.
New
group/resources.twig with a listing display.Update npm depenencies for ARM architecture
Dependencies
package.json after cleaning node_modulesFixes
assets/src/scss/vendor/featherlight.scss_wp-social-login.scss and _m-modal-login-register.scssBring in the style of Modal Login and Social Login
To improve the UI of community voting, style the links used in Wordpress for logging in with Wordpress Social Login, and the display of the custom Modal Login Register.
New
wordpress/adapter for the WP Social Login plugin in wp-social-login.scss that, in theory, shows the “Connect with X” links (the text is heavily filtered)wordpress/adapter for the Modal Login Register custom plugin in m-modal-login-register.scss that improves spacing and remove outdated “icons” New map for Bulgaria
New
map-bgcountry-maps.config.ymlcountry-switcher.config.ymlNew icon for the X social network
New
x-icon.svg in with-icon.scss mixin as --xcomFixes
resource--full.twig checking only for fields, but not externalLink or fileLinkMinor UI improvements
Better spacing for the select2 Drupal frontend adapter, unhidden focus area in a dashboard block, correct parent component in audience.twig inclusion of link.
Improved incubation platform iconography and content meta
Add the necessary icons for audience, focus areas, and content types. Create units for each and load them in the meta unit if present. Enhance the Resource and Guidelines entity context for improved meta.
New
icons.config.yml styled in mixins/with-icon.scssaudio, document, tool and video to mixins/with-icon.scsscomponents/unit/audience/ styled with unit/audience.scss including the with-icon mixincomponents/unit/content-type/ styled with unit/content-type.scss including the with-icon mixincomponents/unit/focus-areas/ styled with unit/focus-areas.scss including the with-icon mixincomponents/unit/meta/components/entity/guidelines/components/entity/resource/Improvements
list-item view mode for Guidelines (guidelines.config.yml) and Resource (resource.config.yml)drupal-8/frontend adapterImprove forms and fix grids and one Drupal 10 JS adapter
Improvements
legend in base/forms.scsslegend styling in adapter/drupal-8/frontend/forms.scsslabel elementsz-index for the __content-wrapper class attribute selector in mixins/section.scssfieldset, as they should have been, in base/forms.twigt-theme or t-background in the class attribute from mixins/theme.scssFixes
[class*='col'] firing also on an html element with a color class in page-lead.scssonce in prevend-double-submission-adapter.jsrainbow decoration showing over text in unit/banner.scss by specifiying a negative z-indexicon-SIA and icon-sia as modifiers in both templates (e.g. app-homepage) and SCSS (e.g. mixins/theme.scss) by using exclusively icon-sia, lowercaseDrupal adapters compatible with Drupal 10
New
drupal-8 JS adapters to include once as a parameter and rewrite where it’s in use after jquery.once was deprecated in Drupal 9.2.0Fixes
gulp-svgmin package from gulpfile.jsAdd India to Country Maps config
There is no country map icon.
country-maps.config.ymlInline progress bars for reports usage
Create a progress bar variant that’s small enough to be used inline with text. While at it, improve progress bar Stat contrast by defaulting to the malibu background
New
inline variant to both stat.config.yml and stat.scssprogress-bar variant in stat.scssImprovements
stat.scssContained Banner variant
For text-only banners, provide a ‘containered’ variant that has its content wrapper inherit a layout container via the section mixin.
New
--containered-content rules including container to the section mixed incontainered-content to one of the Banner’s variants (half-page, accent background, themed, contained content)New intense overlay shown in Banner
Provide the variant of dark overlay when the text is really not shining through a background image.
New
overlay mixin contained in has-overlay differently when modified with --intense-overlayCover full-height variant in banner.config.ymlFixes
l-section and, more importantly, l-section--cover from Hero (hero.twig) causing Page lead to ‘cover’ the whole page, and include the section mixin in the hero unitlead (tag: v2.27.2)has-[]-color) (tag: v2.27.1)Improved landing page elements
More flexible banner elements, condensed event lists, lead text in features, and a One True CTA proof of concept.
Better banners Position smaller, transparent background pngs on a banners. A clearer ouline of variants in the library.
Condensed list items
Used in Events on a Landing page, the “condensed” concept it futher minified, with no more swatch spacing and a “listicle” heading.
One True CTA (W.I.P.)
Start working on an attention grabber that’s on the page only once. A use-case is a site-wide campaign that has a CTA pointing to it on all other pages. For now, the presentation is unsatisfactory.
New
positioned-background modifiers to place smaller graphic decorations and the layout key for cover or half-page sizinglist-item mixinone-true-cta variant that’s positioned right above the page content (i.e. sometimes below the site navigation) and has an accent backgroundfull-height mixin, used by section and, by extension, banner with full-height layout variantburied level of z-index in the z-index config, used for background imagespositioned-background mixin that sents the container’s position as relative positions a background-wrapper element depending on X and Y axis modifiers, with it having a contain background and a maximum 33% area, used for positioned background sections and bannerslead unit element to featureslayout value in the display context property in the get_component_class Twig adapter method in fractal.jsImprovements
banner.config.yml and the CTA variants in cta.config.yml to showcase the many variants using as few pages as possibleREADME.mdcolors configbanner into the section mixin it uses in preparation for a Section unitl-half-page as a selector to the layout utilitiesFixes
half-page doesn’t misbehave when the content would need more than 50vh by setting it as min-heighthas-drop-cap WP selector in the wordpress adapterImproved full Venue display
When there’s no content, show the map in a 21by9 container.
New
full-width modifier to the location container when there’s no content in venue--full.twigc-venue__location--full-width class in venue.scssNew Condensed view mode for Event entity
Re-use the list item view mode to create a shorter list of events.
New
condensed view mode to the Event entity config event.config.yml using the list-item viewcondensed view mode in event.scssReverse the build deploy approach to always build when deploying
After again skipping the correct library build before a deploy, the default is now to build the library before a deploy.
Fixes
deploy.sh from default false --build to default false --skip-buildMaintenance update, spacing improvement and cosmetic fixes
After bringing in more elements into the A&AP, small discrepancies appeared, especially since Bootstrap overwrites are still required.
Improvements
section.scss%micro in tag.scss:last-child in callout.scssdashboard-block.scssFixes
with-country-map media in event.scssbutton element (not necessary for a) in button.scsscontainer-with-background.scss$small breakpoint in list-item.scssNew map for Moldova
New
map-mdcountry-maps.config.ymlFixes
page-lead.scss) variantsNew Entity embed component and better Venue
Add a component that wraps around an entity and loads its template. The context is the entity itself and it’s used as a placeholder for a Gutenberg block.
New
entity-embed.twig) unit component serving as an adapterlist-item view mode as background onlyImprovements
list-item.scss mixinFixes
list-item.scss mixin combined with a new modifier class in list-item.twigNew Venue entity template
New
venue.twig) styled in venue.scssembed.twig shown in 1x1 ratio and use in the full Venue entity templateratio context key but default to 1 by 1 for maps and 16 by 9 for videoFixes
wordpress-admin.scssMulti-day agenda improvements
Improvements
agenda.twig) and improve spacing in agenda.scssmeta.scssNew Agenda component with parallel sessions
Used in connection with an event, the Agenda component describes days, time slots as Agenda items, and, for parallel sessions, sub-sessions. For each time slot it loads the Agenda item component which, in turn, might load it’s own parallel sessions.
New
agenda-item.twig) styled by agenda-item.scss and recursively calling itself once if necessaryagenda.twig) styled by agenda.scss using Agenda itemsdate.twig) type of processing when timestamp is in the context and a purely decorative option when decorative is in the display.modifiers context array, and document the possible behaviorsnoun-location-pin-1515429.svg in with-icon.scss mixin as --direction or --locationlocation.twig using the location pin iconlocation as an element of Meta (meta.twig), used in Agenda itemtag.scss used by the Tag unit in tag.scssindex-card.config.yml and index-card.scssFixes
--blocky Heading variantindex-card.scssminimal-link() mixing not specifiying it’s own border color in the links.scss mixinmeta.scssmuted color in the colors.scss config to increase contrast with light-grayNew map for Mexico
map-mxcountry-maps.config.ymlNew the Eventbrite embedded checkout unit component
A basic component that has an event id parameter and calls the Eventbrite widgets script.
New
eventbrite-checkout.twig minimally styled by eventbrite-checkout.scss that takes a number (eventId) as context parameter and calls the Eventbrite widgets.js script Show the number of votes in a Venture’s meta
New
likes.twig minimally styled by likes.scss that takes a number (count) and a text as parameters and shows the heart icon with-icon.scss mixin (also with likes as a modifier)likes values to the Venture entity (venture.twig)container in a Page with the results modifier in page.scssFixes
meta.items switch from list-item.twigleft property in the offscreen mixin (using $startDirection triggers a horizontal scrollbar in RTL)Adjust Figures in columns on small screens
figures.scssBuild the library
Maintenance update, mainly fixes for Community Voting
Fixes
Build the library
Advance Community Voting
Now there’s at least the voting bullentin. And there’s a label to the sharing links, e.g. ‘Share’.
New
community-voting.scsssocial-links.scss)eid- in all venture.twig variantsglobal.js::addQueryStringParameter()Fixes
min-height in a video hero in hero.scssProvide LTR areas on RTL pages
Adjust styling so that blocks on the page can have a specified direction (e.g. Vision Statement is in a banner and always )
New
reboot.scss for [dir='rtl'] body [dir='ltr'] and viceversadir context value in the Banner unit (banner.twig) and Signup or follow (signup-or-follow.twig)Fixes
New Tour group included in Community Voting region
Add a new Tour group that has a couple of parameters (like autostart or seen or tour id) and generates a progressively enhanced display of a series of steps that can show after the page loads or on a modal opener button.
After the first view of the modal is seen, a cookie like seen-${tourId} is written for 30 days and the button fades in the background. In the library, the tour’s id is ‘demo’, which prevents keep the autostart alive.
Include the tour in the only region that necessitates it right now: Community Voting.
New
tour.twig styled in tour.scss, designed to be in a modal, progressively enhancedpreloading-backgrounds in animation.scss, used by the Featherlight prelaoderfeatherlight.js and featherlight.scss) to provide inline loading via buttons (Magnificent Popup needs a href and even then it’s confused)o-modal-trigger behavior in global.jsgulpfile.js.featherlight in the Theme (theme.scss) mixininfo-box.twig) that loads the tag unit in and stylecommunity-voting.twig and its configFixes
button.scss and add a new variant to button.config.ymlshowInModal in from the Index Card (index-card.twig) to the Headshot (headshot.twig) and Logo (``)_community-voting.scssNew Community Voting region
New
community-voting.twig) that, for now, passes on entities to the Ventures groupr-comunity-voting) as a fluid container from page.scssImprovements
card.twigcard.scss and list-item.scssFixes
notice to prevent propagationwarning variant to task-list.scssincubation-phase--full.twigNew experts and coaches area in full incubation phase
New
index-card.scss and rely on the processor to remove links where access should not existventure-match--full.twigincubation-phase--full.twigFixes
u-url link in the p-name span in index-card.twig and adapt the sr-only() elements when embedded in the Venture entity in venture.scssincubation-phase.scss and rely on the processor to add the l-grid modifier classesFix Jordan and Kazakhstan flags and display matches in Profile
For some reason, KZ had the JO shape, and JO… I don’t know which in the Noun collection. The KZ flag was actually in Kuwait.
New
profile--full.twigFixes
map-jo.svg) and KZ (map-kz.svg) flagsNew Action Bar unit and App Bar region
Create an action bar that holds buttons and links for an entity. Create the App Bar for full view modes that stays fixed at the bottom of the screen, including the action bar.
Include an Action Bar in all entity templates and Card, List item, and Dashboard List Item, except for the entities’ full view mode templates, where the App Bar is in use.
New
action-bar.twig styled in action-bar.scss, checking for a button or for linksapp-bar.twig styled in app-bar.scss and including delegating a button and links to an Action bar unitz-index to config/z-index.scss called $z-index-apps and sitting below navigation and modalsAdjust templates and task runners for Drupal 8+
Adapt Gulp tasks to generate LTR and RTL styles and JS for Drupal 8, and simplify the adapter specific style generation. Plus many adjustments to integrate the additional data required by the incubation platform.
New
src/js/adapter/drupal-8 folder and add the scripts_drupal_8() task runner to gulpfile.jsjs scripts into global and adapter focused in watch() Gulp task runnerscss/adapter/drupal-8/index.scss instead of processing the entire scss folder each timemedia-query() mixin in favor of the CSS specificationventure--full.twigFixes
container-with-background.scss .c-menu specificitylist-item.scss .c-country-map sizetheme.scss .c-icon case for ‘icon-sia’ (no more caps)workflow-card.scss position adjustment for better readabilityworkflow-entity.scss absolute position timeline.scss minimal variant on larger screen search-form.scss button specificitymeta.scss byline marginsdashboard-block.scss workflow-info static position in tight spacesspine-navigation.scss page-lead spacingfocused.scss page-lead sizingdashboard.scss account sizing and smaller columns country mapssite-navigation.scss vertical variant menu item sizessecondary-navigation.scss menu spacingpage-lead.scss flexible spacing without heroentity: event, finalist, guidelines, incubation_phase, meeting, organization, profile, resource, support-role, team, venture-match, ventureitems is empty in list-item.twig and add a class on the item corresponding with the media content to allow for different styling items--x class pattern in workflow-info.twig to make sure all items fit regardless of the containing element’s sizeevent--full.twig and fix update deprecated of teaser content (used to be in a lead)incubation-phase.twigmeta display instead of simply position and company in profile--full.twig and realign details’ positionsrow element in dashboard.twigNew app icon for website and social for TikTok
New
tiktok-icon.svg) to the social library and include in social share demos and include in with-icon.scssnoun-web-1515383.svg) to the App scetion of Icons brand and include in Profile and Venture index card demos include in with-icon.scssicons.config.yml where I see now that they don’t fitPurely decorative Card and List item thumbnails
Check for a background only attribute in Card and List item, and when found, rely exclusively on the figure background image and don’t load the file as an imge.
A use case are Venture thumbnails that are on very heavy pages and come from YouTube so they have no SEO or accessibility value.
New
image.backgroundOnly attribute, don’t load the file itself in card.twig and list-item.twig Unitssoft-rolling-backgrounds animation config with very light theme accent colorscard.scss and list-item.scss mixinsImprovements
rolling-backgrounds animation configFixes
data- to src and wait for JS to takeoverglobal.js for lazy loading that takes the data-src attribute and clones it as src when the doc is readyfor of Newsletter form email field label in newsletter-form.twig form::before size in _with-icon.scssSet the Page lead region default to centered and add a left-aligned variant
Since the Page lead looks good full width when it’s content heavy, e.g. in a post that holds a meta and byline. By setting the default to be centered, pages can now have heros without having a short tile looking stranded on the left side.
New
container() by default in page-lead.scssleft-aligned variant to Page lead that sets the heading and accessories to full-width (the previous behavior)Fixes
Expand the Banner unit with huge and cover variants
New
50vh) and cover (100vh) variants to the Banner unit (banner.scss) adjusted to the header region (r-site-header) when it’s presentwordpress/admin/layout.scssFixes
callout.scssnewsletter-form.scss) regression from the changed labelcontainer() in page.scss full entity has-overlay variants in theme.scsssia-leaf.twigNew password only form template unit and form in Focused screen template
New
password-form) to unit/forms holding only a password input and a submit buttonform in the Focused screen (focused-screen) template and load it if present403) to error-pagesFixes
focused.scss)UI fixes for menus and Page lead
Fixes
page-lead.scsshover state of current menu item links in theme.scssdd and dt elements in reboot.scssfor without a target in newsletter-form.twigNew Notification dot unit
A “dot” notification that can be placed on top of another relatively positioned element.
New
notification-dot) unit and its associated styling.Fixes
Right to left versions
Split app styles into the two main directions: left to right (LTR) and right to left (RTL). In order to generate a version pass variables from the environment to the task runner and then to SCSS.
Generate RTL Wordpress single demos in Single Rtl and both versions on build.
Examples:
gulp runs the “default” LTR version and generates ‘-ltr-‘ files like app-ltr.cssgulp --dir=rtl runs RTL version and generates ‘-rtl-‘ files like app-rtl-wordpress.cssNew
gulp-sass-variables dev npm dependency as sassVariables in gulpfile.js and to package.jsonDIRECTION constant in gulpfile.js that looks for the dir environment argument in argsget_sass_variables() that takes a string direction as parameter, with the above DIRECTION as the defaultsass by piping generated directional variables via sassVariables() from styles tasks that have their own new direction parameter defaulting to DIRECTIONstyles_rtl() and styles_rtl_wordpress() tasks used only by the build series to reverse direction of their counterparts _preview-rtl.twig and use it in the Single Rtl demo (single-rtl.config.yml)SCSS files to replace “left” and “right” with $startDirection and $endDirection, respectivelyAdd the possibility to split organizations into sections
In order to show tiered partners, display organizations in sections, each with their own heading.
New
sections in the context of Organizations (organizations.twig)Unify profile size on the international team page layout
Introduce the layout folder that ads specificity to SIA Website layouts and use it to unify the sizes of profile cards for the international team page.
New
scss\layout folder with its own index and the first specific layout for _team-international.scssBring in WP block editor styles
New
block_editor.scssFixes
_grid.scsstheme.scssNew Categories unit included in meta
Wordpress Articles need a separate Category unit incuded in Lead or Teasers.
New
categories.twig) component with no styling, and include it in Meta (meta.twig)New Notice unit for embedded warnings
Show minor notices (e.g. a CTA that isn’t shown because the target page is not available) inside other components, right now in CTA.
New
notice.twig) component with minimal color-coded and swatch styling, and include it in CTA (cta.twig)Fixes
hidden selectorsNew adapter for the WP Cookie Notice plugin and 96% WP coverage
Still no Comments and Color palette
New
adapter/plugin/cookie-notice.scss) in the Wordpress adapter and extend the Status Messages regionFixes
event-full.twig)events.twig) with no configuration and improve checks in List Item by not trying to show a highlight when there the highlight.config is not setFinish Wordpress Welcome Panel styling and brand type
New
#welcome-panel) styling to clean-up and match SIA typography in admin/_layout.scssfont-family stack in the new adapter/wordpress/admin/_typography.scss included in admin.scssFixes
follow variable is set in the signup-or-follow groupNew maps for Jordan, Lebanon, and Poland
map-jo, map-lb, map-plcountry-maps.config.ymlImprove Feedback Widget styling
Adjust to section spacing assuming the widget comes after a section. Might not.
Improve Site Footer styling
Adjust Country Map, Site Footer, Section, Theme, Container with Background styles.
New Country Switcher component included in Site Footer and open as a modal from Site Header
New
country-switcher.twig) with 3 variants: default, offscreen, and modal, styled in country-switcher.scss and included in Site Footer region (site-footer.twig), showcased in the Single demo (single.config.yml)icons.config.yml base and with-icon.scss mixin#country-switcher)o-modal-trigger and opens a type ‘inline for the former (e.g. the country switcher in site header showing the element from the site footer)global.js, including the send_GTM_event() method for file downloadsImprovements
magnificent-popup.scss)drop animation to animations.scss configjs-toggle.scss which was defining styles for the hamburger, and move specificit styles to site-search region and offscreen-nav.scss mixin<title> elements from SVG iconshorizontal Team variant to Teams group config (teams.config.yml) which is used by Country Switcher and landing page templates with CTA forwardersFixes
--with-iconFinish modal and full Profile styling
Improvements
magnificent-popup.scss)profile.scss) and layout in profile--full.twigNew
Adapt the Wordpress login page and admin layout
New
adapter/wordpress) and Gulp tasks to fit admin styles (admin.scss) and generate a separate admin disc/css/admin-wordpresslogin.scssImprovements
icon.twig for icon filters consistency and adjust icon.scss for the SIA-icon fileAdapt the Wordpress columns block and fix mobile Timeline
New
wp-block-columns to use the grid mixin in worpdress adapterpage.scss), .wp-block-columns extend the fluid containerImprovements
callout.scss) leaf points to text, not outside timeline.scss) readable on very small screensFixes
timeline.scss)Remove superfluous company names from team member profile collection
And later build the library
Improvements
profiles.scss) to hide company name for team membersUpdate Photography Brand Assets config
Repeat the one below
Not used to pushing majors
Finally finish the Venture entity template
Improvements
Fixes
Improve Page Section styling for calmer pages
And later build the library
New
single.config.ymlImprovements
Adapt the WP Gallery block
New
wordpress adapter to work by extending the wp-block-gallery to use the grid mixinImprovements
Update Brand Photography
New
photography and assets--photographyNew Site Search unit in Site Header region
New
site-search) with collapsible search boxImprovements
swatch)Fixes
container-with-background)rowFit Page Lead into Focused templates
New
focused.scss)un_container.scss) that resets the container mixin rulesFixes
configs that used url instead of href for Breadcrumb configurationFix assumption that the last breadcrumb has no link in Breadcrumbs unit and check instead for the href property
New Teams group and Team with country map variant
New
horizontal) variant to Country Map unit (country-map.twig and country-map.scss)team.twig) to delegate to Country mapteams.twig) with 2 variants: list and country mapImprovements
country-map.scss) for smallest screenscard.twig)entities.twig)Landing Page Demo and better Page Lead with supraheading
New
Fixes
page-lead.scss) to accomodate a supraheading in Compact and Blend-in variantsNew list variant and logos for Features
New
features) can now display a logo instead of an icon, and has a list (vertical) variant used by Awards (which also use logos)New Brand Assets templates for Photography and Typography
New
assets.twig) with 2 variants: Typography and Photography loading their own respective hidden templates (photography and typography)get-in-touch) content to allow including container() mixin in Page styles (page.scss)Improvements
figure) outputs a title attribute for img Visual Features and Sections updates and fixes
Improvements
Fixes
Icons config is available to templates and a portability proof of concept
When the icons config is updated, a json file is generated via Gulp to be consumed by templating languages.
New
icons.config.yml) to use objects instead of arraysconf gulp task (conf()) wathing changes to icons.config.ymlbanner.twig) variant for flourishesImprovements
page-lead.twig) for pages where the title is closer to chrome than contentsite-footer.twig) is independent of overall theme applied to bodyFixes
themes.scss utility to ensure that themed elements embedded in themed elements don’t inherit from the parentSmarter Grid mixin and Features group
When a grid component is classed with the number of items, avoid awkward intermediate layouts (2 columns for 3 items or 3 columns for 4 items).
New
items parameter to grid.scss mixin that prevents awkward spacing for few itemsfeatures.twig) and styling (features.scss)impact-fields-brief.twig)utilities/grids.scssImprovements
sia-flower and impact-fields-brief)SIA Leaf and balanced Theme backgrounds
Improvements
theme--$theme-id in theme.scss mixin) to reduce color scale more for Awarenessbanner.scss)Fixes
--legacy variant for all 5 icons and the 2 templates (sia-flower--legacy.twig and impact-fields-brief--legacy.twig)Error (404) and Search page templates
New
unit/search-result;group/search-results;template/search;templates/error-pages/404.twig;region/page-lead.twig) for functional pages (e.g. Search) that require a more toned down header;unit/banner.twig), used in the 404 template to send to homepage;unit/forms/search-form.twig) for keyword, method, action, and input name.Better Page Leads, Pages, and Headings
New
brand/flourishes--themed-rainbow.twig;container() mixin used by updated bootstrap-grid.scss, page-lead.scss, and page.scss for direct descendants, allowing for using the Bootstrap measurements at willreveal-opacity) in animation.scss used by the Themed Rainbow flourish’s elementsFix Menu links specificity in theme.scss
Refactor Venture entity and include Stage and SDG display
New
unit/venture-stage) unit, stage icon variants in mixins/with-icon.scss;icon-un-sdgs.svg) icon in assets/src/graphic;unit/venture-stage) unit, UN SDG icon variant in mixins/with-icon.scss;unit/meta.twig);showInModal parameter for base/link.twig triggering the JS event binding;lazy parameter for unit/media.twig adding the loading='lazy' attribute to the image;data-style HTML attribute in unit/card.twig and unit/list-item.twig for lazy media triggering the post DOMContentLoaded call for the background images. group/ventures.twig with a grid display.Fixes
--one-liner.twig variant of Incubation Phase and use a conditional in the default template;assets/src/scss.New Team entity component and Organization variants
New
entity/organization.config.yml and styling in organization.scss.entity/team.config.yml and styling in team.scss, with one-liner variant included in Organization ‘Licensee’ variant.Improvements
:last-child in get-in-touch.scss.New Timeline ‘text only’ variant
New
unit/timeline.config.yml and styling in timeline.scss.New KPIs section in All icons Icons brand component
New
New Job entity and Jobs group
New
entity/job.twig with teaser and compact list item variants and styling;group/jobs.twig with a listing display.Showcase the 3 Grids in Base components
New
base\grids.twig) to show the 3 types of grids;@included in Base and Brand: Themes, Grids, Color, and Icons. Improvements
l-spacer layout utility with its ‘compact’ class modifier;grid mixin spacing by removing the row-gap and leave it to the elements it contains.Bundle JavaScript with Gulp and Profile in modals
Improvements
app.js with Gulp;profile--full switches;New ‘Get in touch’ CTA region and unified Profile templates
Add a region called ‘Get in touch’ to close the page with a message to reach out to an actual person, albeit with a recommended group email.
Create the Profile entity templates and re-use them (except the full variant) in Finalist, Support Role, and User.
New
region/get-in-touch.twig and minimal styling in region/_profile.scss extending people-list-item() and people-card() mixins;entity/profile.twig and styling in entity/_profile.scss extending people-list-item() and people-card() mixins;group/profiles.twig;profile entity and simplifying styling.Improvements
people-list-item();{component}__media-wrapper and {component}__content-wrapper markups.Fixes
New Testimonial entity and Testimonials group
New
entity/testimonial.twig with no variants and no styling;group/testimonials.twig with a wide grid display;utilities/grids.scss. New Press mention entity and Press Mentions group
New
entity/press-mention.twig and styling in entity/_press_mention.scss;group/press-mentions.twig;cite. Fixes
timeline.twig;href instead of url.New Revolving Text unit
New
unit/revolving-text.twig, its JavaScript event listener in global.js, and styling in revolving-text.scss.Standardized display of Card and List item teasers
New
list-item view mode by creating a ‘List item’ unit (list-item) with 2 variants (default ‘comfy’, and ‘compact’) and including it in Event, Guidelines, Post (‘compact’), Resource, and Venture;card view mode by creating a ‘Card’ unit (card) and including it in Event, Post, and Venture;entities.twig) by checking if the items have their own entity type before using the default collection entity type;formatted-html.twig) that simply outputs raw content used for Wordpress config blocks;pager.twig);Improvements`
card.twig) and rendered in _preview.twig.callout.twig);07-demo\wordpress config by using single instead of index to clarify usage. Fixes
page.config.yml;date.twig);New list item variant for Post entity
New
post) has a styled list-item variant;with-media mixin used by post--list-item in post.scss.Fixes
meta.twig) when there is no items key set.content context key.New Articles group and Post unit teaser variant
New
post) has a styled teaser variant;articles.twig) shows entities of post type in a grid or a list, depending on the listClass key;grid mixin is also used with the [class*='--l-grid'] wildcard selector from grids.scss;card mixin has a ‘tight’ variant that only uses a $hairline-spacing padding, and is used in event--teaser and post--teaser.Improvements
watch task runner thanks to the newly required gulp-dependents and use of the Gulp 4 since config for src in gulpfile.js.Refactor Partners into Organzations and fix Organization logo variant
Provide flexibility for subsets of organizations: ventures, hosts, partners.
New
partners becomes organizations, with the collection display: { component: collection.display.component } reflecting the subset where the case may be.Fixes
organization--logo.twig and all appearances of partners.Display rendered HTML in Call to Action
In order to display rendered HTML for form (e.g. a Contact form CTA), add the possibility to display the raw rendered key.
New
rendered in cta.twig.Fixes
[--theme-{$theme-id}] to brand.scss;url with href wherever socialLinks was used;Fill up the Page Footer region
Add the Signup or Follow region, regional and strategic partner logos, copyright details.
New
site-footer) includes signup-or-follow, partners and copyright details with imprint or privacy policy links.Improvements
--blend-in variant and type modifier class for sharing or newsletter;--inverted variant for dark backgrounds;--minor heading more fitting general type instead of the block-header unit;post--full uses the container class instead of the col-x to simplify overally markup;Fixes
Improve the Post full entity template with CTAs for sharing and signup
Decide to display template elements that are not directly entity properties in --full variant templates. Start with the Post entity and its sharing or signup section.
New
post--full.twig: sharing (social-links.twig) and signup (cta.twig with the ‘newsletter’ variant), and configure them in post.config.yml default context;icons.config.yml and with-icon.scss.Improvements
post.twig;rendered items in Social links unit and display them as is in social-links.twig;share-or-signup template and assets, create signup-or-follow in its place and replace the references;cta.twig and styles in _cta.scssheading.config.yml.Fixes
privacyNotice config key to newsletter-form.config.yml and in the template.l-section class from r-page-content in wordpress/index.config.yml;_heading.scss;log.info() mention of WordPress styles in watch task runner in gulpfile.jsfigure.twigalt attribute for Headshot unit by leaving it blank and moving the ‘Photo of’ reference to the title attribute in headshot.twig.Default to the teaser variant for Post and Page entities
Fixes
Page lead display by taking it out of the row of content in post.twig;post--full.twig and page--full.twig component variant files;Page (full) display is using a page builder and remove the Bootstrap layout classes.New icons for heart, link, share, and Headquarter Play chapter
New
icons.config.yml;Fixes
Add the Venture styled tiny variant
Include issues in the the Dashboard Block unit
Provide Drupal 8 frontend specific app styles
New
drupal-app.css which includes first the default assets/src/scss/index.scss and then the adapter/drupal-8/frontend/index.scss.Fixes
math.div().New ‘SIA Logo’ Brand unit including PNG logos
Show figures in the Dashboard template and the Dashboard block unit
New
figures.twig;bubble variant for the Stat unit;Fixes
header element without a heading or button;Improve the summary element and list item Venture Match
New
summary element in Typography base Fixes
Fix display of team in Venture tiny variant
Expand Venture templates to display more detail and adapt to SIA style guide
New
venture--list-item.twig--l-grid variant class to the grid.scsssummary HTML element in list-item.scsswatch() callbacks for Drupal 8 as styles_drupal_8() and styles_drupal_8_admin() called by the Gulp watch() task runneradmin-drupal-8.css as an output of the watch() Gulp task runner and pick from the drupal-8/admin.scss all included filesdrupal-8/admin/_toolbar.scssFixes
adapter SCSS folder by renaming it to drupal-8&__class in list-item.scss breaking inheritance in list-item.scssventure.scss breaking depending on its variant (e.g. team member display)article and h1 HTML elements in for display into a basic p in incubation-phase--one-liner.twigventure.twigbanner and idea properties are set in venture--full.twiggrow from inkaUpdate NPM dependencies
Make siteNavigation context optional in site-header region
Add Montenegro (ME) map to Country Maps and SVG assets
Update npm dependencies, including Fractal
Changes
Fix after forced push from tag while master was behind
Add Congo (CD) and Slovenia (SI) maps to Country Maps and SVG assets
Provide Themes and Colors configs as JSON to be consumed by PHP
colors_json and themes_json) to read _colors.scss and _themes.scss from scss/_config and transform them into JSONReplace host with team members collection in Incubation Phase full variant
Fixes
Add a navigation drawer to Dashboard template and highlight Workflow Info
Changes
Allow Dashboard list item unit to show a color coded status message
Changes
Fixes
Separation between core app and Drupal and Wordpress CSS
Start producing CMS-specific app dist files: app-drupal, app-wordpress, in order to be able to minimize overhead.
Improve ‘Page Lead’ spacing with spine navigation
Fix ‘Site Navigation’ region extra-high leading in ‘vertical’ variant
Fix Dart Sass usage errors (re-build)
[class*="x"] extension by adding a _links mixins repository of: muted, disabled, minimal, and hidden;pow() in luminance() by using 3 instead of 2.4;map-has-key error in get-theme-config() of themes functions;