npm run fix
, if any, and ensure the theme still compiles by running grunt build
.You're ready for work! Go ahead and delete this section when all boxes are checked.
A starter template for child themes of Responsive Framework 2. For Responsive Framework 3, please see https://github.com/bu-ist/responsive-child-starter-3x/.
Contents:
nvm use
to set the correct node version.npm install
, then grunt
to begin watching changes.npm install
: Install your development dependenciesgrunt
: Watch your theme for changes and compile when a change is detected.grunt build
: Manually build all theme assets.grunt version
: Force CSS and JavaScript to refresh when you deploy changes.Information for collaborators
draft
status until they are actually ready for review.code review
vs functionality review
.main
& develop
will be used, but never directly committed to.develop
and include the issue # when there is one. Examples:
id-presents
sandbox before review with the client.develop
is ready to deploy to staging at any time.Please update this if you have a newer version of Node and can verify the theme compiles with it.
Please remove any plugins you do not plan to support in this theme.
Name | Version | Purpose |
---|---|---|
node.js | 12.19.0 LTS | Support for npm |
npm | X | Package management. See package.json for a full list of packages. |
Name | Version | Purpose |
---|---|---|
Responsive Foundation (Required) | 4.0.0 | Basic styles and utilities for all Boston University themes |
BU PrePress (Optional, delete if irrelevant to this project) | X | Editorial tools for Boston University schools and colleges which produce magazines or other news publications. |
BU Blocks (Optional, delete if irrelevant to this project) | X | Custom Gutenberg blocks for Boston University websites. Required by BU PrePress. |
Name | Version | Purpose |
---|---|---|
@babel/core | See package.json | Allows you to use newer JavaScript (ES6) syntax, such as import and arrow functions. |
@babel/preset-env | See package.json | Allows you to tell Babel which browsers to provide compatibility for. Settings are set according to our browser support standards. |
@wordpress/babel-preset-default | See package.json | Default Babel preset for WordPress development. |
@wordpress/eslint-plugin | See package.json | JavaScript linting, configurations and custom rules for WordPress development. |
autoprefixer | See package.json | Adds browser prefixes to CSS. Used with PostCSS. |
babelify | See package.json | Sends anything going through Browserify on to Babel. |
browserify-shim | See package.json | Allows jQuery and other non-Common JS libraries to go through Browserify. |
eslint | See package.json | Lints JavaScript, checks against coding standards and finds errors. |
Name | Version | Purpose |
---|---|---|
grunt | See package.json | Compiles the theme SCSS and runs commands like linting. We plan to replace this in the future. |
grunt-browserify | See package.json | Lets you require modules. In this theme, it handles the jQuery dependency. |
grunt-contrib-clean | See package.json | Small utility to clean out files and folders as part of compiling. |
grunt-contrib-concat | See package.json | Combines separate JavaScript files into one as part of compiling. |
grunt-contrib-copy | See package.json | Copies files and folders as part of compiling. |
grunt-contrib-uglify | See package.json | Minifies files as part of compiling. |
grunt-postcss | See package.json | Adds CSS browser prefixes as part of compiling. |
grunt-sass | See package.json | Settings to compile SCSS files as part of compiling process. |
grunt-version | See package.json | Looks for a version number in package.json and copies it to other files during the compiling process. |
grunt-wp-i18n | See package.json | Sets internationalization theme domain text throughout the theme as part of compiling. |
node-sass | See package.json | Compiles the SCSS according to grunt settings as part of compiling. We currently use the LibSass setting behind the scenes as compiling engine. Dart Sass is possible to use, but is much slower. |
You'll see these types of errors in the terminal, and this should be your first stop if anything isn't working as expected, including styles not showing up. Try running the following if your theme is not compiling successfully when you run grunt build
.
package-lock.json
, then run npm install
, even if you have already run it before.node -v
and npm -v
to see your current node and npm versions. Do they match the versions in the supported technologies list? If not, use nvm to change the version by running nvm use [VERSION NUMBER]
, where [VERSION NUMBER]
is replaced with the version from the list above.npm rebuild node-sass --force
, then rerun npm install
. This one is helpful if you see a Node Sass OSX bindings error, or just switched npm/node versions for this theme.Once you've confirmed your theme is compiling, the next step is to make sure your files are uploading correctly.
text.txt
. Upload (don't monitor) the file using your code editor. Now, open a FTP program such as Transmit, Filezilla, or Cyberduck, and navigate to your theme folder in the server. Did the file upload? If so, your FTP is working correctly, and this is either a monitoring problem (go back to step 1) or a CSS problem (go to the next section).If you've confirmed a file is uploading, but the CSS you expect to see still isn't showing up, it's probably your CSS selector. Here's how to test that.
body
or h1
. Set the color to red, and use the important flag, like so: h1 { color: red !important; }
Upload your file again.