SMACSS-Gulp-Quickstart

This is a quickstart toolkit based on Scalable and Modular Architecture for CSS (SMACSS), Atomic Design for Sass (SCSS) projects, and Sass-Starter (By Mina Markham). This toolkit has been simplified and repurposed for use with WordPress development.

System Preparation

1. NodeJS - Use the installer.
2. GulpJS - $ npm install -g gulp (mac users may need sudo)
3. LibSass

Getting Started

1. If needed, install node and npm (Node Package Manager).

• If needed, install gulp with npm install gulp -g.
• Clone this repo with git clone https://github.com/UCF/BS-officeplus-theme or download the zip.
• In terminal, cd to the folder containing your project. Alternatively, you can type cd and drag the location of the folder into your terminal and hit enter (on Macs).
• In terminal, type npm install. If (and only if) npm install isn't working, try sudo npm install. This should install all dependencies.
• In terminal, enter gulp.
• Your browser should open at http://localhost:3000. You can access this same page on any device on the same wifi network and they'll see whats on your screen. It'll even sync scrolls and clicks!
• Edit your code inside of the src folder.
• Your complied and minified css, html, and javascript files will be created and updated in dist/. Never edit files within the dist/ folder, as it gets deleted frequently.
• Keep gulp running while you're making changes. When you want to stop the gulp task, hit ctrl + C.

For theming: add separate file (theme.scss) insrc/scss/themes/, override the default $theme variable, and run gulp themes.

Usage

Development Mode

This will give you file watching, auto-rebuild, and CSS injection.

$ gulp

WordPress modularization

All Wordpress theme modifications are added to the partials folders

If you are modifying a plugin's CSS, eg. GravityForms, simply:

• Add a _gforms.scss file to partials
• Add the import to partials/_index.scss
• And head the _gforms.scss file with the appropriate selector

Deployment

• The Dev branch is automatically deployed to the Office Plus Dev environment
• The Master branch is automatically deployed to the Office Plus QA environment
• Deployment to production is done manually via Jenkins using release versions
• Be sure to update the style.css with the version on new releases.

Features

• Sass linting (based on default config)
• Autoprefixer configuration
• SMACSS and Atomic Design-based folder structure
• px to em, px to rem and other useful functions.
• Mixins for inlining media queries.

• Useful CSS helper classes.
• Default print styles, performance optimized.
• "Delete-key friendly." Easy to strip out parts you don't need.

Dependencies

  "colors": "^1.1.2",
  "del": "^2.0.2",
  "gulp-autoprefixer": "^2.1.0",
  "gulp-rename": "^1.2.0",
  "gulp-sass": "^1.3.2",
  "gulp-sass-lint": "1.0.1",
  "gulp-sourcemaps": "^1.5.2",
  "sassdoc": "^2.1.15",
  "vinyl-paths": "^2.0.0"

Tasks

• styles

• sass-lint

• watch

• default

  • styles
  • watch

• build

  • styles

  Directory structure

┌── .gitignore
├── .sass-lint.yml
├── .travis.yml
├── lib
│   └── scss
│       ├── atoms
│       │   └── _index.scss
│       ├── base
│       │   ├── _base.scss
│       │   └── _index.scss
│       ├── layout
│       │   └── _index.scss
│       ├── libs
│       │   ├── _index.scss
│       │   ├── _normalize.scss
│       │   └── _pesticide.scss
│       ├── molecules
│       │   └── _index.scss
│       ├── organisms
│       │   └── _index.scss
│       ├── overrides
│       │   └── _index.scss
│       ├── partials
│       │   └── _home.scss
│       │   └── _index.scss
│       ├── states
│       │   ├── _index.scss
│       │   └── _print.scss
│       ├── themes
│       │   └── rebeccapurple.scss
│       ├── utilities
│       │   ├── _colors.scss
│       │   ├── _config.scss
│       │   ├── _fonts.scss
│       │   ├── _functions.scss
│       │   ├── _index.scss
│       │   ├── _mixins.scss
│       │   └── _typography.scss
│       ├── styles.scss
│       ├── styles.css
│       └── _shame.scss
├── gulpfile.js
├── README.md
└── package.json

Thanks & Resources

This toolkit is based on the work of the following fine people & projects.

• Sassy Starter
• HTML5 Boilerplate
• Scalable and Modular Architecture for CSS (SMACSS)
• Atomic Design