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.scss
wide
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.scss
teams.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.scss
banner.scss
single.config.yml
Fixes
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-huge
embed
included in full Profile when the videoEmbed
context is provided by profile.config.yml
to profile--full.twig
resource.scss
and resource--card.twig
respectivelyresources.config.yml
post--full.twig
job.scss
and a large one for accessories in job--full.twig
page.scss
container-max-width-large
container in page.scss
Improvements
sass()
calls in gulpfile.js
Fixes
resource--full.twig
features.scss
New map for Brazil
map-br
country-maps.config.yml
Improve 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.twig
resource.scss
Add 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
mixin
positioned-background--section
, with 2 positions: start
and end
, to banner.config.yml
background--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.scss
sia_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.scss
success
) 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.scss
global.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/campaigns
gulp
watcherr-content
regionNew
scss/campaigns/
folder in styles_campaigns()
in gulpfile
template/impact-blueprint
scss/campaigns/campaign-impact-blueprint.scss
Improvements
page-lead
width to 84% below a screen size of $breakpoint-medium
Fixes
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_modules
Fixes
assets/src/scss/vendor/featherlight.scss
_wp-social-login.scss
and _m-modal-login-register.scss
Bring 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-bg
country-maps.config.yml
country-switcher.config.yml
New icon for the X social network
New
x-icon.svg
in with-icon.scss
mixin as --xcom
Fixes
resource--full.twig
checking only for fields
, but not externalLink
or fileLink
Minor 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.scss
audio
, document
, tool
and video
to mixins/with-icon.scss
components/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.scss
legend
styling in adapter/drupal-8/frontend/forms.scss
label
elementsz-index
for the __content-wrapper
class attribute selector in mixins/section.scss
fieldset
, as they should have been, in base/forms.twig
t-theme
or t-background
in the class attribute from mixins/theme.scss
Fixes
[class*='col']
firing also on an html element with a color
class in page-lead.scss
once
in prevend-double-submission-adapter.js
rainbow
decoration showing over text in unit/banner.scss
by specifiying a negative z-index
icon-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.js
Add India to Country Maps config
There is no country map icon.
country-maps.config.yml
Inline 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.scss
progress-bar
variant in stat.scss
Improvements
stat.scss
Contained 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-overlay
Cover full-height
variant in banner.config.yml
Fixes
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 features
layout
value in the display
context
property in the get_component_class
Twig adapter method in fractal.js
Improvements
banner.config.yml
and the CTA variants in cta.config.yml
to showcase the many variants using as few pages as possibleREADME.md
colors
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-height
has-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.twig
c-venue__location--full-width
class in venue.scss
New 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.scss
Reverse 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-build
Maintenance 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.scss
dashboard-block.scss
Fixes
with-country-map
media in event.scss
button
element (not necessary for a
) in button.scss
container-with-background.scss
$small
breakpoint in list-item.scss
New map for Moldova
New
map-md
country-maps.config.yml
Fixes
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.twig
New Venue entity template
New
venue.twig
) styled in venue.scss
embed.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.scss
Multi-day agenda improvements
Improvements
agenda.twig
) and improve spacing in agenda.scss
meta.scss
New 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 --location
location.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.scss
index-card.config.yml
and index-card.scss
Fixes
--blocky
Heading variantindex-card.scss
minimal-link()
mixing not specifiying it’s own border color in the links.scss
mixinmeta.scss
muted
color in the colors.scss
config to increase contrast with light-gray
New map for Mexico
map-mx
country-maps.config.yml
New 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.scss
Fixes
meta.items
switch from list-item.twig
left
property in the offscreen
mixin (using $startDirection
triggers a horizontal scrollbar in RTL)Adjust Figures in columns on small screens
figures.scss
Build 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.scss
social-links.scss
)eid-
in all venture.twig
variantsglobal.js::addQueryStringParameter()
Fixes
min-height
in a video hero in hero.scss
Provide 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.js
gulpfile.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.yml
showInModal
in from the Index Card (index-card.twig
) to the Headshot (headshot.twig
) and Logo (``)_community-voting.scss
New 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.scss
Improvements
card.twig
card.scss
and list-item.scss
Fixes
notice
to prevent propagationwarning
variant to task-list.scss
incubation-phase--full.twig
New 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.twig
incubation-phase--full.twig
Fixes
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.scss
incubation-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.twig
Fixes
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.js
js
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.twig
Fixes
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 hero
entity
: 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.twig
meta
display instead of simply position and company in profile--full.twig
and realign details’ positionsrow
element in dashboard.twig
New 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.scss
noun-web-1515383.svg
) to the App scetion of Icons brand and include in Profile and Venture index card demos include in with-icon.scss
icons.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 ready
for
of Newsletter form email field label
in newsletter-form.twig
form::before
size in _with-icon.scss
Set 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.scss
left-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.scss
Fixes
callout.scss
newsletter-form.scss
) regression from the changed labelcontainer()
in page.scss
full entity has-overlay
variants in theme.scss
sia-leaf.twig
New 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-pages
Fixes
focused.scss
)UI fixes for menus and Page lead
Fixes
page-lead.scss
hover
state of current menu item links in theme.scss
dd
and dt
elements in reboot.scss
for
without a target in newsletter-form.twig
New 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.css
gulp --dir=rtl
runs RTL version and generates ‘-rtl-‘ files like app-rtl-wordpress.css
New
gulp-sass-variables
dev npm
dependency as sassVariables
in gulpfile.js
and to package.json
DIRECTION
constant in gulpfile.js
that looks for the dir
environment argument in args
get_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 DIRECTION
styles_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.scss
Bring in WP block editor styles
New
block_editor.scss
Fixes
_grid.scss
theme.scss
New 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.scss
font-family
stack in the new adapter/wordpress/admin/_typography.scss
included in admin.scss
Fixes
follow
variable is set in the signup-or-follow
groupNew maps for Jordan, Lebanon, and Poland
map-jo
, map-lb
, map-pl
country-maps.config.yml
Improve 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-icon
Finish modal and full Profile styling
Improvements
magnificent-popup.scss
)profile.scss
) and layout in profile--full.twig
New
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-wordpress
login.scss
Improvements
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.yml
Improvements
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--photography
New Site Search unit in Site Header region
New
site-search
) with collapsible search boxImprovements
swatch
)Fixes
container-with-background
)row
Fit Page Lead into Focused templates
New
focused.scss
)un_container.scss
) that resets the container mixin rulesFixes
config
s 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.yml
banner.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 body
Fixes
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.scss
Improvements
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;@include
d 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.scss
heading.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.js
figure.twig
alt
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.scss
summary
HTML element in list-item.scss
watch()
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.scss
Fixes
adapter
SCSS folder by renaming it to drupal-8
&__class
in list-item.scss
breaking inheritance in list-item.scss
venture.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.twig
venture.twig
banner
and idea
properties are set in venture--full.twig
grow
from inka
Update 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;