LS2013 Core Project – Add external CSS

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

4 thoughts on “LS2013 Core Project – Add external CSS

  1. After looking over a handful of the blog posts on your weeb page,
    I really like your techmique oof blogging. I saved it to my bookmark site
    list and will be checking back soon. Please visit my
    web site too and tell me yourr opinion.

  2. Hello to all, as I am actually eager of reading this blog’s post to be updated daily.
    It consists of good stuff.

  3. telefisch says:

    In the last download of Metro I found the following less-files:

    metro-icons.less instead of icons.less
    metro-icons-content.less instead of icons-content.less
    metro-icons-mixins.less instead of mixins.less.

    I know later this has to be corrected in some code-lines.

  4. Alberto says:

    When I save the file LightSwitchTiles.less Visual Studio doesn´t create the css automatically (Is it normal??), so I copy the css from your code Project.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: