/basefolder

This a modified base folder for laravel. For company use en.hipe.asia and bpoc.co.jp.

Primary LanguagePHP

Get Started

This is a modified version of this repo https://github.com/hiloki/flocss/blob/master/README_eng.md

Requirement :octocat:

  • Node JS ver. 8.15.0
  • Yarn

Setting File

  • Gulp
    • gulp/**.js - gulp location for the tasks.
    • gulp/config - configuration for gulp tasks.

Basic

  • Target "/src".
  • Type "yarn install" (Only execute once).
  • After "yarn install" execute build "yarn build" (Only execute once).
  • After build execute "yarn start" to watch live changes.
    • Set the proxy of src/gulp/config/server.js and start the browser Detect. *Might need rebuilding
  • If you don't use live watch "yarn watch".

CSS

For css we use sass to compile.

  • "src/pc" - this is where PC view css located.
  • "src/pc/css/core" - this is where mixins , root and variable located.
  • "src/pc/css/layout" - this is where container , header , main , and footer located.
  • "src/pc/css/object" - this is where component , project , and utility located.
    • "./component" - this is for repepetive small style like button.
    • "./project" - this is where small elements that makes up your current page like img slider.
    • "./utility" - this is where your utility located.
  • "src/pc/page" - this is for pages like home. To use the component you can just do shown below. 
    @import "../core/**/*";
  • "src/pc/css/style" - a compilation of the components. 
    @import "core/**/*";
@import "layout/**/*";
// @import "object/**/**/*;
@import "object/component/**/*";
@import "object/project/**/*";
@import "object/utility/**/*";

Coding Rule

// to maximize productivity use class name that start to their corresponding file location for easy navigation
// c-* , p-*, u-*,l-*; object/component , project ,  utility,  and layout.
// ex.

    l-container{ … };
    
    c-card{ … }; // *recommend: to specify the basic attribute of a class here and put the rest into variation
    
    p-galleryShowcase{ … };
   
    u-fontSize{ … };

HTML :

   // creating a varation and creating a nested class
   // variation must be indicated by " -- " and nested class must be " __ ". 
   // *to avoid long name for class  "__"
   // name it if it's a component relates to parent.
   
    <div class="c-card01 c-card01--l"> 
      <div class="c-card01__text--title ">...</div>
      <div class="c-card01__text--desc "> ... </div>
      <div class="c-card01__btnMenu">
        <a class="c-btn01 c-btn01--l"> ... </a>
      </div>
    </div>

SCSS:

// Base
 c-card01{
// Variation apply for like color and size
   &--xl{ … }// this variation is extra large
   &--l{ … }  // this variation is large
// __ component of card
   &__text{
     &--title{ … }
     &--desc{ … }
   }
   &__btnMenu{ … } // c-btn01 must not be edited inside here only the size of the btnMenu
 }// ./end of card01

Additional Info