Working with LESS and SCSS in Visual Studio 2015

I am demonstration a simple example to start working with LESS and SCSS in visual studio 2015.

First Set up web compiler

scr1

scr2

Click download and install.

Create an empty solution and add a project.

scr3

scr4

Add css folder and add a main.less file. Right click on the LESS file and compile it for first time.

scr5

scr6

It creates a compilerconfig.json where we can mention what are input and output file paths.

scr7

It automatically generates a css file and minified file with same name.

scr8

We can then include it in our html page and start adding css to the LESS file.

We also have the option to recompile the file or remove it from compilation altogether.

scr9

For scss files we follow the same steps.

Going further I added another less file and imported it in our main file and it works absolutely fine. It also generates sourcemap file in the converted scss to css file inline.

You can find the source code at the following github repo. https://github.com/niteshp27/setup-less-and-scss-in-visualstudio

Working with LESS in ATOM

ATOM is a open source text editor. Atom helps you write code faster with a smart, flexible autocomplete.  You can visit https://atom.io/, download and install it. We are going to work with LESS in ATOM IDE.

Once installed we can begin with installing the less package. For that we need to visit File -> Settings and then the Install tab.

scr1

Type less-autocompile and search for the package. The result will be something like below, click on install to install the package.

scr2

Create a LESS file named main.less and add the below parameters on first line of the LESS file main.less preceded by a //

out (string): This is the path where the CSS file is to be created
sourcemap (bool): This creates a create sourcemap file. I will give more details about sourcemap later in the blog. It is a boolean value true or false.
compress (bool): This will provide us an auto compress CSS minified file. It is a boolean value true or false.

scr3

We usually have different modules of css represented inside separate less file. In our example we find variable.less file. In the variable.less file add the below parmeter on first line of LESS file preceded by a //

main (string): This is the path to our main LESS file to be compiled.

scr4

The same applied for responsive.less file as well.

scr5

The LESS file auto compiles the LESS file on save.

Sourcemaps:-

Source maps seek to bridge the gap between higher-level languages like CoffeeScript and Sass and the lower-level languages they compile down to (JavaScript and CSS). Source maps allow you to see the original source (the CoffeeScript or Sass) instead of the compiled JavaScript or CSS while debugging.

A comment is added to the end of the generated CSS file:
/*# sourceMappingURL=screen.css.map */
This points to an additional file that was created during compilation: screen.css.map, which – as the name implies – is what maps all of the compiled CSS back to the source Sass declarations

To enable it in chrome follow the below screen

scr6

scr7

Configure criteria of content search webpart

The first step is to open site in sharepoint designer. Create a page layout and add a webpart zone first. It will look like this as given below:-

<WebPartPages:WebPartZone id=”g_F65E9C0D6A9E4BE49A9112742242B0E0″ runat=”server” title=”Right Row”><ZoneTemplate>

</ZoneTemplate></WebPartPages:WebPartZone>

Add content search webpart inside zone template via teh top menubar in sharepoint designer.

Apply the page layout to a newly created publishing page. Edit the page, configure the webpart that comes automatically as it is added in page layout. Configure search criteria settings:-

criteria-1

Save the page. Apply the webpart click ok. Page goes back to edit mode, click on export.

criteria-2

Open the exported file in the xml you will find the “DataProviderJSON” property. Copy that value which is a json.

criteria-3

Open html escape online utility:- http://www.freeformatter.com/html-escape.html#ad-output and escape this JSON value.

criteria-4

Replace the DataProviderJSON value in page layout with this escaped html. It will look something like below.
<WebControls:ContentBySearchWebPart runat=”server” AlwaysRenderOnServer=”False” ResultType=”” DataProviderJSON=”Escaped JSON” ……..>

</WebControls:ContentBySearchWebPart>

Save the page layout. Next time you create a new page with the above page layout, the page will have a pre-configured content search webpart.

Configure properties of content search webpart

We will be following the export method for configuring properties of content search webpart.

Open the website in a browser, edit the page which contains webpart zones, next click on add a webpart.

Add content search webpart via webpart, edit the web part select the correct options, select display template -> control and set the correct option then inspect the select box and check the value of selected option, it will be a url, copy that url.step1-export

 

Repeat same process for display template attribute “Item”. Add content search webpart via webpart, edit the web part select the correct options, select display template -> item and set the correct option then inspect the select box and check the value of selected option, it will be a url, copy that url.step2-export

 

