智慧物流>> marketika>> 返回
项目作者： KaushikShivam

项目描述 ：
Marketing - A general landing page for business start ups and marketing agencies
高级语言： CSS
项目地址: git://github.com/KaushikShivam/marketika.git
创建时间： 2019-08-31T14:19:47Z
项目社区：https://github.com/KaushikShivam/marketika
开源协议：
下载


Marketika - We are here to help you out

Marketika | A very professional and highly customizable sketch template with lots of custom pages and useful features

Marketika Screenshot

Table of content

Description

This template uses the following:

  • Modern CSS

  • BEM Methodology

  • Custom 4 column grid

  • SASS

    • variables
    • nesting
    • parials and imports
    • mixins
    • functions
    • extends

  • 7-1 project structure for SASS Files -

    • base/
    • components/
    • layout/
    • pages/
    • themes/
    • abstracts/
    • vendors/

A build script is created to accomodate older browser compatibility

Installation

  1. Clone the project to your local directory

    1. git clone https://github.com/KaushikShivam/marketika.git

  2. The project uses NPM for managing dependencies. Run npm install to install all the required dependencies

    1. npm install
  3. Run the watch script to view live changes to your CSS
    1. npm run watch:sass
  4. Open the index.html file in your browser to view the website in all its glory (Live-server is recommended to view live changes automatically)

Scripts

The project uses AutoPrefixer, Node-sass, npm-run-all etc to build the following scripts:

Watch live changes in development

  1. Watch live changes to the sass

    1. "watch:sass": "node-sass sass/main.scss css/style.css -w"

  2. Run Live-server for live development changes

    1. "devserver": "live-server --browser=firefox"
  3. Script to run both simultaneously
    1. "start": "npm-run-all --parallel devserver watch:sass"

Run npm start to run the script

Build script for production

  1. Compile sass files

    1. "compile:sass": "node-sass sass/main.scss css/style.comp.css"

  2. Concat all the css files including font styles etc

    1. "concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",

  3. Add prefixes automatically to the modern CSS rules (supports last 10 years - Can be configured)

    1. "prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css"

  4. Adds compression

    1. "compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed"
  5. Final Build process
    1. "build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"

Run npm run build:css to run the build script

Contact

You can contact me at: