Swiss Theme Version 3 Notes:
Fixed width layouts are adjusted on the first 1024 instance of .content-horizontal-pad – remove commented styles. Adjustments to backgrounds, banner sections, and top nav will need to be made.
Forget about the CSS packages that promise “no breakpoint adjustments” except where it comes to font sizes, Most examples built with them are either clunky and very basic in design, or they end up with more work-arounds than simply a basic break-point setup would in the first place. Continue to review them but after research it seems there’s no magic bullet to adjusting for screen size without fine tuning.
Setting font weights for H1 – H5 tags using clamp ends up with size issues especially on H1 and H2 tags, where it’s too small on some widths, just right on others, and too big in other places. Doesn’t seem to be a way to tweak this to stop it. Setting size adjustments on break points is a bit cumbersome but better for dialing in the size.
Avoid height on banners if necessary It seems to be required but it can occassionaly . Or as an option look at setup on Service Learning with .grid-rows: grid-template-rows: {625px 1fr;} where the banner is set with a height and the content is the 1fr. Not sure that’s any better than height on the banner although I probably did it to overcome height issues with the banner image cutting off what needed to be shown at the bottom or top.
Before custom projects start test and make adjustments to necessary blocks and elements in SwissTheme. Especially elements like the Team Member Two area which needs to be re-engineered. Right now it requires too many height set p[oints for the phot and text below. This needs to be changed and the row height with grid needs to be redone with perhaps flex or 1fr, 1fr if possible. It should flex without setting heights.
Delete unused code from websites that have high budgets or will have extensive editing by staff (UGA). Otherwise just leave it. The complexity of removing and ew-testing isn’t worth the time on low end websites and most projects. The code size savings is small compared to the time requirements to do this.
QuickLaunch websites have unneeded code already removed.
HSL Color Picker: https://hslpicker.com/
SASS was removed. CSS Variables were added to remove the need for the SASS preprocessor which slowed down css saving to server and created constant lags in development time.
Update the base banner type for front-page.php and page.php. template-parts/blocks/textbanner should work as the banner for pages with a different default banner – so textbanner becomes an option for all pages. If multiple banner types are to be used a second (or third) template would need to be created to accommodate the banner setting in page.php This entire setup is in place to work with Gutenberg blocks while allowing the top banner to have different wrappers. I didn’t see any alternatives and this was a suggested way to set it up. Kind of clunky but works.
WordPress Block sections/columns have a 1.75em bottom margin applied. Remove it using a class: no-bottom-margin applied to outer surrounding column if no margin is needed.
WordPress built in Social Icons block won’t show the plus sign to add icons. Should use other methods anyhow, and most likely my built in variables.
Removed Flexible Section All sections should be laid out with Gutenberg Columns. A class and special grid for that class can be used instead. Or multiple columns can be added if the ones present aren’t appropriate. A special ACF template block could be set up as well.
Turn on Editor Styles for any project where the client needs visual reference on the backend, It’s time intensive to set up so only use where the cost has been covered.
Each block or group of blocks is wrapped in a group or column with a class name which will define the styles for that section. Minimize the unique classes added after the main wrapper class as much as possible.
Focus on major breakpoints: 1024, 1536, 1920, 2560.
Flexible Block is for adding blocks to column with WYSIWYG content inside.
Never use Full Site Editing or turn on any theme settings to allow it.
Never install a theme.json file which over-rides functions.php
Never use block patterns or reusable blocks. There’s too much of risk of a client editing one and then the edits effecting all others.
Archive.php is only for an additional blog type – such as Photo Stories on Outreach. Otherwise category.php is used.
If an Author page is required turn off the function that redirects Author pages to the website home page.
Preload fonts if having issue with FOUC. This might be required on all sites but is definitely set up on Outreach. Consider making it a basic part of Swiss theme.
Column SVG Icons source: https://github.com/WordPress/gutenberg/issues/15663
Testing 8G Firewall on Swiss. Turn it off if it’s a low traffic site or if there are issues. Investigate this on any site where an added plugin or service causes issues. That and my basic security additon to htaccess can cause issues but do create better security.
Get most recent 8G Firewall for each new launch as bugs will be fixed.
Deprecated or unused scripts and PHP can be found 1.3 Code Snippets: _RocquettAssets/SwissRocquett/Website Project/1.3 Code Snippets
DEPRECATED: WaitForImages.js as it seems unnecessary for the slider now.
Do not turn off Search Engine Visibility under WP-ADMIN/Settings/Reading. Instead use the Password Protected plugin to require a password for business to view website under development. But leave the check for this setting in the Website Build Checklist.
Change logo from coming-soon-logo.png to site-login-logo.php after launch.
Consider disabling sticky nav on blog area. See Service Learning vs Outreach where both options exist.
Feed links and Emojis are disabled in functions.php. Enable them if project requires this.
BGCHANGE FOR ADVISOR ONE STYLE BANNER ADDED TO homebanner.php
<div class="section-content">
<span class="bgchange"></span>
<!-- bgchange is for hover effect on https://advisor.rocquett.com/one/ -->
<div class="span1-12">OPTIONS – NOT BUILT INTO THEME
See options.psd in _RocquettAssets/SwissRocquett/Website Project/1.0 Design
Add new designs that aren’t built out into main Swiss Theme in the above PSD and below for reference on future projects.
Card and horizontal layout chooser for blogs.
https://outreach.uga.edu/category/sbdc/
Search for News area
https://outreach.uga.edu/news/
People Block horizontal (contained in columns I think) and vertical.
https://outreach.uga.edu/contact/
https://outreach.uga.edu/give/
Under Banner Nav along with sticking to top.
https://outreach.uga.edu/about/
https://servicelearning.uga.edu/community-engagement/campus-kitchen/
Team Directory with archive-team.php rather than a block added to a page which is the basic setup for smaller listings. This is for larger team listings. It will need to be set up on a site by site basis.
https://outreach.uga.edu/team/
https://servicelearning.uga.edu/team/
Add fixed class to main nav rather than using Mega Sticky.
https://outreach.uga.edu/team/
Tag pages – similar to Category for use where a more in depth blog might require.
https://outreach.uga.edu/tag/archway-partnership/
Slick Slider Horizontal Reveal with Tabs and Nav
https://servicelearning.uga.edu/about/service-learning-by-the-numbers/
Special Blog with Featured Stories Slider
https://outreach.uga.edu/news/
Single page layout
https://outreach.uga.edu/uga-cyberarch-students-play-crucial-role-in-making-cybersecurity-impact/
Author and Contact Fields with Options for Guests and Users
https://outreach.uga.edu/uga-provides-tools-for-rural-community-engagement-and-economic-success/
List a story in blog that redirects to another page such as for Outreach magazine. Redirect is in htaccess but the article and featured image need to live as a blog post to show up in News. Includes a settup for the home page news as well. All based on a rediretc of the URL for the post. In all other ways it’s a simple blog/news post.
https://outreach.uga.edu/outreach-magazine-redirect/
Horizontral Reveal – As seen on Ray Olson. Requires GSAP
https://rayolson.com
Video or content section with Reveal
https://rayolson.com