Next apply that webpart edit option and then export that webpart.

step2-1-export

Open that webpart and search for that url in xml code you will find like this below:

step3-export

Now you found the attribute name of attributes of Display Templates control and item which are “RenderTemplateId” and “ItemTemplateId”.

Next you can go to Sharepoint Designer create a new page layout, add webpart zones and inside webpart zones zone template add Content Search Webpart and add the following values to the code. You can see the image below for the code.

E.g.
RenderTemplateId=”~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Control_ListWithPaging.js”
ItemTemplateId=”~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Item_TwoLines.js”

  1. To add vlaue for Control- Go to the page layout and add the url as attribute value of the attribute “RenderTemplateId”step4-exportstep4-1-export
  2. To add value for Item – Go to the page layout and add the url as attribute value of the attribute “ItemTemplateId”
    ItemTemplateId=”~sitecollection/_catalogs/masterpage/Display Templates/Content Web Parts/Item_TwoLines.js”step5-exportstep5-1-export

Save the page layout. Next when you create a page in browser and apple the newly created page layout you will get the already pre-configured Content Search Webpart.

Design Manager in Sharepoint 2013/Office365

The earlier blog post was specific to creating master pages and page layouts using Design Manager. You can find it here. This post is an overview of the Design Manager.

Design Manager
Design Manager is available when we activate publishing features that are available in publishing sites in both SharePoint Server 2013 and Office 365.

img 1.1

