Discuss

Using Bootstrap Source Files

On this page

Creating a project with Bootstrap source files

Update: Although the following will work, this video will show a much easier way to do the same: https://www.youtube.com/watch?v=85tt7KwUMLo

We will assume that you have:

  1. created a new project as per https://docs.wappler.io/t/creating-a-new-local-project/2909
  2. added App Connect to your page as per https://docs.wappler.io/t/adding-app-connect/2921
  3. added Bootstrap 4 local as per https://docs.wappler.io/t/adding-bootstrap-4/2920

Take note of the files that have been added to the File Manager, in particular the Bootstrap style sheet. We will need to replace that file with our own custom file.

image|360x389

1: Add Bootstrap source files to the project

Step 1 : Create a new folder for our source files by right clicking the root folder (1) and choosing Create Folder (2) in the pop-up

image|358x414

Step 2 : Give the new folder a name like _src (1). The reason for the underscore is to keep the folder separate from the rest of the folder structure. This _src folder can be also used for other documents and images pertaining to the project, but are not actually used in the project. Here I am thinking of passwords, PS layouts and original images.

image|356x436

Step 3 : Create a new folder under _src to house our Bootstrap source files. Right click _src (1) and Create New Folder (2) in the pop-up.

image|358x443

Step 4 : Give the new folder the name of sass named after the Bootstrap source files.

image|354x375

Step 5 : Created a folder for Bootstrap by right clicking sass (1) and Create Folder (2)

image|353x420

Step 6 : Name the new folder bootstrap (1)

image|356x391

Step 7 : Lastly, we'll create a folder to house the Bootstrap ZIP file in Step 11. Right click _src (1) and choose Create Folder (2)

image|355x411

Step 8 : Name the new folder assets (1)

image|358x398

Step 9 : Open a browser and go to getbootstrap.com (1) and choose Download (2)

image|690x92

Step 10 : Scroll down to Source files (1) and choose Download source (2)

image|690x239

Step 11 : Navigate to the assets folder (1) created in step 8 and click the Save button (2). This will save the Bootstrap ZIP file to your local environment. It is not a necessity to place it here, you can drop it anywhere you wish; it is just a convenient location for this tutorial.

image|690x349

Step 12 : Using the OS File Manager navigate to the ZIP file (1) and double click the file to open it (2)

image|690x340

Step 13 : For this tutorial, we are only concerned with the scss files. Double click the scss folder (1) to open it.

image|690x261

Step 14 : Select all of the content of the scss folder and copy (1)

image|690x261

Step 15 : Navigate to the bootstrap folder (1) and paste into it, the contents of the scss folder (2).

image|690x309

Step 16 : Next, we'll do a bit of housekeeping. Scroll down to the bottom of the content and select both bootstrap-grid.scss and bootstrap-reboot.scss (1). Click Delete (2). We will not be needing these two files.

image|690x340

Step 17 : Right click bootstrap.scss (1) and select to Cut (2) the file.

image|690x320

Step 18 : Go back one folder (1) and paste bootstrap.scss in the sass folder (2)

image|690x340

And we are done with adding the Bootstrap source files to our project. Close the OS File Manager.

2. Add custom style rules to the project

Back in Wappler, your file structure should be similar to the following image, making sure that bootstrap.scss (1) is in the sass directory

image|359x425

Step 1 : Right click sass (1) and choose Create Folder (2)

image|355x446

Step 2 : Name the folder mystyles (1)

image|358x450

Step 3 : We'll add a couple of files to our folder. First a couple of notes: the underscore for the filename is the convention for partials (part files of the main file). We'll add just two files for this tutorial, this can be expanded at will. Right click mystyles (1) and choose Create File (2).

image|353x500

Step 4 : Name the file _myvariables.scss (1)

image|358x467

Step 5 : Repeat Step 3, naming the file _layout.scss (1)

image|339x500

Step 6 : Double click the bootstrap folder (1) to expose the files (2)

image|344x465

Step 7 : Scroll down to _variables.scss (1) and double click to open it (2).

image|690x495

Step 8 : Select all of the contents of the file (CTRL+A) (1), right click and choose Copy (2).

image|690x495

Step 9 : Double click _myvariables.scss (1) and inside the document Select All (CTRL+A) and paste the copied content from _variables.scss (CTRL+V) (2)

image|690x495

Step 10 : Now we need to comment each of the lines out so that we do not repeat the original Bootstrap style rules. To do this, click at the start of the first line (1) of the document, press CTRL+ALT and drag the line down to the bottom of the document (can be done in stages if this is more comfortable) (2)

image|690x373

Step 11 : Add the remarks to the selected lines, i.e. '// ' including the space (1).

image|690x495

Step 12 : First we need to adjust bootstrap.scss to reflect the different folder. Open bootstrap.scss (1), click before functions (2), press CTRL+ALT and drag the line down to the end (3). Notice that the preceding underscore and the file extension have been removed.

image|690x495

Step 13 : Add bootstrap/ (1) to the selection.

image|690x495

Step 14 : Now add our custom files to the list. Notice that myvariables (1) comes as one of the first imports for it to work. Other custom files come after the Bootstrap imports (2).

image|632x500

That concludes this section. Please note that further customisation can be mad at this stage. As an example, if you do not need the Carousel because you prefer the App Connect equivalent, you can remove the carousel import, thus reducing the size of the compiled CSS file.

3. Compiling the CSS file (in the absence of a Wappler compiler)

Now that we have our all of our files in place, we can start with compiling our CSS file. For the moment, Wappler does not have a compiler, it is planned for a future release. Therefore we will have to depend on a third party app. I have found that Prepros, https://prepros.io/, to be the best solution. Go to their website and download the program. The rest of this tutorial assumes that you have installed Prepros on your system.

Step 1 : The result should be similar to the following image. Click on bootstrap.scss (1) to expose the preferences panel (2).

image|690x308

Step 2 : Click on the Output Path (1) and navigate to the CSS file that Wappler has place in our file structure (2). Select the CSS file (3) and Select (4), You will be asked if you want to replace the existing file. Click Yes.

image|690x324

Step 3 : Other options include Auto Compile (1), if we want a Source Map (2), the Output Style (3), Autoprefixer (4) - this is a Boostrap requirement - and if we want the file minimised (5). Select the same options as in the following image for this tutorial.

image|690x324

Step 4 : Click on Process File (1) and our Bootstrap 4 are now compiled as verified by the success message.

image|690x371

This concludes setting up the compiler. Please note that, in order for the compiler to work, Prepros must be running.

4. Testing our project using Bootstrap 4 source files.

Important! To test our project, you must ensure that Prepros is running

Step 1 : Open the index.html file that was created in the prelude to this tutorial. and add a navigation bar, a main section containing 3 cards and a footer.

image|690x373

We notice a couple of irritating aspects, namely we want the container to be wider (1) on wide screens and and the footer does not extend to the bottom of the page (2)

Step 2 : To increase the width of the container, open _myvariables.scss (1) and go to line 203 on (2). This is the section for Grid containers. Un-comment the relevant lines (3).

image|660x500

Step 3 : Change the width for extra large screens to 1200px (1) and save the file and wait for the confirmation from Prepros that the file has been re-compiled.

image|660x500

Step 4 : Open _layout.scss (1) and add the lines of code in the image. It is outside the scope of this tutorial to explain the code, except to say that I have snuck a scroll bar into the design. Don't forget to save the file and wait for the confirmation.

image|660x500

That's all folks! If you have a problem or find an error, please start a new topic in the general community section.