Git Product home page Git Product logo

yiiframework.com's Introduction

yiiframework.com Website

This project contains the source code for the yiiframework.com Website.

INSTALLATION

Before you start, make sure you have installed composer and Node.js.

# clone the project
git clone [email protected]:yiisoft-contrib/yiiframework.com.git

cd yiiframework.com

# install the composer asset plugin globally, if you haven't done so before
composer global require "fxp/composer-asset-plugin:~1.0.3"

# install the dependent composer packages
composer install

# install gulp globally if you haven't done so before
npm install -g gulp

# install browsersync globally if you haven't done so before
npm install -g browser-sync

# install dependent NPM modules
npm install

# initialize the application, choose "development"
./init

# build guide and API documentation (will be put in cron job on production)
# this assumes you have installed pdflatex and configured elasticsearch
make docs

# build js/css files
gulp build

Web Server Setup

Define a host name local.yiiframework.com that points to localhost.

Define a virtual host local.yiiframework.com which uses yiiframework.com/web as its document root.

If you are using Apache, add the following configuration for the yiiframework.com/web folder to hide the entry script:

RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d

# otherwise forward it to index.php
RewriteRule . index.php

DIRECTORY STRUCTURE

  commands/           contains console commands (controllers)
  config/             contains application configurations
  controllers/        contains Web controller classes
  data/               contains important data generated by different commands
  env/                contains environment-dependent files
  scss/               contains Sass source files
  mail/               contains view files for e-mails
  models/             contains model classes
  node_modules/       contains installed NPM packages
  runtime/            contains files generated during runtime
  js/                 contains JS source files
  scripts/            contains shell scripts
  vendor/             contains dependent 3rd-party packages
  views/              contains view files for the Web application
  web/                contains the entry script and Web resources

DEVELOPMENT

Build

  • During development, run gulp to watch view, Sass and JS file changes and automatically build target CSS/JS files. This command will also launch a browser window which is connected to browsersync.
  • At any time, run gulp build to manually rebuild target CSS/JS files from source Sass/JS files.
  • If you only want to watch for changes, you can issue the command gulp watch

CSS Files

  • Use Sass files to define CSS styles.
  • All Sass files should be put under /scss and listed in /scss/all.scss.
  • Usually each controller corresponds to a single Sass file whose name is the same as the controller ID. For example, the GuideController has a Sass file named _guide.scss.
  • All Sass source files, except all.scss should have a leading underscore in the name. Sass will ignore files starting with an underscore so that only one CSS file will be produced (all.css).

JS Files

  • All JS files should be put under /js and listed in /js/all.json.
  • Usually each controller corresponds to a single JS file whose name is the same as the controller ID. For example, the GuideController has a JS file named guide.js.

Links

yiiframework.com's People

Contributors

cebe avatar jacmoe avatar qiangxue avatar samdark avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.