img 1.2
In case we want the SharePoint 2013 site to represent our organization’s brand and not “look like SharePoint,” we can create a custom design and use Design Manager to achieve that goal. Design Manager is a feature in SharePoint 2013 that makes it easier to create a fully customized design by using the web-design tools like editors of our own choice that we are already familiar with using only HTML and CSS, and then upload that design into SharePoint. Design Manager is the central hub and interface where you manage all aspects of a custom design.
img 3.1

  • Welcome
    In case we want the SharePoint 2013 site to represent our organization’s brand and not “look like SharePoint,” we can create a custom design and use Design Manager to achieve that goal. Design Manager is a feature in SharePoint 2013 that makes it easier to create a fully customized design by using the web-design tools like editors of our own choice that we are already familiar with using only HTML and CSS, and then upload that design into SharePoint. Design Manager is the central hub and interface where you manage all aspects of a custom design.
  • Manage Device Channels
    Using channels gives you the ability to display alternate content with unique styles based on the device used to browse to your site.
    Here we can create multiple device channels, where each channel has its own master page. We can have different design for a certain class of smart phones or tablets. Device Channels helps us here, with device channels, you can render a single publishing site in multiple ways by mapping different designs to different devices. Each channel can have its own master page that links to a style sheet that is optimized for a specific device. Each channel specifies the user agent substrings for one or more devices, such as “Windows Phone OS”. These are rules that determine what devices are included in each channel. Visitors see your site in a design optimized for their specific device.
    Device channels are created and stored in a SharePoint list in which order matters, because device channels also have rankings. Device channels in the list are ordered from top to bottom, and the inclusion rules are processed in that order. This means that we want device channels with the most specific rules at the top. Below is a link where we can look for User Agent Strings.
    http://www.useragentstring.com/pages/useragentstring.php
    For testing, we can use the query string “?DeviceChannel=alias” within a browser to preview our site for a specific channel.device channels
  • Upload Design Files
    The easiest way to upload and continue to work on design files is to map a drive on our computer to the Master Page Gallery of our SharePoint site. This connects a folder on our computer to the Master Page Gallery, so that we can work on files that reside on the server in SharePoint 2013 as if they were local files.
    Mapping the following location as a network drive allows us to work easily with our design files. After we map a network drive, we can upload our design to SharePoint simply by copying the design files to a folder on the mapped drive of our computer that is connected to SharePoint. After we convert our HTML file to a SharePoint master page, and after we create page layouts and display templates that each have their own associated HTML file, we can continue to edit those associated HTML files in our HTML editor on our computer. SharePoint automatically synchronizes the files on our computer with the Master Page Gallery.We can use this drive to, Upload the HTML version of our Master Page, Upload CSS and js files and any other design assets and Access design files for editing.upload design files
  • Edit Master Pages
    We can use the network drive we mapped earlier to edit our master pages using any HTML editor. To preview our master page, we need to click on its file name or status. While previewing our HTML master page, we can use the Snippet Gallery to get code snippets for SharePoint functionality that we can copy and paste into our HTML file.
    Creating a fully branded master page that contains all of the SharePoint functionality that you want consists of converting an HTML file into a SharePoint master page, previewing the master page and fix any issues and adding SharePoint snippets to the master page.
    Convert an HTML file
    The core feature of Design Manager is that it converts our HTML design into a SharePoint master page. When we convert an HTML file to a master page, Design Manager creates a .master file that contains all of the required elements. During conversion, some HTML markup (such as comments) also gets added to our original HTML file.After the conversion, our HTML file and the SharePoint master page are associated, so that when we edit and save the HTML file in our mapped drive, the master page is updated automatically. In Design Manager, the HTML master page has a property named Associated File that determines whether changes to the HTML file are synced to the .master file.
    Minimal master page
    Design Manager also provides an option to begin our design by using a minimal master page. In this scenario, you don’t have to begin with an HTML design; instead, you can create an HTML master page that contains the minimum page elements necessary to render the master page correctly in SharePoint, and then build out our design by editing the HTML master page.edit master page
  • Edit Display Template
    Search results and other search-related web parts rely on display templates to control the appearance and behavior of search results. The best way to create a new display template is to copy an existing one that’s similar to what we want and then change yours using any HTML editor. We can use the Content Search Web Part and other search-driven Web Parts to display the results of search queries as content on our pages.
    With master pages and page layouts, you edit an associated HTML file but not the .master file or .aspx file. Similarly, display templates are made of an HTML file and an associated .js file, where you edit only the HTML file. Each time you save that HTML file, SharePoint automatically updates the associated .js file.
    When you want to create a custom display template, you should begin by copying and then modifying one of the existing display templates. This is helpful because the default display templates contain information in comments in the HTML files, and you’ll have the proper basic page structure and a framework in place for basic tasks like mapping input fields.
  • Edit Page Layout
    Page layouts define the look and feel of a set of pages by styling page fields and web part zones within the common elements of a master page. We can use the network drive we mapped earlier to edit our page layouts using any HTML editor. To preview our page layout, click on its file name or status. While previewing our HTML page layout, use the Snippet Gallery to get code snippets for SharePoint functionality that we can copy and paste into our HTML file.
    The process for creating a page layout is a bit different from that for creating a master page. For a master page, you start with an HTML design, convert that into a SharePoint master page, and then continue to edit the associated HTML file. But for a page layout, we first create the page layout in Design Manager, which creates an “.aspx” file and an HTML file, and then we edit the associated HTML file from the mapped drive in your HTML editor. The reason we have to use Design Manager to create a page layout is so that the correct set of page fields can get added to the page layout.
    When you create a page layout, we select a master page with which to preview your page layout, and we select a Page Layout Content Type. A content type is a schema of fields and data types, and the fields available in the page layout content type determine what page field controls are available on the page layout that we design. We create a page layout in the browser first so that the page fields can be added.
    After we create a page layout with its associated HTML file, the remaining steps are the same as for a master page.edit page layout
  • Publish and Apply Design
    Once the visual design of your site is complete, we need to make sure we have published our files master pages and page layputs and site assets like css and js files. It provides link to gallery location to which we’ve saved design assets like images, CSS, and JavaScript files to publish them and set master page to different device channels.
  • Create Design Package
    Once the visual design of your site is complete, we need to make sure we have published our files master pages and page layputs and site assets like css and js files. It provides link to gallery location to which we’ve saved design assets like images, CSS, and JavaScript files to publish them and set master page to different device channels.

Creating master pages and page layouts with design manager in sharepoint 2013/Office365

The following blog post follows steps to be followed to get started with Creating master pages and page layouts with design manager in sharepoint 2013/Office365.

I have created master pages and page layouts in Office365 using design manager. It follows a step by step details and by the end of the blog you will have your own demo blog site template ready which uses master page and page layout.

