Three 11 Flows

# Wordpress Flow

# Starting WP Project

  1. Create projects/task/client in todo.vu
  2. Init WP project using bash create <project-name>
  3. Init staic project using bash create-static <project-name>
  4. Update permalinks from admin
  5. DEVELOP!!!!

Helpful reminder: Browsersync port 3000 does not play well with admin and AJAX calls

# Starting WP Project - Steps

# Create The Project

  1. Use the automation (opens new window) to create project.
  2. Update permalinks from admin.
  3. Optionally hide the admin bar in your user profile.

# When Created

  1. Checkout and evaluate the provided design.
  2. Define the components.
  3. Define which components and elements will be reusable.
  4. Define which elements are repeatable and plan their style: text blocks, headings, icons, etc.
  5. For images:
    1. Use SVGs for all icons.
    2. Use PNGs for icons which cannot be exported as SVGs.
    3. Use JPGs for content images (images which are subject to change via the WP admin).
  6. Define which fonts are used and if they are provided or available (opens new window).

# Before Develop

  1. Export needed images in right format from the provided design.
  2. If sprite is used, include it before closing body tag. <?php include_once('assets/dist/sprite.svg'); ?> (this should be included in the theme by default, if not, include it).
  3. Regarding images:
    1. SVG icons should be in assets/images/svg.
    2. PNG icons should be in assets/images/sprite.
    3. PNG icons should be in two sizes - one for normal and one for retina displays, naming should be for normal displays - name.png, for retina name@2x.png.
    4. Temporary images (which are to be uploaded via WP Admin) should go in assets/images/temp.
  4. Create a square PNG file out of the logo with sizes at least 512x512 pixels. Upload it in favicomatic (opens new window), select every damn size and download the .zip file. Then copy images in the favicon folder in the project.
  5. If project is one page use the index.php file, if not, create a header.php, footer.php and templates folder in main directory. templates folder is the place where other created pages will stay.
  6. Import the needed font styles (see fonts section below).
  7. Change { Project Title } with the real project <title> in the head section.
  8. The content of the <meta name="application-name"> should also be updated with the correct project title.
  9. Update also the content of <meta name="msapplication-TileColor"> and <meta name="theme-color"> with the most used color in the provided design.

# Develop

# For HTML
  1. Create HTML structure.
  2. Make sections/components reusable. Each one of them should work the same way regardless of the context is is used.
  3. Use clean and not too specific html structure, when naming sections, components, classes etc. Be semantic, they should make sense, when reading it in the code.
# For CSS
  1. Use as much as posible the given predefined classes, mixins, variables etc. (.o-grid, .o-shell, flex-box mixins, @include).
  2. Set default styling, fonts, colors etc.

# Tips

# 1. Import fonts in WP Projects

# If the fonts are provided

  1. Upload the font files in Transfonter (opens new window) and convert them to woff/woff2 formats, then download them.
  2. Create /fonts folder in /assets directory and paste files with woff/woff2 formats.
  3. In styles/components/generic, create file named _fonts.scss and paste the content of the .css file from the downloaded and unziped folder from Transfonter.

# If the fonts are not provided

1 Go to https://fonts.google.com/ and find the needed font/s. Then add the font styles you need and copy the url given to the head section of your .php file. Then set the global font-family needed in styles/components/settings/_text.scss.

# 2. Add theme image to the theme

Make a screenshot of the site theme's design and save it as a .png file, named screenshot.png. Place it in your theme’s folder (or if we have child theme, nameOfParentTheme-child). Make sure to put it in the top-level directory and not in a subdirectory such as images.

The recommended size is 880 × 660 pixels, although it will be shown as 387 × 290. The larger dimensions ensure that the image will show up well on high-resolution screens.

Other image formats such as .jpeg and .gif would also work, but .png is recommended.

# 3. Images in WP project

# 1. Put an image as a background inline style

<div
	style="background-image: url(<?php bloginfo('stylesheet_directory') ?>/assets/images/temp/your image name.jpg/png)"
></div>

# 2. Use an image in WP project

<img src="<?php bloginfo( 'stylesheet_directory' ); ?>/assets/images/pic.svg" alt="" />

# 3. Use svg icon

<svg class="svg-logo">
	<use xlink:href="#svg-logo" />
</svg><!-- /.svg-logo -->

# 3. Import Font Awesome

# 1. Import Font Awesome 4

Write in terminal the command yarn add font-awesome or npm install font-awesome.
Go to main.scss file in style folder and import font-awesome with\

// External dependencies
@import $fa-font-path: '~font-awesome/fonts';
@import '~font-awesome/scss/font-awesome';`

or

// External dependencies
@import '~font-awesome/css/font-awesome.css' `;

You are done!

# 2. Import Font Awesome 5

Go in your FontAwesome account, then on the menu click on 'Font Awesome CDN', and copy the link provided to your heads` document.

# 3. Import FullPage.js

fullPage.js - docs (opens new window)

  1. Write the command yarn add fullpage.js
  2. Import fullpage.js's CSS at the top of your main.scss as
`@import 'fullpage.js/dist/fullpage.css';` (!! Make sure the path is correct !!)
  1. Import Fullpage.js in your main.js file.
@import 'fullpage.js';
  1. Initialize fullPage.js instance.
new fullpage('#fullpage', {
	//options here
	autoScrolling: true,
	scrollHorizontally: true
});

# Tips for CSS

  1. Don't style elements throught the .o-shell, if it's really necessary.
  2. Use rem instead of px.
  3. Don't write long selectors. KISS (opens new window)

← HTML Conventions →