Welcome to the Frontcore documentation.

Overview

What is FrontCore² ?

It's a bunch of tools designed to boost productivity of high end and custom's user interfaces. It's completely flexible and provide a framework of helpers, functions, tools and modules to help and assist you in projects.

Benefits

Responsive ready

Your documentation works on any device: desktop, tablet or mobile.

Customizable

You can easily read, edit, and write your own code, or change everything.

UI Elements

There is a bunch of useful and necessary elements for writing documentation.

Clean Code

You can find our code well organized, commented and readable.

Documented

As you can see in this online documentation, we provided a comprehensive documentation.

Easily updatable

Update framework easily by simply pull new commits.

Sctructure and dependancies

You can see on the next schema how frontcore dependancies work. It's relatively simple :

Features level

  • FC-FRONTEND contain all user interface helpers such as text, margins, etc. It's also contain frequently used vendors like animation and smooth scroll.
  • FC-WP contain all helpers and functions for extend wordpress functionnalities. For exemple it contain assets helper, breadcrumb helper, etc.

Starter themes

  • FC-STARTER contain a basic html theme based on FC-FRONTEND. You can use it to start any kind of project
  • FC-WP-THEME use FC-FRONTEND and FC-WP and is built on wordpress theme structure. He provide a great starting project for Wordpress environment.

Prerequies

First you need to have there dependencies apps installed before use FrontCore :

  • Git
  • Bash / shell / console or terminal environment
  • Ruby last release
  • GULP
  • NPM

How to use this documentation?

This documentation id divided in severals sections based on tools you can use individually or together :

  1. FC-CLI (Frontcore command line tool)
  2. FC-FrontEnd (Frontcore front end helpers and libraries)
  3. FC-WP (Frontcore Wordpress helpers and libraries)
  4. FC-WP-Theme (Frontcore Wordpress starter theme)

FC-CLI Updates soon

Frontcore command line tool provide a huge set of tools to install, update, config and init different’s frontcore projet type.

What is that ?

  • Copying lastest Wordpress
  • Install frontcore WP theme
  • Install frontcore FrontEnd
  • Install frontcore WP
  • Install all dependancies libraries and helpers

Installation

First clone fc-cli repo :

$git clone https://bitbucket.org/smarticiens/fc-cli

Go into fc-cli directory

$cd fc-cli

Copy fc-cli shell script to user local binary directory

$cp fc-cli /usr/local/bin

Give rights to execute fc-cli

$chmod +x /usr/local/bin/fc-cli

Usage

Now you can use it anywhere :

$ fc-install

FC-FRONTEND

FC-FRONTEND is the frontend framework use to be in all type of project. It is the core project that permit to devlop fast and quick high end interfaces

Features

  • Simple and intuitive structure
  • Helpers for responsive, margins, etc.
  • Reusables modules

Installation

From FC-CLI

To install FC-FRONTEND from FC-CLI simply type :

$FC-CLI install -fcfrontend
From repo

To install FC-FRONTEND from repo, first clone repository :

git clone git@bitbucket.org:smarticiens/fc-frontend.git myprojectfoldername

Go into your project folder:

$cd myprojectfoldername

Run NPM install :

$npm install

Run gulp :

$gulp

Structure

  • fc-frontend
    • helpers
      • _spacing.cssMargin and padding classes
      • _font.cssFont sizes classes
      • _responsive.cssResponsive classes
    • vendors
      • animate
        • _animate.scssAnimations styles
        • animate.min.jsAnimations js
      • smooth-scroll
        • smooth-scroll.min.jsSmooth scrolling

Helpers

Spacing

The spacing's helpers consist in class based on semantic CSS and fully responsive(Based on breackpoint configuratio from your theme)

Spacing-Size(in pixels)-Breakpoint
Usage exemple :
.mt-10-xxs -> Will add 10px margin top from XXS and more
.mtb-50-xxs -> Will add 50px margin top bottom from XXS and more
.p-30-xl -> Will add 30px psdding from XL and more
Margins and Paddings

You can add margin or padding with the following shortcodes :

m
Margin 		mt
Margin top 		mb
Margin bottom 		mtb
Margin top bottom 		ml
Margin left 		mr
Margin right 		mlr
Margin left right
p
Padding 		pt
Padding top 		pb
Padding bottom 		ptb
Padding top bottom 		pl
Padding left 		pr
Padding right 		plr
Padding left right
Sizes

You can use sizes from 1px to 500px

Breakpoints

Breakpoints are configurated in your themes in file "_breackpoints.scss" See section FC-STARTER of FC-WP-THEME for more details. Here a list of breakpoints shortcode :

xxs
Extra small 		xs
Small 		md
Medium 		lg
Large 		xlg
Extra large

Font

You can also specify font size directly by calling a class like this :

fs-size

For exemple if I want a font of 24px I call this :

fs-24
Sizes

You can use font sizes from 6px to 200px

FC-WP

Features

  • Simple and intuitive structure
  • Helpers and functions
  • Reusable

Installation

To use FC-WP, we recommand to install FC-WP-THEME to start with good base. Learn more

Structure

  • fc-wp
    • includes
      • _assets.phpContain assets loader function
      • _helpers.phpContain all helpers functions
      • _init.phpContain initialization functions
      • _loaded.phpContain after initialization functions
      • _plugins.phpContain plugins initialization functions
    • pluginsContain all included plugins

Helpers

They have a bunch of functions. Please open includes/_helpers.php to see list of functions

FC-STARTER

Features

  • Pe configured FrontCore HTML/SASS theme

Installation

From FC-CLI

To install FC-STARTER from FC-CLI simply type :

$FC-CLI install -themestarter
From repo

To install FC-STARTER from repo, first clone repository :

git clone git@bitbucket.org:smarticiens/fc-starter.git myprojectfoldername

Go into your project folder:

$cd myprojectfoldername

Run NPM install :

$npm install

Run gulp :

$gulp

Structure

FC-WP-THEME

Features

Installation

From FC-CLI

To install FC-FRONTEND from FC-CLI simply type :

$FC-CLI install -fcfrontend
From repo

To install FC-FRONTEND from repo, first clone repository :

git clone git@bitbucket.org:smarticiens/fc-frontend.git myprojectfoldername

Go into your project folder:

$cd myprojectfoldername

Run NPM install :

$npm install

Run gulp :

$gulp

Structure

Configuration