I have replicate the Bootstrap blog template that is available over here.

  • activate features to enable design manager
    Site collection administration-> Site collection features->sharepoint server publishing infrastructureSharePoint Server Publishing Infrastructure (under Site collection features)
    img 1.1Site action-> Manage site features->sharepoint server publishing.SharePoint Server Publishing (under Manage Site Feature)img 1.2
  • Under look and feel you will find design manager.img 2.1
  • Click on edit master pagesimg 3.1
  • Insert the site collection url address. Eg:- https://example.sharepoint.com/sites/dev.
    1. Login with credentials.
    2. Open the site collection and upload the masterpage html document.
    3. Also upload the files under style library folder, check out, check in and publish them as a major version.
    4. Open sharepoint designer upload our html file under _catalogs/master pages. You will find it under All Files->_catalogs->masterpages.
    5. Create required folder structure and upload the remaining files. Follow the same checkout, check-in and publish process for rest of the files. Usually the resources go under Style Library but in this demo we create it under Masterpage library itself.
  • Go to design manager, click on convert file to master page. Browse and select our html document.img 5.1 img 5.2Select blog.html. After that click on insert.
  • It will automatically create another file with same name and extension as .master. The changes made in html file are synced to the master page automatically. You can now go to SP Designer refresh the site and see the changes.img 6.1
  • Open the master page in SP designer, edit it and make the necessary changes.
    Remove the markup of page layout from html page with a div attribute data-name=ContentPlaceHolderMain. You will see code something like below that is selected by user. Place this code inside container div.img 7.1Save it checkout, check-in and publish as a major version.
  • Next step to create a page layout. Select edit page layout option in left nav then the create a page layout.img 8.1Select the master page and default content type.img 8.2Click on the layout name and open the preview.img 8.3
  • Open layout in sharepoint designer. You will see two pages with same page layout name. Edit the html page.
  • Inside the tags of ContentPlaceHolderID with ID as PlaceHolderMain you will find html markup with some sharepoint code.
    <!–MS:<asp:ContentPlaceHolder ID=”PlaceHolderMain” runat=”server”>–><!–ME:</asp:ContentPlaceHolder>–>

    img 10.1These are preadded webparts by default in the page layout, we will delete them and add our own html markup for our page layout.

  • Take out the not required text and snippets and keep only the structure we want to keep for our page layout in which we will copy paste the web part zone.img 11.1
  • Visit our Design manager under page layout section click on the page layout that we created.img 12.1
  • On the top right we will see snippets option link. Next open the snippets link which opens a new page, there we will get the web part zones that we will copy to insert in our page layout later.img 13.1img 13.2
  • Copy paste the web part zones from the below copy to clipboard button. Rename the ids after pasting it in the html markup. Web Partzones must have unique id.img 14.1Changing the html markup of the page layout keep sync with the page layout “.aspx” page. Check out, check in the page and publish it as a major version.
  • Next up create a new page. You can hover on site settings menu, click on add page, it adds below the pages path. You can also select the page layout at this page.img 15.1 img 15.2Orimg 15.3
  • Click on created page and then edit that page. Select page tab and next page layout to select that page layout. Check in the page.img 16.1
  • Visit site settings and click on master pageimg 17.1Select the master page and click saveimg 17.2
  • Edit the page it will take the applied master page and page layout.img 18.1
  • You can now add webparts. Go ahead, add few content editors and text inside it.img 19.1
  • Add some text in it, save it.img 20.1
  • This is how it looks finallyimg 21.1
Note: In case you encounter any errors or issues check if both the publishing features are active or disable and reactivate it.

Intro to LESS CSS – Part 2

Operations:- Operations are functions or modifiers that we can apply to our rules. We can Add, Substract, Multiply or Divide.

Note:- LESS is aware of PX hence no need to mention measurement unit.

Color Functions:- Color functions are used to make variations in color. These functions are darken, lighten, fadein, fadeout, saturate, desaturate. Fadein and fadeout need opacity to be mentioned already.

Comments:- There are two ways in which we can comment.

/*This will appear in LESS to CSS file*/

//This will not appear in CSS file.

Importing:- When we mention file name we can mention .LESS or .CSS extention for the file that we are importing

E.G:- @Import “reset”

Escaping:- Old proprietory code causes LESS to error, hence we can escape using ~”-code-”

E.G:- filter: ~”progid:DXImageTransform.Microsoft.gradient(startColorstr=#fad59f, endColorstr=#fa9907)”

Scope:- Variables will inherit first from local scope, if not available locally it will search for wider scope

Spin:- We can use spin method to spin the color wheel by degrees to change color values. Its best to set only one color variable in LESS stylesheet and use modifiers throughout rest, then whole design depends on it.