FAQ/bootstrap-namespacing.md
... ...
@@ -1,23 +1,29 @@
1 1
#Namespace Izenda's Bootstrap Classes to Avoid Conflicts
2 2
3 3
**Under Construction**
4
-<!--
4
+
5 5
[[TOC]]
6 6
7 7
##Introduction
8 8
You will need a CSS pre-processor (SASS or LESS) to accomplish this.
9 9
10 10
##Using SASS
11
-1. To avoid having to change several references throughout the applicaiton, rename main.css (for example, main-no-namespace.css).
11
+**Step 1 >> To avoid having to change several references throughout the applicaiton, rename main.css (for example, main-no-namespace.css).**
12 12
13
-2. Create a SASS sheet titled main.scss.
13
+![Rename CSS files](/FAQ/bootstrap-namespacing/bootstrapnamespace1.png)
14 14
15
-3. Import the renamed file (in this case, main-no-namespace.css) into the SASS sheet _inside_ the new namespace class. This sheet will compile to main.css.
15
+**Step 2 >> Create a SASS sheet titled main.scss.**
16 16
17
-4. Add the new namespace class (in this case, izenda-bs) to the top-level Izenda div. In our vanilla reference implementations, all Izenda pages render inside of the first div below the body tag in the Default.master page.
17
+**Step 3 >> Import the renamed file (in this case, main-no-namespace.css) into the SASS sheet _inside_ the new namespace class. This sheet will compile to main.css.**
18 18
19
-5. Repeat 1-4 for the Report.css stylesheet.
19
+![Create main SASS sheets](/FAQ/bootstrap-namespacing/bootstrapnamespace2.png)
20 20
21
-##Using LESS
21
+**Step 4 >> Add the new namespace class (in this case, izenda-bs) to the top-level Izenda div. In our vanilla reference implementations, all Izenda pages render inside of the first div below the body tag in the Default.master page.**
22
+
23
+![Add new class to top-level div](/FAQ/bootstrap-namespacing/bootstrapnamespace4.png)
22 24
23
--->
... ...
\ No newline at end of file
0
+**Step 5 >> Repeat 1-3 for the Report.css stylesheet.**
1
+
2
+![Create Report SASS sheets](/FAQ/bootstrap-namespacing/bootstrapnamespace3.png)
3
+
4
+##Using LESS