Blog of an IT Guy

This section we will add our required CSS from external sources. Please make a note to right click on each downloaded zip and press the unblock button before you extract. This will save you some heartache.

For our MetroUI tiles we use code from MetroUI.org.ua. Please go to the site and download the latest from their github location. Once downloaded extract their source, we’ll work with the files shortly. I know they have a Package Manager install, but we’ll be using a small subset of the included code.

Next, we also use a very small jQuery plugin for picking colors. Its called Spectrum. I’ve tested a ton of these pickers lately and this one is the most robust and theme capable of any. It is also the only one I found, except for commercial, that played nicely with LightSwitch out of the box. You can go to their github location, download the code and extract.

Finally, go to our own github and download this project, LsCoreProject, and extract it.

1. Now.. Back in Visual Studio
2. In the LSCoreProject.App
3. Right click on the Content folder
4. Add, Existing item
5. From the spectrum-master you downloaded add spectrum.css
6. Right click on the Content folder
7. Add, Existing item
8. From our project you downloaded, LsCoreProject-master
9. Add the sp-msls-light-theme.css file
10. Right click on the Content folder again
11. Add, New folder, name it MetroUICss
12. Right click on your new MetroUICss folder
13. Add, Existing item
14. From the Metro-UI-CSS-master folder you downloaded, add the following
    colors.less
    icons.less
    icons-content.less
    layout.less
    mixins.less
    tiles.less
    transform.less
    typography.less
    variables.less

15. Add another folder in the Content folder, name it Fonts
16. Right click on the Fonts folder
17. Add, Existing item
18. Add all the files from the Metro-UI-CSS-master fonts folder
19. Right click on the MetroUICss folder
20. Add, New item
21. Select Style Sheet, name it LightSwitchTiles.less
22. Delete the defaults that Visual Studio adds to this file
23. Add the following code into LightSwitchTiles.less

    /*
     * Metro Bootstrap v 1.0.0
     *
     * Copyright 2012-2013 Sergey Pimenov
     * Licensed under the MIT License (MIT)
     * http://opensource.org/licenses/mit-license.php
     */
    // Core variables
     @import "variables.less";
    // Our Tiles
     .metro {
     @import "colors.less";
     @import "mixins.less";
     @import "transform.less";
     @import "typography.less";
     @import "layout.less";
     @import "tiles.less";
     @import "icons.less";
     @import "icons-content.less";
    }
    

24. Save the file, Visual Studio will generate the CSS
25. Final little piece to get MetroUICss to play nicely
26. Open the user-customization.css file in the Content folder
27. Add the following code to the end of the file

    .metro-container * {
    	-webkit-box-sizing: border-box;
    	-moz-box-sizing: border-box;
    	-ms-box-sizing: border-box;
    	-o-box-sizing: border-box;
    	box-sizing: border-box;
    }
    

28. That should do it…
29. Go ahead and save the entire project

Next… Add External Scripts

Here are the topics and their logical order:

1. Create the project
2. — You
3. Add external scripts
4. Update the default.htm
5. Add LogIn/LogOut/Register/ChangePassword
6. Create the security data source
7. Screens for permissions
8. Screens for role management
9. Screens for user management
10. Tables for tile menus
11. Screens for icon management
12. Screens for menu management
13. Create a tile menu screen
14. Create a database project
15. How to deploy successfully
16. Wrap up