Redesign 2020 - production branch#2559
Merged
bretg merged 149 commits intoprebid:masterfrom Dec 9, 2020
Merged
Conversation
Only bring in what we need to keep CSS size down
So that we can include it separately and still use it in webpack build pipeline
For styling and JS
Via browsersync Without this change I was having to wait for Jekyll to finish rebuilding the site in order to see CSS changes
bootstrap import stubbed till we can figure out just which bits we need and can limit the import to keep JS size down
Removing some unneeded CSS/JS dn prep work for new site fonts
Use the same nav struct for mobile view as well
Should see if we can trim this down at some point and not load _all_ of the utility classes
Also fix unbalanced tags and add comments to sort out unbalanced tag
Since the local compiled bootstrap uses features of JS that aren’t supported in IE11 and aren’t being “fixed” by babel in testing.
Switching from sizes in design comp to Minor Thirds ratio to have more difference in font size between the levels.
h5 isn’t used in the content area on the site but adding it here so that it’s available in the future if an h5 is added.
Required adding semi-bold italic font from Google for proper display in browsers.
Leaving italic on h5 since h5 is same size as body copy and leaving italic-semi-bold include to support h5 styling.
Make the overall page wider and the sidebar narrower, then give all that extra space to the content.
It didn’t in review/testing but this tweak will ensure it doesn’t in the future.
# Conflicts: # dev-docs/modules/userId.md
Revert CNAME to be correct for production site before opening a PR. This reverts commit 8c44d99.
So that PR for production site doesn’t block search indexing.
* Initial seutp of Laravel Mix for CSS/JS generation * Inital webpack mix script * Additional mix packages and build scripts * Stub source files * Adds bourbon and include-media for build * Import sass from main site * Initial import of required Bootstrap styling Only bring in what we need to keep CSS size down * Mark jQuery as an external So that we can include it separately and still use it in webpack build pipeline * Add Bootstrap and dependency For styling and JS * Ignore changes to build support files * Setup support to automatically reload CSS when it changes Via browsersync Without this change I was having to wait for Jekyll to finish rebuilding the site in order to see CSS changes * Initial setup for JS build bootstrap import stubbed till we can figure out just which bits we need and can limit the import to keep JS size down * Add new brand color token for dark colors * Initial work styling header * main CSS build entry point * Initial build of CSS * Initial work to update head for relaunch Removing some unneeded CSS/JS dn prep work for new site fonts * Review navigation markup to work with Bootstrap 4.x * Regenerate production JS * Copy JS with mix to support browsersync reloading * Update nav to show proper main nav items Use the same nav struct for mobile view as well * Enable main nav JS functionality * Load reset styles from Bootstrap * Load the site in Chrome for development * Load utility classes Should see if we can trim this down at some point and not load _all_ of the utility classes * Push nav to the right * Reflow code for better readability Also fix unbalanced tags and add comments to sort out unbalanced tag * Reflow code for better readability * Reload changes to HTML files * Update width to match design comp * Remove VC style helpers from WP They’re not needed on this site * Add another level of spacer To keep with Bootstrap patterns but give us spacer to match the comp * Implemented content and styling for homepage main content area. * Update CNAME * Can’t ignore CSS and JS files The site won’t render correctly on GitHub Pages w/out them. * Delete CNAME * Create CNAME * Delete trailing whitespace * Close tags for better code And so that browsersync integration works correclty * Dev config file So that we can ignore generated files w/out affecting the production process. `bundle exec jekyll serve --config _config.yml,_config_development.yml` * New token for divider color * Initial work on interior page styling * Reflow code to try to make indenting consistent Added character names to conditionals/loops to keep them straight. * In-progress work on left nav Restructuring class handling to DRY up code and reduce complexity of if statements. Tweaking classes to provide styling hooks. Updates for showing active nav sections. * Updating sidebar styling and markup to support comp Still need to add carrot indicators * Move content block to be child of column To get more space between sidebar and content * Don’t output cookie consent unless in production To avoid the on-screen clutter during development * Regenerate CSS * Iterating on interior content styling * Styling interior page bits * Regenerate CSS * Include bootstrap before bourbon To let bourbon `size` mixin override the conflicting mixin from bootstrap * Initial work on footer content and styling * Cleanup nav styling * Update logo to knockout version from comps * Add carrots to sidebar elements * Regenerate JS * Tweak header to better match comp * Iterating on dropdown styling * Dropdown styling tweaks To better match comp. Added section classes to data for styling hooks. * Regenerate CSS * Enabled rollover styling for format tiles Had to move svgs to be inline so we can change styling with CSS. Also changed the markup order so that we can change svgs on link hover. * Card and hover treatment for source cards on medium banner * Social media icons and styling * Tweaks to “footer” on homepage To better match comp. * Regenerate CSS * Don’t index content on review site. * Tweaking font sizes and spacing For better display of content on interior pages * Get rid of wrapper element Since it is preventing proper page width on some interior pages - content is spreading wider than the container * Match table color in comp * Properly mark nav items active that are simple nav items * Get rid of   entities breaking sidebar layout Any spacing/stying is being handled by CSS so no need for these layout bits in the sidebar config file. * Rearrange content for better display in new design * Add space below highlights For better content display * Tweak thead border width To match comp * Keep table looking decent if it overflows the container * Include alert styles to match current site * Regenerate CSS * Better display of category groups in sidebar * Prevent egregiously bad display with nested content blocks * Breathing space above highlights * Extract common head markup Moving it to a single file makes it easy to share common asset include and setup details across all pages on the site. This is a first setp to getting the `head` for video examples cleaned up. * Update video examples to use common head include To DRY up code * Update video sample template To use same design as other pages on the site. * Style video example code like other code blocks * Don’t add bullets to tab list items * Expose standard BS alerts to brand-specific classes squash * Regenerate CSS * Update template to get layout updates To match new design. Also remove trailing whitespace * Reflow code for better readability * Style common bidder tables * Fix tags for proper footer display Also, whitespace updates * Delete trailing whitespace * Update class for styling tweaks * Update template structure for new design Also, delete trailing whitespace * Put margin below sidebar like pb-content So that if sidebar is longer than content we still have the footer pushed down. * Reflow code for better readability * Fix missing closing tags * 404 page layout and styling * Regenerate CSS * Fix button display on smaller screens * Better display of social media on smaller screens * Regenerate CSS * Update README with changes for building assets * Make Codes of Conduct and Policies into collapsible sections * Add styling for custom table By extending Bootstrap styles for ease of maintenance * Make table responsive for example Makes the table scrollable if it’s wider than the space. Have to wrap the markdown in `div` tags and move the Inline Attribution List (https://kramdown.gettalong.org/syntax.html#inline-attribute-lists) to the bottom so that it doesn’t interfere with Markdown parsing of the table. Also need to specify that the `div` contains markdown via `markdown=“1”` based on https://kramdown.gettalong.org/syntax.html#html-blocks * Regenerate CSS * Header padding on mobile * Better mobile display of main nav * Expose sidebar nav via toggle control on mobile * Keep sidebar visible on larger screens But collapse it behind the toggle on smaller screens. * Move margin to footer So that we don’t have extra margin below sidebar when left nav is collapsed on mobile * Better spacing around sidebar on mobile * Update other templates to show collapsed leftnav on mobile * Update extra template to new design for completeness * Regenerate CSS * Use full bootstrap from CDN rather than limited local bootstrap Since the local compiled bootstrap uses features of JS that aren’t supported in IE11 and aren’t being “fixed” by babel in testing. * Tweak to fix hover behavior in IE11 * Regenerate CSS * Adjust font sizes per feedback Switching from sizes in design comp to Minor Thirds ratio to have more difference in font size between the levels. * Add missing heading styling h5 isn’t used in the content area on the site but adding it here so that it’s available in the future if an h5 is added. * Make h4 italic per feedback Required adding semi-bold italic font from Google for proper display in browsers. * Revert italic for h4 after additional feedback Leaving italic on h5 since h5 is same size as body copy and leaving italic-semi-bold include to support h5 styling. * Regenerate CSS * Tweaks to get more space for content Make the overall page wider and the sidebar narrower, then give all that extra space to the content. * Add padding to prevent nav text from running into icon It didn’t in review/testing but this tweak will ensure it doesn’t in the future. * Regenerate CSS * Revert "Update CNAME" Revert CNAME to be correct for production site before opening a PR. This reverts commit 8c44d99. * Remove no-index from headers So that PR for production site doesn’t block search indexing.
Had to move away from JS build process due to issues generating a cross-browser JS file.
Per request.
# Conflicts: # README.md # _assets/sass/components/_pb.scss # _layouts/home.html # assets/css/main-bundle.css # webpack.mix.js
osazos
pushed a commit
to onfocusio/prebid.github.io
that referenced
this pull request
Jan 21, 2021
* Initial seutp of Laravel Mix for CSS/JS generation * Inital webpack mix script * Additional mix packages and build scripts * Stub source files * Adds bourbon and include-media for build * Import sass from main site * Initial import of required Bootstrap styling Only bring in what we need to keep CSS size down * Mark jQuery as an external So that we can include it separately and still use it in webpack build pipeline * Add Bootstrap and dependency For styling and JS * Ignore changes to build support files * Setup support to automatically reload CSS when it changes Via browsersync Without this change I was having to wait for Jekyll to finish rebuilding the site in order to see CSS changes * Initial setup for JS build bootstrap import stubbed till we can figure out just which bits we need and can limit the import to keep JS size down * Add new brand color token for dark colors * Initial work styling header * main CSS build entry point * Initial build of CSS * Initial work to update head for relaunch Removing some unneeded CSS/JS dn prep work for new site fonts * Review navigation markup to work with Bootstrap 4.x * Regenerate production JS * Copy JS with mix to support browsersync reloading * Update nav to show proper main nav items Use the same nav struct for mobile view as well * Enable main nav JS functionality * Load reset styles from Bootstrap * Load the site in Chrome for development * Load utility classes Should see if we can trim this down at some point and not load _all_ of the utility classes * Push nav to the right * Reflow code for better readability Also fix unbalanced tags and add comments to sort out unbalanced tag * Reflow code for better readability * Reload changes to HTML files * Update width to match design comp * Remove VC style helpers from WP They’re not needed on this site * Add another level of spacer To keep with Bootstrap patterns but give us spacer to match the comp * Implemented content and styling for homepage main content area. * Update CNAME * Can’t ignore CSS and JS files The site won’t render correctly on GitHub Pages w/out them. * Delete CNAME * Create CNAME * Delete trailing whitespace * Close tags for better code And so that browsersync integration works correclty * Dev config file So that we can ignore generated files w/out affecting the production process. `bundle exec jekyll serve --config _config.yml,_config_development.yml` * New token for divider color * Initial work on interior page styling * Reflow code to try to make indenting consistent Added character names to conditionals/loops to keep them straight. * In-progress work on left nav Restructuring class handling to DRY up code and reduce complexity of if statements. Tweaking classes to provide styling hooks. Updates for showing active nav sections. * Updating sidebar styling and markup to support comp Still need to add carrot indicators * Move content block to be child of column To get more space between sidebar and content * Don’t output cookie consent unless in production To avoid the on-screen clutter during development * Regenerate CSS * Iterating on interior content styling * Styling interior page bits * Regenerate CSS * Include bootstrap before bourbon To let bourbon `size` mixin override the conflicting mixin from bootstrap * Initial work on footer content and styling * Cleanup nav styling * Update logo to knockout version from comps * Add carrots to sidebar elements * Regenerate JS * Tweak header to better match comp * Iterating on dropdown styling * Dropdown styling tweaks To better match comp. Added section classes to data for styling hooks. * Regenerate CSS * Enabled rollover styling for format tiles Had to move svgs to be inline so we can change styling with CSS. Also changed the markup order so that we can change svgs on link hover. * Card and hover treatment for source cards on medium banner * Social media icons and styling * Tweaks to “footer” on homepage To better match comp. * Regenerate CSS * Don’t index content on review site. * Tweaking font sizes and spacing For better display of content on interior pages * Get rid of wrapper element Since it is preventing proper page width on some interior pages - content is spreading wider than the container * Match table color in comp * Properly mark nav items active that are simple nav items * Get rid of   entities breaking sidebar layout Any spacing/stying is being handled by CSS so no need for these layout bits in the sidebar config file. * Rearrange content for better display in new design * Add space below highlights For better content display * Tweak thead border width To match comp * Keep table looking decent if it overflows the container * Include alert styles to match current site * Regenerate CSS * Better display of category groups in sidebar * Prevent egregiously bad display with nested content blocks * Breathing space above highlights * Extract common head markup Moving it to a single file makes it easy to share common asset include and setup details across all pages on the site. This is a first setp to getting the `head` for video examples cleaned up. * Update video examples to use common head include To DRY up code * Update video sample template To use same design as other pages on the site. * Style video example code like other code blocks * Don’t add bullets to tab list items * Expose standard BS alerts to brand-specific classes squash * Regenerate CSS * Update template to get layout updates To match new design. Also remove trailing whitespace * Reflow code for better readability * Style common bidder tables * Fix tags for proper footer display Also, whitespace updates * Delete trailing whitespace * Update class for styling tweaks * Update template structure for new design Also, delete trailing whitespace * Put margin below sidebar like pb-content So that if sidebar is longer than content we still have the footer pushed down. * Reflow code for better readability * Fix missing closing tags * 404 page layout and styling * Regenerate CSS * Fix button display on smaller screens * Better display of social media on smaller screens * Regenerate CSS * Update README with changes for building assets * Make Codes of Conduct and Policies into collapsible sections * Add styling for custom table By extending Bootstrap styles for ease of maintenance * Make table responsive for example Makes the table scrollable if it’s wider than the space. Have to wrap the markdown in `div` tags and move the Inline Attribution List (https://kramdown.gettalong.org/syntax.html#inline-attribute-lists) to the bottom so that it doesn’t interfere with Markdown parsing of the table. Also need to specify that the `div` contains markdown via `markdown=“1”` based on https://kramdown.gettalong.org/syntax.html#html-blocks * Regenerate CSS * Header padding on mobile * Better mobile display of main nav * Expose sidebar nav via toggle control on mobile * Keep sidebar visible on larger screens But collapse it behind the toggle on smaller screens. * Move margin to footer So that we don’t have extra margin below sidebar when left nav is collapsed on mobile * Better spacing around sidebar on mobile * Update other templates to show collapsed leftnav on mobile * Update extra template to new design for completeness * Regenerate CSS * Use full bootstrap from CDN rather than limited local bootstrap Since the local compiled bootstrap uses features of JS that aren’t supported in IE11 and aren’t being “fixed” by babel in testing. * Tweak to fix hover behavior in IE11 * Regenerate CSS * Adjust font sizes per feedback Switching from sizes in design comp to Minor Thirds ratio to have more difference in font size between the levels. * Add missing heading styling h5 isn’t used in the content area on the site but adding it here so that it’s available in the future if an h5 is added. * Make h4 italic per feedback Required adding semi-bold italic font from Google for proper display in browsers. * Revert italic for h4 after additional feedback Leaving italic on h5 since h5 is same size as body copy and leaving italic-semi-bold include to support h5 styling. * Regenerate CSS * Tweaks to get more space for content Make the overall page wider and the sidebar narrower, then give all that extra space to the content. * Add padding to prevent nav text from running into icon It didn’t in review/testing but this tweak will ensure it doesn’t in the future. * Regenerate CSS * Revert "Update CNAME" Revert CNAME to be correct for production site before opening a PR. This reverts commit 8c44d99. * Remove no-index from headers So that PR for production site doesn’t block search indexing. * Redesign 2020 (prebid#2507) * Initial seutp of Laravel Mix for CSS/JS generation * Inital webpack mix script * Additional mix packages and build scripts * Stub source files * Adds bourbon and include-media for build * Import sass from main site * Initial import of required Bootstrap styling Only bring in what we need to keep CSS size down * Mark jQuery as an external So that we can include it separately and still use it in webpack build pipeline * Add Bootstrap and dependency For styling and JS * Ignore changes to build support files * Setup support to automatically reload CSS when it changes Via browsersync Without this change I was having to wait for Jekyll to finish rebuilding the site in order to see CSS changes * Initial setup for JS build bootstrap import stubbed till we can figure out just which bits we need and can limit the import to keep JS size down * Add new brand color token for dark colors * Initial work styling header * main CSS build entry point * Initial build of CSS * Initial work to update head for relaunch Removing some unneeded CSS/JS dn prep work for new site fonts * Review navigation markup to work with Bootstrap 4.x * Regenerate production JS * Copy JS with mix to support browsersync reloading * Update nav to show proper main nav items Use the same nav struct for mobile view as well * Enable main nav JS functionality * Load reset styles from Bootstrap * Load the site in Chrome for development * Load utility classes Should see if we can trim this down at some point and not load _all_ of the utility classes * Push nav to the right * Reflow code for better readability Also fix unbalanced tags and add comments to sort out unbalanced tag * Reflow code for better readability * Reload changes to HTML files * Update width to match design comp * Remove VC style helpers from WP They’re not needed on this site * Add another level of spacer To keep with Bootstrap patterns but give us spacer to match the comp * Implemented content and styling for homepage main content area. * Update CNAME * Can’t ignore CSS and JS files The site won’t render correctly on GitHub Pages w/out them. * Delete CNAME * Create CNAME * Delete trailing whitespace * Close tags for better code And so that browsersync integration works correclty * Dev config file So that we can ignore generated files w/out affecting the production process. `bundle exec jekyll serve --config _config.yml,_config_development.yml` * New token for divider color * Initial work on interior page styling * Reflow code to try to make indenting consistent Added character names to conditionals/loops to keep them straight. * In-progress work on left nav Restructuring class handling to DRY up code and reduce complexity of if statements. Tweaking classes to provide styling hooks. Updates for showing active nav sections. * Updating sidebar styling and markup to support comp Still need to add carrot indicators * Move content block to be child of column To get more space between sidebar and content * Don’t output cookie consent unless in production To avoid the on-screen clutter during development * Regenerate CSS * Iterating on interior content styling * Styling interior page bits * Regenerate CSS * Include bootstrap before bourbon To let bourbon `size` mixin override the conflicting mixin from bootstrap * Initial work on footer content and styling * Cleanup nav styling * Update logo to knockout version from comps * Add carrots to sidebar elements * Regenerate JS * Tweak header to better match comp * Iterating on dropdown styling * Dropdown styling tweaks To better match comp. Added section classes to data for styling hooks. * Regenerate CSS * Enabled rollover styling for format tiles Had to move svgs to be inline so we can change styling with CSS. Also changed the markup order so that we can change svgs on link hover. * Card and hover treatment for source cards on medium banner * Social media icons and styling * Tweaks to “footer” on homepage To better match comp. * Regenerate CSS * Don’t index content on review site. * Tweaking font sizes and spacing For better display of content on interior pages * Get rid of wrapper element Since it is preventing proper page width on some interior pages - content is spreading wider than the container * Match table color in comp * Properly mark nav items active that are simple nav items * Get rid of   entities breaking sidebar layout Any spacing/stying is being handled by CSS so no need for these layout bits in the sidebar config file. * Rearrange content for better display in new design * Add space below highlights For better content display * Tweak thead border width To match comp * Keep table looking decent if it overflows the container * Include alert styles to match current site * Regenerate CSS * Better display of category groups in sidebar * Prevent egregiously bad display with nested content blocks * Breathing space above highlights * Extract common head markup Moving it to a single file makes it easy to share common asset include and setup details across all pages on the site. This is a first setp to getting the `head` for video examples cleaned up. * Update video examples to use common head include To DRY up code * Update video sample template To use same design as other pages on the site. * Style video example code like other code blocks * Don’t add bullets to tab list items * Expose standard BS alerts to brand-specific classes squash * Regenerate CSS * Update template to get layout updates To match new design. Also remove trailing whitespace * Reflow code for better readability * Style common bidder tables * Fix tags for proper footer display Also, whitespace updates * Delete trailing whitespace * Update class for styling tweaks * Update template structure for new design Also, delete trailing whitespace * Put margin below sidebar like pb-content So that if sidebar is longer than content we still have the footer pushed down. * Reflow code for better readability * Fix missing closing tags * 404 page layout and styling * Regenerate CSS * Fix button display on smaller screens * Better display of social media on smaller screens * Regenerate CSS * Update README with changes for building assets * Make Codes of Conduct and Policies into collapsible sections * Add styling for custom table By extending Bootstrap styles for ease of maintenance * Make table responsive for example Makes the table scrollable if it’s wider than the space. Have to wrap the markdown in `div` tags and move the Inline Attribution List (https://kramdown.gettalong.org/syntax.html#inline-attribute-lists) to the bottom so that it doesn’t interfere with Markdown parsing of the table. Also need to specify that the `div` contains markdown via `markdown=“1”` based on https://kramdown.gettalong.org/syntax.html#html-blocks * Regenerate CSS * Header padding on mobile * Better mobile display of main nav * Expose sidebar nav via toggle control on mobile * Keep sidebar visible on larger screens But collapse it behind the toggle on smaller screens. * Move margin to footer So that we don’t have extra margin below sidebar when left nav is collapsed on mobile * Better spacing around sidebar on mobile * Update other templates to show collapsed leftnav on mobile * Update extra template to new design for completeness * Regenerate CSS * Use full bootstrap from CDN rather than limited local bootstrap Since the local compiled bootstrap uses features of JS that aren’t supported in IE11 and aren’t being “fixed” by babel in testing. * Tweak to fix hover behavior in IE11 * Regenerate CSS * Adjust font sizes per feedback Switching from sizes in design comp to Minor Thirds ratio to have more difference in font size between the levels. * Add missing heading styling h5 isn’t used in the content area on the site but adding it here so that it’s available in the future if an h5 is added. * Make h4 italic per feedback Required adding semi-bold italic font from Google for proper display in browsers. * Revert italic for h4 after additional feedback Leaving italic on h5 since h5 is same size as body copy and leaving italic-semi-bold include to support h5 styling. * Regenerate CSS * Tweaks to get more space for content Make the overall page wider and the sidebar narrower, then give all that extra space to the content. * Add padding to prevent nav text from running into icon It didn’t in review/testing but this tweak will ensure it doesn’t in the future. * Regenerate CSS * Revert "Update CNAME" Revert CNAME to be correct for production site before opening a PR. This reverts commit 8c44d99. * Remove no-index from headers So that PR for production site doesn’t block search indexing. * Delete old, unused references to JS build Had to move away from JS build process due to issues generating a cross-browser JS file. * Open marketing site link in new window * Reduce top padding on code Per request. * Delete old, unused JS assets Co-authored-by: Steve <ssuranie@appnexus.com> Co-authored-by: Matt Vanderpol <matt@vanderpol.net>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Atrenet's redesign