[{"data":1,"prerenderedAt":1225},["ShallowReactive",2],{"article-bootstrap-with-less-part-1":3},{"article":4,"tags":509,"previous":510,"next":936},{"id":5,"title":6,"author":7,"body":8,"createdAt":7,"description":501,"extension":502,"img":7,"meta":503,"navigation":504,"path":505,"seo":506,"stem":507,"tags":7,"updatedAt":7,"__hash__":508},"articles\u002Farticles\u002Fbootstrap-with-less-part-1.md","Bootstrap With Less Part 1",null,{"type":9,"value":10,"toc":499},"minimark",[11,14,28,35,37,51,54,57,267,273,397,408,411,485,496],[12,13],"hr",{},[15,16,17,18,21,22,24,25,27],"p",{},"title: Bootstrap with LESS (Part 1)\ndescription: Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS\ncreatedAt: 2015-06-05T01:00:15.1300000-04:00\nupdatedAt: 2015-06-05T01:00:15.1300000-04:00\nimg: \u002Farticles\u002Fimages\u002Fwindows-live-writer-bootstrap-with-less-part-1_11c5b-less_thumb.png",[19,20],"br",{},"\nauthor:",[19,23],{},"\nname: David",[19,26],{},"\ntags:",[29,30,31],"ul",{},[32,33,34],"li",{},"aspnet",[12,36],{},[15,38,39,40,45,46,50],{},"The latest version of ",[41,42,44],"a",{"href":43},"http:\u002F\u002Fgetbootstrap.com\u002F","Bootstrap"," uses LESS (a CSS preprocessor) to build the distributed css files.  Confused yet? So, lets focus on what is LESS and how can you compile css.  The best source of less documentation can be found ",[41,47,49],{"href":48},"http:\u002F\u002Fwww.lesscss.org\u002F","here",". ",[15,52,53],{},"“Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.  Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. ",[15,55,56],{},"For example:",[58,59,64],"pre",{"className":60,"code":61,"language":62,"meta":63,"style":63},"language-css shiki shiki-themes github-light github-dark","@base: #f938ab;  \n.box-shadow(@style, @c) when (iscolor(@c)) { \n   -webkit-box-shadow: @style @c; \n   box-shadow: @style @c; \n} \n.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { \n   .box-shadow(@style, rgba(0, 0, 0, @alpha)); \n} \n.box { \n   color: saturate(@base, 5%); \n   border-color: lighten(@base, 30%); \n   div { \n.box-shadow(0 0 5px, 30%) } \n}  \n","css","",[65,66,67,90,99,115,127,133,141,170,175,185,215,236,244,261],"code",{"__ignoreMap":63},[68,69,72,76,80,83,87],"span",{"class":70,"line":71},"line",1,[68,73,75],{"class":74},"sVt8B","@",[68,77,79],{"class":78},"s9eBZ","base",[68,81,82],{"class":74},": ",[68,84,86],{"class":85},"s7hpK","#f938ab;",[68,88,89],{"class":74},"  \n",[68,91,93,96],{"class":70,"line":92},2,[68,94,95],{"class":85},".box-shadow(@style",[68,97,98],{"class":74},", @c) when (iscolor(@c)) { \n",[68,100,102,106,109,112],{"class":70,"line":101},3,[68,103,105],{"class":104},"sj4cs","   -webkit-box-shadow",[68,107,108],{"class":74},": @",[68,110,111],{"class":104},"style",[68,113,114],{"class":74}," @c; \n",[68,116,118,121,123,125],{"class":70,"line":117},4,[68,119,120],{"class":104},"   box-shadow",[68,122,108],{"class":74},[68,124,111],{"class":104},[68,126,114],{"class":74},[68,128,130],{"class":70,"line":129},5,[68,131,132],{"class":74},"} \n",[68,134,136,138],{"class":70,"line":135},6,[68,137,95],{"class":85},[68,139,140],{"class":74},", @alpha: 50%) when (isnumber(@alpha)) { \n",[68,142,144,147,150,153,155,158,161,164,167],{"class":70,"line":143},7,[68,145,146],{"class":74},"   .",[68,148,149],{"class":104},"box-shadow",[68,151,152],{"class":74},"(@",[68,154,111],{"class":104},[68,156,157],{"class":74},", ",[68,159,160],{"class":104},"rgba",[68,162,163],{"class":74},"(0, 0, 0, @",[68,165,166],{"class":104},"alpha",[68,168,169],{"class":74},")); \n",[68,171,173],{"class":70,"line":172},8,[68,174,132],{"class":74},[68,176,178,182],{"class":70,"line":177},9,[68,179,181],{"class":180},"sScJk",".box",[68,183,184],{"class":74}," { \n",[68,186,188,191,193,196,199,203,205,208,212],{"class":70,"line":187},10,[68,189,190],{"class":104},"   color",[68,192,82],{"class":74},[68,194,195],{"class":104},"saturate",[68,197,198],{"class":74},"(",[68,200,202],{"class":201},"s4XuR","@base",[68,204,157],{"class":74},[68,206,207],{"class":104},"5",[68,209,211],{"class":210},"szBVR","%",[68,213,214],{"class":74},"); \n",[68,216,218,221,223,226,229,232,234],{"class":70,"line":217},11,[68,219,220],{"class":104},"   border-color",[68,222,82],{"class":74},[68,224,225],{"class":104},"lighten",[68,227,228],{"class":74},"(@base, ",[68,230,231],{"class":104},"30",[68,233,211],{"class":210},[68,235,214],{"class":74},[68,237,239,242],{"class":70,"line":238},12,[68,240,241],{"class":104},"   div",[68,243,184],{"class":74},[68,245,247,250,252,255,258],{"class":70,"line":246},13,[68,248,249],{"class":74},".",[68,251,149],{"class":104},[68,253,254],{"class":74},"(0 0 5",[68,256,257],{"class":104},"px",[68,259,260],{"class":74},", 30%) } \n",[68,262,264],{"class":70,"line":263},14,[68,265,266],{"class":74},"}\n",[15,268,269],{},[270,271,272],"strong",{},"will compile to…",[58,274,276],{"className":60,"code":275,"language":62,"meta":63,"style":63},".box { \n   color: #fe33ac; border-color: #fdcdea; \n} \n.box div { \n   -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); \n   box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); \n}  \n",[65,277,278,284,307,311,320,359,393],{"__ignoreMap":63},[68,279,280,282],{"class":70,"line":71},[68,281,181],{"class":180},[68,283,184],{"class":74},[68,285,286,288,290,293,296,299,301,304],{"class":70,"line":92},[68,287,190],{"class":104},[68,289,82],{"class":74},[68,291,292],{"class":104},"#fe33ac",[68,294,295],{"class":74},"; ",[68,297,298],{"class":104},"border-color",[68,300,82],{"class":74},[68,302,303],{"class":104},"#fdcdea",[68,305,306],{"class":74},"; \n",[68,308,309],{"class":70,"line":101},[68,310,132],{"class":74},[68,312,313,315,318],{"class":70,"line":117},[68,314,181],{"class":180},[68,316,317],{"class":78}," div",[68,319,184],{"class":74},[68,321,322,324,326,329,332,335,337,340,342,344,346,348,350,352,354,357],{"class":70,"line":129},[68,323,105],{"class":104},[68,325,82],{"class":74},[68,327,328],{"class":104},"0",[68,330,331],{"class":104}," 0",[68,333,334],{"class":104}," 5",[68,336,257],{"class":210},[68,338,339],{"class":104}," rgba",[68,341,198],{"class":74},[68,343,328],{"class":104},[68,345,157],{"class":74},[68,347,328],{"class":104},[68,349,157],{"class":74},[68,351,328],{"class":104},[68,353,157],{"class":74},[68,355,356],{"class":104},"0.3",[68,358,214],{"class":74},[68,360,361,363,365,367,369,371,373,375,377,379,381,383,385,387,389,391],{"class":70,"line":135},[68,362,120],{"class":104},[68,364,82],{"class":74},[68,366,328],{"class":104},[68,368,331],{"class":104},[68,370,334],{"class":104},[68,372,257],{"class":210},[68,374,339],{"class":104},[68,376,198],{"class":74},[68,378,328],{"class":104},[68,380,157],{"class":74},[68,382,328],{"class":104},[68,384,157],{"class":74},[68,386,328],{"class":104},[68,388,157],{"class":74},[68,390,356],{"class":104},[68,392,214],{"class":74},[68,394,395],{"class":70,"line":143},[68,396,266],{"class":74},[15,398,399,400,404,405],{},"Essentially, LESS code will get compiled into CSS.  In order to compile there are command line applications.  Currently, I am using ",[41,401,403],{"href":402},"https:\u002F\u002Fnodejs.org\u002F","Node.js"," with a npm package installed via ",[270,406,407],{},"npm install –g less",[15,409,410],{},"Technically, you can also compile ‘client-side’ but in production it is recommended that the css is precompiled (remember compiling just means translating the less css code to simple css files).  Include your styles.less via the following link as well s the less.js file to perform compilation.",[58,412,416],{"className":413,"code":414,"language":415,"meta":63,"style":63},"language-html shiki shiki-themes github-light github-dark","\u003Clink rel=\"stylesheet\u002Fless\" type=\"text\u002Fcss\" href=\"styles.less\" \u002F>\n\u003Cscript src=\"less.js\" type=\"text\u002Fjavascript\">\u003C\u002Fscript>  \n","html",[65,417,418,455],{"__ignoreMap":63},[68,419,420,423,426,429,432,436,439,441,444,447,449,452],{"class":70,"line":71},[68,421,422],{"class":74},"\u003C",[68,424,425],{"class":78},"link",[68,427,428],{"class":180}," rel",[68,430,431],{"class":74},"=",[68,433,435],{"class":434},"sZZnC","\"stylesheet\u002Fless\"",[68,437,438],{"class":180}," type",[68,440,431],{"class":74},[68,442,443],{"class":434},"\"text\u002Fcss\"",[68,445,446],{"class":180}," href",[68,448,431],{"class":74},[68,450,451],{"class":434},"\"styles.less\"",[68,453,454],{"class":74}," \u002F>\n",[68,456,457,459,462,465,467,470,472,474,477,480,482],{"class":70,"line":92},[68,458,422],{"class":74},[68,460,461],{"class":78},"script",[68,463,464],{"class":180}," src",[68,466,431],{"class":74},[68,468,469],{"class":434},"\"less.js\"",[68,471,438],{"class":180},[68,473,431],{"class":74},[68,475,476],{"class":434},"\"text\u002Fjavascript\"",[68,478,479],{"class":74},">\u003C\u002F",[68,481,461],{"class":78},[68,483,484],{"class":74},">\n",[15,486,487,488,492],{},"Reference: ",[41,489],{"href":490,"target":491},"https:\u002F\u002Fgetbootstrap.com\u002F2.0.1\u002Fless.html","_blank",[41,493,490],{"href":490,"rel":494},[495],"nofollow",[111,497,498],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}",{"title":63,"searchDepth":92,"depth":92,"links":500},[],"title: Bootstrap with LESS (Part 1)\ndescription: Customize and extend Bootstrap with LESS, a CSS preprocessor, to take advantage of the variables, mixins, and more used to build Bootstrap's CSS\ncreatedAt: 2015-06-05T01:00:15.1300000-04:00\nupdatedAt: 2015-06-05T01:00:15.1300000-04:00\nimg: \u002Farticles\u002Fimages\u002Fwindows-live-writer-bootstrap-with-less-part-1_11c5b-less_thumb.png\nauthor:\nname: David\ntags:","md",{},true,"\u002Farticles\u002Fbootstrap-with-less-part-1",{"description":501},"articles\u002Fbootstrap-with-less-part-1","4zKmRuw9qM0LzxbznU6VsGSAVT01GDunYSwbJsbSFTk",[],{"id":511,"title":512,"author":7,"body":513,"createdAt":7,"description":930,"extension":502,"img":7,"meta":931,"navigation":504,"path":932,"seo":933,"stem":934,"tags":7,"updatedAt":7,"__hash__":935},"articles\u002Farticles\u002Fasp-net-2-0-compilation-models.md","Asp Net 2 0 Compilation Models",{"type":9,"value":514,"toc":928},[515,517,530,534,536,539,561,569,576,582,585,597,600,605,608,613,616,619,874],[12,516],{},[15,518,519,520,522,523,21,525,527,528,27],{},"title: Asp.net 2.0 Compilation Models",[19,521],{},"\ndescription:  Compliation of asp.net, c#, vb.net applications can depend on different aspects.  Keep in mind the following factors.\ncreatedAt: 2015-04-20T08:07:20.7100000-04:00\nupdatedAt: 2015-04-20T08:07:20.7100000-04:00\nimg: \u002Farticles\u002Fimages\u002Fframework.png",[19,524],{},[19,526],{},"\nname: Admin",[19,529],{},[29,531,532],{},[32,533,34],{},[12,535],{},[15,537,538],{},"Keep the following in mind with 2.0 Asp.net applications",[29,540,541,544,547,550,553],{},[32,542,543],{},"Visual Studio 2005\u002F2008 knows nothing about compiling a web application.  Visual Studio lets the asp.net platform perform the compilation.",[32,545,546],{},"When you perform a VS.NET Build > VS.NET does not build the application, Asp.net performs the build build of all the .cs and .vb files.  The resulting assemblies are placed by default in the C:\\Windows\\Microsoft.NET\\Framework\\v2.0.50727\\Temporary ASP.NET Files directory.",[32,548,549],{},"The debug setting in the web.config (debug\u002Frelease) controls the compilation mode.  If in debug mode then respective .pdb debugging symbol files are created.",[32,551,552],{},"The Configuration Manager in the default build model of Visual Studio is not utilized.  As a result the only option for a web site ‘project’ is the Debug compilation.  This is because the web.config controls the compilation.",[32,554,555,556],{},"The Publish command will precompile the web application and place the files in a directory for deployment.  The Publish command executes the command line aspnet_compiler tool with the appropriate switches.  Publish will always precompile a release build without debugging symbols (pdb files)",[29,557,558],{},[32,559,560],{},"Note: the Publish command does not change the debug setting in the web.config.  The Publish command always compiles in release ode however if you precompile to an updateable web site and then update the web site in place those dynamic compilations will produce debug code and pdb files.",[15,562,563,564,568],{},"Using the ",[41,565,567],{"target":491,"href":566},"http:\u002F\u002Fwww.microsoft.com\u002Fdownloads\u002Fdetails.aspx?FamilyId=0AA30AE8-C73B-4BDD-BB1B-FE697256C459&displaylang=en","Web Site Deployment Utility"," (WSD)",[15,570,571,572,575],{},"Using WSD the above scenario is different.  Web Site Deployment project is really a nice interface on a MSBuild project.  The deployment project creates a MSBuild file and passes it to aspnet_compiler for compilation.  Unlike the VS.NET Publish the WSD ",[270,573,574],{},"will"," update the web.config for the right compilation mode.  The user controls the compilation mode within the Configuration Manager when using the Web",[15,577,578,579,581],{},"Site Deployment project.",[19,580],{},"\nSetting up Configuration Manager as follows will deploy the files to the directory highlighted below without debug symbols (debug=false).  By setting up the configuration as follows makes it easy to prepare for deployment.  Simply change the configuration mode and hit build.  As shown below it will simply prepare the application for build and asp_compiler will deploy to the selected directory. ",[15,583,584],{},"In addition to controlling the debug mode WSD is great for swapping out appsettings for different environments (i.e. stage\u002Ftest\u002Fproduction) respective for each build.",[15,586,587,588],{}," ",[589,590],"img",{"title":591,"style":592,"height":593,"alt":591,"width":594,"border":595,"src":596},"image","BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px",272,435,0,"\u002Farticles\u002Fimages\u002FAsp.netCompilationModels_86E6\u002Fimage_thumb_1.png",[15,598,599],{},"Control the deployed directory via Properties of the WSD project.",[589,601],{"title":591,"style":592,"height":602,"alt":591,"width":603,"border":595,"src":604},262,444,"\u002Farticles\u002Fimages\u002FAsp.netCompilationModels_86E6\u002Fimage_thumb_3.png",[15,606,607],{},"By debug mode will look like the following.  Notice that I am not building the WSD project in this mode",[589,609],{"title":591,"style":592,"height":610,"alt":591,"width":611,"border":595,"src":612},290,462,"\u002Farticles\u002Fimages\u002FAsp.netCompilationModels_86E6\u002Fimage_thumb_4.png",[41,614,49],{"target":491,"href":615},"http:\u002F\u002Fmsdn.microsoft.com\u002Fen-us\u002Flibrary\u002Faa479568.aspx",[270,617,618],{},"Additional Configuration of the MSBuild file",[620,621,89,623,89,636,89,660,89,677,89,694,89,711,89,728,89,745,89,762,89,779,89,796,89,813,89,830,89,847,89,865,89],"div",{"style":622},"FONT-SIZE: 8pt; BACKGROUND: white; COLOR: black; FONT-FAMILY: consolas",[58,624,626,629,633],{"style":625},"MARGIN: 0px",[68,627,422],{"style":628},"COLOR: blue",[68,630,632],{"style":631},"COLOR: #a31515","ItemGroup",[68,634,635],{"style":628},">",[58,637,638,641,644,647,651,653,654,653,657],{"style":625},[68,639,640],{"style":628},"    \u003C",[68,642,643],{"style":631},"ExcludeFromBuild",[68,645,646],{"style":628}," ",[68,648,650],{"style":649},"COLOR: red","Include",[68,652,431],{"style":628},"\"",[68,655,656],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.vshost.exe",[68,658,659],{"style":628}," \u002F>",[58,661,662,664,666,668,670,653,672,653,675],{"style":625},[68,663,640],{"style":628},[68,665,643],{"style":631},[68,667,646],{"style":628},[68,669,650],{"style":649},[68,671,431],{"style":628},[68,673,674],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.sln",[68,676,659],{"style":628},[58,678,679,681,683,685,687,653,689,653,692],{"style":625},[68,680,640],{"style":628},[68,682,643],{"style":631},[68,684,646],{"style":628},[68,686,650],{"style":649},[68,688,431],{"style":628},[68,690,691],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.csproj",[68,693,659],{"style":628},[58,695,696,698,700,702,704,653,706,653,709],{"style":625},[68,697,640],{"style":628},[68,699,643],{"style":631},[68,701,646],{"style":628},[68,703,650],{"style":649},[68,705,431],{"style":628},[68,707,708],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.user",[68,710,659],{"style":628},[58,712,713,715,717,719,721,653,723,653,726],{"style":625},[68,714,640],{"style":628},[68,716,643],{"style":631},[68,718,646],{"style":628},[68,720,650],{"style":649},[68,722,431],{"style":628},[68,724,725],{"style":628},"$(SourceWebPhysicalPath)\\**\\*Copy of*",[68,727,659],{"style":628},[58,729,730,732,734,736,738,653,740,653,743],{"style":625},[68,731,640],{"style":628},[68,733,643],{"style":631},[68,735,646],{"style":628},[68,737,650],{"style":649},[68,739,431],{"style":628},[68,741,742],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.psd",[68,744,659],{"style":628},[58,746,747,749,751,753,755,653,757,653,760],{"style":625},[68,748,640],{"style":628},[68,750,643],{"style":631},[68,752,646],{"style":628},[68,754,650],{"style":649},[68,756,431],{"style":628},[68,758,759],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.cmd",[68,761,659],{"style":628},[58,763,764,766,768,770,772,653,774,653,777],{"style":625},[68,765,640],{"style":628},[68,767,643],{"style":631},[68,769,646],{"style":628},[68,771,650],{"style":649},[68,773,431],{"style":628},[68,775,776],{"style":628},"$(SourceWebPhysicalPath)\\obj\\**\\*.*",[68,778,659],{"style":628},[58,780,781,783,785,787,789,653,791,653,794],{"style":625},[68,782,640],{"style":628},[68,784,643],{"style":631},[68,786,646],{"style":628},[68,788,650],{"style":649},[68,790,431],{"style":628},[68,792,793],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.Publish.xml",[68,795,659],{"style":628},[58,797,798,800,802,804,806,653,808,653,811],{"style":625},[68,799,640],{"style":628},[68,801,643],{"style":631},[68,803,646],{"style":628},[68,805,650],{"style":649},[68,807,431],{"style":628},[68,809,810],{"style":628},"$(SourceWebPhysicalPath)\\test\\**\\*.*",[68,812,659],{"style":628},[58,814,815,817,819,821,823,653,825,653,828],{"style":625},[68,816,640],{"style":628},[68,818,643],{"style":631},[68,820,646],{"style":628},[68,822,650],{"style":649},[68,824,431],{"style":628},[68,826,827],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.aspx.resx",[68,829,659],{"style":628},[58,831,832,834,836,838,840,653,842,653,845],{"style":625},[68,833,640],{"style":628},[68,835,643],{"style":631},[68,837,646],{"style":628},[68,839,650],{"style":649},[68,841,431],{"style":628},[68,843,844],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.asax.resx",[68,846,659],{"style":628},[58,848,849,852,854,856,858,653,860,653,863],{"style":625},[68,850,851],{"style":628},"      \u003C",[68,853,643],{"style":631},[68,855,646],{"style":628},[68,857,650],{"style":649},[68,859,431],{"style":628},[68,861,862],{"style":628},"$(SourceWebPhysicalPath)\\**\\*.suo",[68,864,659],{"style":628},[58,866,867,870,872],{"style":625},[68,868,869],{"style":628},"  \u003C\u002F",[68,871,632],{"style":631},[68,873,635],{"style":628},[620,875,89,876,89,895,89,919,89],{"style":622},[58,877,878,880,883,885,888,653,890,653,893],{"style":625},[68,879,640],{"style":628},[68,881,882],{"style":631},"Target",[68,884,646],{"style":628},[68,886,887],{"style":649},"Name",[68,889,431],{"style":628},[68,891,892],{"style":628},"AfterBuild",[68,894,635],{"style":628},[58,896,897,900,903,905,908,653,910,653,913,915,917],{"style":625},[68,898,899],{"style":628},"        \u003C",[68,901,902],{"style":631},"Delete",[68,904,646],{"style":628},[68,906,907],{"style":649},"Files",[68,909,431],{"style":628},[68,911,912],{"style":628},"$(OutputPath)\\PrecompiledApp.config",[68,914,479],{"style":628},[68,916,902],{"style":631},[68,918,635],{"style":628},[58,920,921,924,926],{"style":625},[68,922,923],{"style":628},"    \u003C\u002F",[68,925,882],{"style":631},[68,927,635],{"style":628},{"title":63,"searchDepth":92,"depth":92,"links":929},[],"title: Asp.net 2.0 Compilation Models\ndescription:  Compliation of asp.net, c#, vb.net applications can depend on different aspects.  Keep in mind the following factors.\ncreatedAt: 2015-04-20T08:07:20.7100000-04:00\nupdatedAt: 2015-04-20T08:07:20.7100000-04:00\nimg: \u002Farticles\u002Fimages\u002Fframework.png\nauthor:\nname: Admin\ntags:",{},"\u002Farticles\u002Fasp-net-2-0-compilation-models",{"description":930},"articles\u002Fasp-net-2-0-compilation-models","2PvzOAMkFYwvorxwYkeT7XEKqEyTkCUwCRtjMHvRQqk",{"id":937,"title":938,"author":7,"body":939,"createdAt":7,"description":1219,"extension":502,"img":7,"meta":1220,"navigation":504,"path":1221,"seo":1222,"stem":1223,"tags":7,"updatedAt":7,"__hash__":1224},"articles\u002Farticles\u002Fbootstrap-with-less-part-2.md","Bootstrap With Less Part 2",{"type":9,"value":940,"toc":1217},[941,943,955,959,961,969,972,975,978,982,989,992,995,998,1006,1009,1015,1018,1023,1029,1201,1204,1211,1214],[12,942],{},[15,944,945,946,948,949,21,951,24,953,27],{},"title: Bootstrap with LESS (Part 2)",[19,947],{},"\ndescription: CSS has become complex, lets figure it out\ncreatedAt: 2015-06-05T11:07:35.2100000-04:00\nupdatedAt: 2015-06-05T11:07:35.2100000-04:00\nimg: \u002Farticles\u002Fimages\u002Fwindows-live-writer-bootstrap-with-less-part-2_11b1b-grunt_thumb.png",[19,950],{},[19,952],{},[19,954],{},[29,956,957],{},[32,958,34],{},[12,960],{},[15,962,963,964,968],{},"Ok, so how did css become so complex and what the heck is ",[41,965,967],{"href":966},"http:\u002F\u002Fgruntjs.com\u002F","Grunt","? Grunt is a task runner.  There are a number of open source task runners.  Grunt is just one of the more popular ones.  In our scenario we will be using Grunt (a task runner) to convert less into css as well as to uglify and minify and copy files to different directories.",[15,970,971],{},"The following are steps that I recently used to setup our environment to edit the most recent release of Bootstrap (3.x) while taking advantage of all the existing Less files.  Grunt will automate a number of tasks for us.  In addition the details below will setup a Visual Studio 2013 environment to use Grunt to build and deploy our Bootstrap files.",[15,973,974],{},"1.) Create Empty MVC project",[15,976,977],{},"2.) Include bootstrap files into project (all folders and files when unzipping bootstrap source) i.e. dist, docs, fonts, grunt, js, less etc. Note: do not include node_modules  I had issues with long path with one of the node modules (besides these will be downloaded automatically after install)",[589,979],{"src":980,"border":595,"alt":981,"title":981},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-bootstrap-with-less-part-2_715f-solutionexplorer_thumb.jpg","solutionexplorer",[15,983,984,985,988],{},"3.) Ensure you have ",[41,986,987],{"href":402},"node.js"," installed on your workstation.   Node what is node…is a open source cross-platform environment for easily building fast, scalable network applications.  Node.js applications are written in JavaScript and can be run within the runtime on OS X, Windows, Linux etc.  However in our usage we will be using this platform to download install other JavaScript applications.",[15,990,991],{},"4.) Open a command prompt to your project location and run > npm install (this will read the grunt packages json file and download necessary modules).  As information, npm is short for Node Package Manager.  NPM is to Node as Nuget is to Visual Studio.  That is a good way of thinking about it.",[15,993,994],{},"5.) At the command prompt > grunt (this will execute all tasks and run the tests)",[15,996,997],{},"6.) Now the task is to get grunt to run upon project building (yes we are wanting to automatically run grunt after we build the empty mvc project within vs.net).  Download and install the Web Essentials extension from the gallery.",[15,999,1000,1001,1005],{},"7.) Download install the ",[41,1002,1004],{"href":1003},"https:\u002F\u002Fvisualstudiogallery.msdn.microsoft.com\u002F8e1b4368-4afb-467a-bc13-9650572db708","Task Runner Explorer"," extension as well.",[15,1007,1008],{},"8.) Open the MVC project and right click on Gruntfile.js  You will see a new option.",[589,1010],{"src":1011,"border":595,"alt":1012,"title":1012,"width":1013,"height":1014},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-bootstrap-with-less-part-2_715f-taskrunner_thumb.jpg","taskrunner",244,165,[15,1016,1017],{},"9.) Add dist to the after build task (you can do this by dragging to the after build folder).  This will connect grunt to run dist task after vs.net builds.",[589,1019],{"src":1020,"border":595,"alt":1021,"title":1021,"width":1013,"height":1022},"\u002Farticles\u002Fimages\u002Fwindows-live-writer-bootstrap-with-less-part-2_715f-taskrunner_2_thumb.jpg","taskrunner_2",81,[15,1024,1025,1026,1028],{},"10.) Now after I build my project, what I want is for grunt to build the css based on the less, the copy the output to a particular directory on my pc.",[19,1027],{},"\nAt this point, I opened gruntfile.js.  I am going to extend the current copy task to include a copyToServer option.",[58,1030,1034],{"className":1031,"code":1032,"language":1033,"meta":63,"style":63},"language-json shiki shiki-themes github-light github-dark","copy: {\n  fonts: {\n    expand: true,\n    src: 'fonts\u002F*',\n    dest: 'dist\u002F'\n  },\n  docs: {\n    expand: true,\n    cwd: 'dist\u002F',\n    src: [\n      '**\u002F*'\n    ],\n    dest: 'docs\u002Fdist\u002F'\n  },\n copyToServer: {\n      expand: true,\n      cwd: 'dist\u002F',\n      src: ['**\u002F*'],\n      dest: 'c:\u002Finetpub\u002Fwwwroot\u002Fserver\u002Fstylesheets\u002Fbootstrap\u002F'\n  }\n},  \n","json",[65,1035,1036,1041,1049,1062,1076,1081,1086,1091,1096,1101,1106,1114,1121,1131,1135,1143,1155,1168,1183,1189,1195],{"__ignoreMap":63},[68,1037,1038],{"class":70,"line":71},[68,1039,1040],{"class":74},"copy: {\n",[68,1042,1043,1046],{"class":70,"line":92},[68,1044,1045],{"class":85},"  fonts",[68,1047,1048],{"class":74},": {\n",[68,1050,1051,1054,1056,1059],{"class":70,"line":101},[68,1052,1053],{"class":85},"    expand",[68,1055,82],{"class":74},[68,1057,1058],{"class":104},"true",[68,1060,1061],{"class":74},",\n",[68,1063,1064,1067,1069,1072],{"class":70,"line":117},[68,1065,1066],{"class":85},"    src",[68,1068,82],{"class":74},[68,1070,1071],{"class":85},"'fonts",[68,1073,1075],{"class":1074},"sJ8bj","\u002F*',\n",[68,1077,1078],{"class":70,"line":129},[68,1079,1080],{"class":1074},"    dest: 'dist\u002F'\n",[68,1082,1083],{"class":70,"line":135},[68,1084,1085],{"class":1074},"  },\n",[68,1087,1088],{"class":70,"line":143},[68,1089,1090],{"class":1074},"  docs: {\n",[68,1092,1093],{"class":70,"line":172},[68,1094,1095],{"class":1074},"    expand: true,\n",[68,1097,1098],{"class":70,"line":177},[68,1099,1100],{"class":1074},"    cwd: 'dist\u002F',\n",[68,1102,1103],{"class":70,"line":187},[68,1104,1105],{"class":1074},"    src: [\n",[68,1107,1108,1111],{"class":70,"line":217},[68,1109,1110],{"class":1074},"      '**\u002F",[68,1112,1113],{"class":85},"*'\n",[68,1115,1116,1119],{"class":70,"line":238},[68,1117,1118],{"class":85},"    ]",[68,1120,1061],{"class":74},[68,1122,1123,1126,1128],{"class":70,"line":246},[68,1124,1125],{"class":85},"    dest",[68,1127,82],{"class":74},[68,1129,1130],{"class":85},"'docs\u002Fdist\u002F'\n",[68,1132,1133],{"class":70,"line":263},[68,1134,1085],{"class":74},[68,1136,1138,1141],{"class":70,"line":1137},15,[68,1139,1140],{"class":85}," copyToServer",[68,1142,1048],{"class":74},[68,1144,1146,1149,1151,1153],{"class":70,"line":1145},16,[68,1147,1148],{"class":85},"      expand",[68,1150,82],{"class":74},[68,1152,1058],{"class":104},[68,1154,1061],{"class":74},[68,1156,1158,1161,1163,1166],{"class":70,"line":1157},17,[68,1159,1160],{"class":85},"      cwd",[68,1162,82],{"class":74},[68,1164,1165],{"class":85},"'dist\u002F'",[68,1167,1061],{"class":74},[68,1169,1171,1174,1177,1180],{"class":70,"line":1170},18,[68,1172,1173],{"class":85},"      src",[68,1175,1176],{"class":74},": [",[68,1178,1179],{"class":85},"'**",[68,1181,1182],{"class":1074},"\u002F*'],\n",[68,1184,1186],{"class":70,"line":1185},19,[68,1187,1188],{"class":1074},"      dest: 'c:\u002Finetpub\u002Fwwwroot\u002Fserver\u002Fstylesheets\u002Fbootstrap\u002F'\n",[68,1190,1192],{"class":70,"line":1191},20,[68,1193,1194],{"class":1074},"  }\n",[68,1196,1198],{"class":70,"line":1197},21,[68,1199,1200],{"class":1074},"},\n",[15,1202,1203],{},"I also added a new task so that I could execute this after a build with",[15,1205,1206,1207,1210],{},"\u002F\u002F new copy to server or local vdir\n  grunt.registerTask('copyToServer', ",[68,1208,1209],{},"'copy:copyToServer'",");",[15,1212,1213],{},"Finally, I am going to add this task to the after build step, so every time Visual Studio builds, it will execute Grunt to build the css via Less then it will copy the files to a particular directory after I build my Visual Studio project.  You can do this by right clicking on the copyToServer task and select After Build binding.",[111,1215,1216],{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":63,"searchDepth":92,"depth":92,"links":1218},[],"title: Bootstrap with LESS (Part 2)\ndescription: CSS has become complex, lets figure it out\ncreatedAt: 2015-06-05T11:07:35.2100000-04:00\nupdatedAt: 2015-06-05T11:07:35.2100000-04:00\nimg: \u002Farticles\u002Fimages\u002Fwindows-live-writer-bootstrap-with-less-part-2_11b1b-grunt_thumb.png\nauthor:\nname: David\ntags:",{},"\u002Farticles\u002Fbootstrap-with-less-part-2",{"description":1219},"articles\u002Fbootstrap-with-less-part-2","mPxMED8Q645tR3tafSYbNmj55ZL7zdCq0B-mTtudJ98",1781574772220]