/theme-campus-calendar

Silk Wrapper for UCSC's Localist events calendar

Primary LanguageCSS

ucsc-localist-silk-wrapper

This is the SILK WRAPPER for the UC Santa Cruz Events Calendar, hosted on the Localist platform.

Features

  • Modular CSS via Sass
  • Task runner using gulp
  • Bourbon and Neat

Dependencies

Install and build

Assuming you are working in a local development environment, clone this repository into your /wp-content/themes/ directory.

Install Node.js & NPM

Linux & Mac

The easiest way to install Node.js and npm on Linux or Mac is via Linuxbrew or Homebrew, respectively. Installing Linuxbrew or Homebrew will handle downloading, unpacking, compiling and installing Node and NPM on your system in a few minutes.

brew install node

Windows

There is no "Winbrew" available for Microsoft Windows. To install Node.js and NPM on Windows, download the Windows installer from the Node.js website and run the installer. Follow the prompts and accept the default settings.

Test it out

node -v
v9.6.1
npm -v
5.6.0

Install the standalone gulp-cli package

If you've previously installed gulp globally, run npm rm --global gulp before following these instructions. For more information on the gulp standalone cli, read this Sip.

npm install --global gulp-cli

Install dependencies (Gulp, Bourbon, Neat, et al)

Now that you've installed NPM, use it to install the node modules in order to run gulp. The node modules are defined and included in the package.json file. To install node modules, type the following in your terminal:

npm install

Wait several minutes for the installation to complete and you're in business!

Gulp tasks

There are two Gulp tasks defined in the gulpfile.js file:

If there is no style.css file in this repo, the gulp styles task will build your style.css file based on the SASS files, which are located in /assets/sass/. This task will also created minified styles, saved as styles.min.css. If you make any changes to your sass files, you can regenerate your style.css and style.min.css files using this task command.

gulp styles

The gulp watch task will continuously watch your /assets/sass/ directory and rebuild your styles every time you save a SASS file.

gulp watch

Push to GitHub Pages

This SILK wrapper is hosted statically on GitHub on a branch called gh-pages.