PieCMS Build
Login :
http://www.piecms.com/manage/login/
Offical documentation :
http://developer.piecms.com/
Order of a Build
- Get the design file
1. Export all images
- Get login for pieCMS site
- Setup FTP (Settings > FTP)
- Create Pages
- Create Navigation
- Create sitewides
- Add in core code to get the site turning over
- Build a “Elements” page that shows off different html elements and style them (H1-H5, buttons, paragraphs, ul, images, etc.)
- Build the navigation (use [header](
https://www.notion.so/Header-ad3dddefd935404981645... code)
- Build the homepage
- Build internal pages
Pumpkin
Code Library
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:
- Aligning to the design.
-
As much as possible while coding make it match
-
Some things will get missed
-
Once I build, I take a screenshot. Put it in Figma. Compare. - https://gofullpage.com/
- 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