PieCMS Build

Login : http://www.piecms.com/manage/login/
Offical documentation : http://developer.piecms.com/

Order of a Build

1. Get the design file 1. Export all images
2. Get login for pieCMS site
3. Setup FTP (Settings > FTP)
4. Create Pages
5. Create Navigation
6. Create sitewides
7. Add in core code to get the site turning over
8. Build a “Elements” page that shows off different html elements and style them (H1-H5, buttons, paragraphs, ul, images, etc.)
9. Build the navigation (use [header]( https://www.notion.so/Header-ad3dddefd935404981645... code)
10. Build the homepage
11. Build internal pages

Pumpkin

Code Library

• Project Core - https://www.notion.so/Project-Core-b6d94044c02741b08160b20d53a807a2?pvs=21
• Header - https://www.notion.so/Header-ad3dddefd93540498164512fc6d77911?pvs=21
• Hero - https://www.notion.so/Hero-6cb68fd8600a4a7698c6aceb4c31283b?pvs=21
• Focus - https://www.notion.so/Focus-be34e06f742749ebb4ffe7fd20001c6e?pvs=21
• Feature - https://www.notion.so/Feature-9ba42d930cc24cdb96395aa12cb25557?pvs=21
• Wedges layout - https://www.notion.so/Wedges-layout-d8c31de37d94425695d97aeac4b529aa?pvs=21
• Footer - https://www.notion.so/Footer-59b2253da893491c815952e7cea7a0db?pvs=21
• Showcase Grid - https://www.notion.so/Showcase-Grid-283cc19a1fb34fc8a095d42313938142?pvs=21

Ben Reimer's Piecms Training

Coding Process (Checklist)

Styles - use inspect panel, copy and clean up. Helpful for colours, shadows, gradients

Get all your assets in

• inspect panel to get images
• export as SVG *or* copy as SVG (Pause about this specific footer one. Don, it’s important that it’s an SVG going into figma as well )
• if images are big, I use optimizilla
• images / svgs I don’t want clients to be able to touch at all I’ll FTP in

Start at the figma screen size

• (Don, if they don’t have edit access this is a good thing to clarify. How wide?)
• If edit access, you can toggle it on / off. Show how.
• IF you use my code library, I have a wrap1440 class which is the width. You can make a wrap??

Build things out as I have ordered in Pumpkin. (e.g. styles, navigation, home page, general page)

Then all the checks...

Check 1: 

• All used components. E.g. the page with all the styles. (Did I forget to style the list items? Piecms showcase?)

Check 2: 

1. Aligning to the design.
2. As much as possible while coding make it match
3. Some things will get missed
4. Once I build, I take a screenshot. Put it in Figma. Compare. - https://gofullpage.com/
5. Including HOVER and ACTIVE states

Check Responsive

• extra large (I learned on a laptop, and Don has imac, so I made mistakes with the sizing early on)
• large
• laptop
• tablet
• phone

Browser Check

• safari
• firefox
• chrome
• edge