@4site/engrid-styles

Main SASS Styles for the ENGRID Project


Keywords
Engaging Networks, ENGrid, 4Site Studios, 4Site, Page Templates, Non Profit, Non-Profit, CRM
License
Unlicense
Install
npm install @4site/engrid-styles@0.8.3

Documentation

4Site's ENgrid Page Template Framework

This project started as a labor of love for our clients and ourselves. Originating in 2017 as a partnership between Engaging Networks and 4Site Studios to create the first freely available page templates for their platform; we created Engaging Networks Page Template. That project was incredibly successful, and those templates are still used today for all new Engaging Networks clients. They're easy for junior developers and code dabblers to ease into, and they include Internet Explorer 11 support.

Since then, we've continued to enhance and refine our work, culminating in a complete re-write in late 2019 that was named "ENgrid". Making use of today's latest web technologies Webpack, Typescript, ES6, SCSS, CSS Grids, we've created a new framework for marketers, fundraisers, and everyone in between that will ensure your pages stand out and deliver the performance you're looking for.

Designed and Developed by 4Site Studios while working with:

  • Amnesty International USA
  • Earth Island Institute
  • Human Rights Campaign via Lautman Maska Neill & Company
  • Humane Society
  • International Fund for Animal Welfare
  • Mercy for Animals
  • National Trust for Historic Preservation
  • National Wildlife Federation
  • Oceana
  • Ocean Conservancy
  • Organic Consumers
  • Oxfam America
  • Oxfam Canada
  • People for the Ethical Treatment of Animals
  • Polaris Project
  • Rainforest Action Network
  • Saint Anthony's Guild (Friar Works)
  • Save Tibet via Schultz and Williams

ENgrid Features

  • Works with all page types (e.g. Donation, e-Card, Email to Target, Event, etc..)
  • Auto Credit Card Type selection based on Credit Card Number
  • Processing Fee Checkbox
  • Donation Upsell Lightbox
  • Comma handling in Other Donation Amount input field
  • Conditional Hide/Show fields (e.g. In Honor of Giving Fields)
  • Give by Check, Card, Paypal
  • Auto update CC Expiration Date fields
  • Live giving variables to insert actively selected gift frequency or gift amount in page copy or in buttons
  • Advocacy "Opt-in Upsell" Lightbox
  • Tweaked UI / UX for an improved e-card "add recipient" experience
  • Per Page Background Images and Videos!
  • Per Page Layouts (Six Built In)
  • Click-to-expand content sections activate with a click, touch. Or opened with enter or spacebar when focused with a keyboard.
  • Optional placeholder values in input fields
  • Add an attribution overlay to images and videos to include the photographers name, no more editing in Photoshop and hard coding it in. You can also optionally add a link
  • Skip content link accessability enhancement
  • Optional accessible outlines around fields when you navigate to them with your keyboard
  • Optional accessible drop-down menu
  • Easy to add tooltips, for CVV "What's this" links and other enhancements
  • Supports themes "Sub-Brand" theming and altneritive brand theming for the ultimate set up and A/B testing scenario
  • Address Form Field Internationalization - If the user is on a US / English page and selects "France" as their country the Address Form fields will update their labels, change their ordering, and hide/show relevant fields for French Address formatting. Current address formatting support for (United States, Canada, United Kingdom, France, Germany, Netherlands, Australia).
  • Update inputs with improved form field meta info for better auto-fill completion
  • "Remember Me" (Coming Soon)
  • Capitalize first letter of First Name, Last Name, Address 1, City, Region fields on form submit (Coming Soon)
  • Lazy Load all image assets and moves them to their own CPU thread to prevent slow downs in rendering the page when loading high resoltion imagery
  • Fastest page load times possible on Engaging Networks. All render critical assets are prefetched and there is only a single CSS and JS file
  • IE11 pop-up encouraging users to upgrade their browsers
  • All pages using our page template can be seamlessly embedded in your website with Shortcodes using our WordPress iFrame embed plugin\
  • Developer and Editor documentation

ENgrid Resources

Engaging Networks Resources

Interested in a project or have questions?

We would love to hear from you.

Bryan Casler Director of Digital Strategy
4Site Interactive Studios
Cell: (315) 877-3420
Email: bryan@4sitestudios.com