--------------------------------------------------
DEVELOPER PLEASE REVIEW BEFORE STARTING HTML/CSS: Reminders and Guidelines to Follow
*Reminder: Please make sure you are using no more than 3 fonts/weights on a build. If you think you need to use more, please ask your PM or the project designer how to proceed.
- - - - - - - - - -
Hey @PramShaw!
Looking we are ready to go here with the HTML/CSS INNERPAGES build!
TO BE DONE:
PART 2: INNERPAGES
[**LIST OUT THE PROTOTYPES HERE. EXAMPLES:
Flexible Content Page (Desktop, Mobile & Tablet)
Locations Page (Desktop, Mobile & Tablet)]
Please build on staging server and send us your finished HTML/CSS files as zip file only at end once edits complete!
- - - - - - - - - -
***DUE DATE FOR INNERPAGES HTML:
PLEASE NOTE this is an urgent due date and has to be complete by this due date [**REMOVE IF NOT NEEDED]
[**ADD DUE DATE HERE]
- - - - - - - - - -
[**ADD PAGE NAME] PROTOTYPES:
Desktop:
Mobile:
Tablet:
[**ADD ANY ADDITIONAL PAGES/PROTOTYPES FOR PRAM TO BUILD OUT]
- - - - - - - - - -
ADOBE XD FILES:
Please access files here within Google Drive [**ADD LINK TO PRAM G DRIVE]
- - - - - - - - - -
DESIGN NOTES:
[**ADD LINK TO DESIGN NOTES HERE]
- - - - - - - - - -
****HTML STARTER FILES
Please note we are NOT using FTP for this project.
The HTML starter files can be found here: https://webpagefxstage.com/templates/wp_v2.tar.gz?v=1661556302
Please let me know if you have any issues accessing or using these files!
Please utilize the starter HTML files within Google Drive. We have added an /html/ folder in the root of our WordPress files which includes an index.html file to start with [Screenshot]
For consistency and to save time, please also utilize the blocks from this site https://starterblocks.webpagefxstage.com/ as a starting point for any applicable sections of a new build.
Use your chrome inspector tools to grab the HTML like this.
Download CSS using the download buttons on each block here and then here.
- - - - - - - - - -
Here are some instructions for the setup using these HTML files:
Duplicate index.html as necessary to create multiple files
We also included an /img folder for images that your team can use. Our team will then transfer those images to the media library in wordpress when integrating the html into wordpress
All instances of "fx" will need to be changed to the new theme name [Screenshot] in order for the js and css to work.
Please use a separate CSS stylesheet for every section of the prototype designs. [Example] We are no longer adding all of our CSS in one file like main.css. There are more detailed instructions [Here]. You can continue to write the HTML the same as you have in the past.
The starter .css files and .js files are in the theme folder [css] [js]. Please utilize the CSS and the JS files loaded in the starter file to add your styles and js, and create new files and load them in index.html for each new section in the prototype.
If the prototype includes a Top Notification Bar, please disregard as we use our own code for this
For example:
Use the pre-linked header.css file to style the site header.
Add a new homepage-slideshow.css file for the first slideshow section of a homepage
Note: homepage-slideshow.css is an example. You do not need to name your first section homepage-slideshow.css, you can name it whatever makes sense.
- - - - - - - - -
More detailed instructions about working with our starter files can be found [Here].
When you are done, please input all CSS stylesheets into http://csslint.net/ and fix any errors that arise.
- - - - - - - - - -
When done please send the HTML link for testing/updates
Once all updates are totally done and actioned you can send through the zipped HTML files
Thank you!
I am looking forward to working on this project with you!
Comments