This template goes along with the Bootstrap lessons for Intro to Coding for Journalists.
It uses Bootstrap 5 and a Gulp setup to support a development environment with Sass and image management.
This template can be used in Github Codespaces, a virtual machine that doesn't require any other setup.
-
Click on the green Use this template button and choose Create a new repository.
- This should allow you to create new repo based on icj-bootstrap-template.
- Leave all the other settings the same and click Create repository.
- It takes several seconds to create your repo.
-
Click on the green <> Code button and then choose the Codespaces tab.
- Click Create codespace on main.
- This will take a bit more time, but should just be a couple of minutes. **It will pause at one point and give you a prompt, but wait until you see it say "Detected Node.js" and let it finish that setup.
- Once the Node installation finishes, your browser will look like you have a version of Visual Studio Code open, and you do!
-
In the codespace's VS Code Terminal, run:
npm install -g gulp
-
In the Terminal, run
gulp dev
.
If you are running codespaces, you don't need to do this.
If your computer has Node.js and you have installed degit and gulp globally, you can pull a copy of this repo to your machine and work from there.
- Create a new folder on your computer where you want the files.
- In VS Code, open a new window and open your new folder.
- Open the integrated Terminal.
- Run
$ degit utdata/icj-bootstrap-template
to download the files. - Run
$ npm install
to install the node packages. - Run
$ git init
to intilize git. - Run
$ git add .
to add the files. - Run
$ git commit -m "first commit"
to commit the files. - Go to Github and create a repository of the same name.
- Use the
git add
command provided there to sync the repos. - Run
$ git push origin main
to push the code to Github.
- Run
gulp dev
to compile all the code and start a server. - If you just want to compile code without running a server, run
gulp
by itself.
All edits to HTML, SCSS or images should be done in the src
folder. DO NOT edit files in the docs
folder, or you will lose the changes when gulp tasks run.