After installing the 2sxc Content package it will work immediately. To customize it, you could just start modifying the CSS files, but the best way to do this is using SASS, which generates the entire CSS based on variables.
Install Builder Tools
To get the automatic builder to work, you have two options:
- Not recommended: If you want to install the tools like gulp etc. globally, you will need to do that first. We don't recommend it for getting started, as it's harder to set up. 2sic uses this model. We'll provide a recipe soon for this.
- Recommended: Install gulp, etc. in the project - run these commands:
npm install [email protected] [email protected] [email protected] gulp-less [email protected]npm install
Run a First Build
Now that it's ready, let's do a quick test to verify it works. The default setup assumes that you have a Bootstrap3 or Bootstrap4 theme installed in DNN, which will contain standard Bootstrap variables like $primary defining the primary color.
- Make sure you have a bootstrap 4 theme installed (BS4 is preferred, but BS3 would also work). If you don't have this yet, we recommend you install Bootstrap4 Instant and do the customization steps so that node-modules are ready.
- Now we need to tell the Content SASS, that the theme contains the primary definitions. Go to
/src/scss/bs4.scss (or bs3.scss) in 2sxc/Content folder and change the path pointing to your theme. Here are the exact changes you need to make, if you are working with Bootstrap4 instant.
- Now run
npm start-bs4 (or npm start-bs3 for bootstrap 3) and watch gulp do its magic.