title: Blazor Dynamic Root Variables
body: <p>I'm looking to build a website that works in the same manner that I have put together in this video, that isn't based on JS ( like it is in this video ), that can utilize C# in order to interop with JS and get windowWidth and windowHeight, and then dynamically change all of the CSS variables so that all of the content, images, and font size/shading/border/shadows, etc... will all scale as the page is zoomed in or out.</p>
  
  <p>The end result is, to make a size that works for a single resolution and then scales all the way down to the 320w to 3200w resolutions out there. That means, one website, one template, no messing around with a thousand different iterations of the way the site should look.</p>
  
  <p>I spent about a week trying to develop some C# code that could in fact change and set the variables, however, I'm not a seasoned C# veteran, I prefer to write everything in PS.</p>
  
  <p>I understand the limitations of Blazor, and how it 'diffs' the state changes upon rendering, but if BlazorStyled can modify the CSS, then I see no reason why it would be impossible for the window width/height to directly influence the variables that the site runs off of.</p>
  
  <p>I did study drafting and design, I left the field before I was able to study programming and C#/.Net in order to further what I could do with HTML and CSS more than a decade ago... same goes for the MCSE/MCSA curriculum that I also gave up on...</p>
  
  <p>...but I've spent the last year 'catching up' on all of it.</p>
  
  <p><a href="https://youtu.be/Z99zsCwYhWk" rel="nofollow noreferrer">https://youtu.be/Z99zsCwYhWk</a> &lt;- this is what I am attempting to perform in Blazor. This is utilizing javascript and document.queryselector, document.setproperty... I am not certain that it is possible to do these things either with or without JSInterop, and yes... <em>i know how to change the css types with media queries</em>... I'm attempting to build a forloop that captures every possible resolution out there and scales for every pixel within that loop.</p>
  
  <p>But also, considers the fact that the layouts can have multiple formats that correspond to these dynamic variables. So as I've showcased in the video, below 720w the navigation bar will shift to the top, which can be done with native CSS media queries, but what can't be done is changing the DOM elements without screwing up the way Blazor works. I've tried. Even spent a week trying to write the C# code that would use JSInterop and the custom classes and dimensions and change the properties accordingly...</p>
  
  <p>Upon compile... it said "I have failed." It said it a <em>few</em> times... So I was like damn. Spent a whole week trying to do something super cool... and this program looked at me and said "Bro. I don't like this input..."</p>
  
  <p>But what can I do?</p>
  
  <p>Given the nature of ASP.Net/Blazor, I won't post the code because there's a lot of content. I can give you a run down of what I have tried so far...</p>
  
  <p>I found Chris Sainty's old project on github called "browserResize". But I think this breaks the rules of Blazor component [quantization and hyperspeed time space continuum effect displacement of the thermodynamic laws of physics ... everything in these brackets is comic relief]  </p>
  
  <p>I already had a fully blown javascript file that had all of the operations I needed inside, but, how do you get Blazor to work when the official Microsoft Blazor FAQ says </p>
  
  <p>"Don't use JS for all that... cause that's lame." -Microsoft</p>
  
  <p>After I read that quote that Microsoft put into the official FAQ... I thought... well, it's time to give it a grade A try anyway ... so I then implemented some classes that create objects in a similar manner to </p>
  
  <pre><code>```
  # Heroes in a half 'Shell #
  [PSCustomObject]@{ 
  width = "window.innerWidth"
  height = "window.innerHeight"
  }
  ```
  </code></pre>
  
  <p>...only it is a lot more than that.</p>
  
  <p>I made some JSInterop calls based on Nick Chapas' videos about it, and I'm pretty sure that I wrote all that correctly...? Not certain.</p>
  
  <p>Then I made a service that could, upon resizing the window, set all of the corresponding CSS elements, and theoretically change the CSS styling of everything on the page given the conditions I showcase in the video link above.</p>
  
  <p>I'm sure I may have overexplained what I'm attempting to do...? But, I'm burning a lot of time theorizing, not enough 'actually getting work done'. And, there comes a point in time where you may in fact be learning a great deal on new ways to get nowhere... but the case could also be made that 'there are better ways to make use of your time...'</p>
  
  <p>Plz help. Thx bros.</p>
  
  <p>(Edit: At the request of Iraklis, here are the two bits of code I made)</p>
  
  <p>.\ - represents the base repo folder.</p>
  
  <p>.\Data\Controller.cs</p>
  
  <pre><code>using System;
  using System.Collections;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  using Microsoft.JSInterop;
  
  namespace ShellBlaze.Data
  {
      public class Controller
      {
          public static readonly IJSRuntime JSR;
          public class Window
          {
              public async Task&lt;int&gt; Height()
              {
                  return await JSR.InvokeAsync&lt;int&gt;( "getHeight" );
              }
              public async Task&lt;int&gt; Width()
              {
                  return await JSR.InvokeAsync&lt;int&gt;( "getWidth" );
              }
              public async Task&lt;object&gt; QuerySelect( string Tag )
              {
                  return await JSR.InvokeAsync&lt;object&gt;( "querySelect" , Tag );
              }
  
              public async Task SetProperty( object ID , string Property , string Value )
              {
                  await JSR.InvokeVoidAsync( "setProperty" , ID , Property , Value );
              }
          }
  
          public class Stage
          {
              Controller.Window Windex = new Controller.Window();
                   Model.Window Win    = new      Model.Window();
                   Model.Layout Lay    = new      Model.Layout();
              public async Task&lt;Model.Layout&gt; Action()
              {
                  Win.Height           = await Windex.Height();
                  Win.Width            = await Windex.Width();
                  Win.Side             = Win.Width * 0.15f;
                  Win.Main             = Win.Width * 0.85f;
                  Win.Pixel            = Win.Width / 1920;
  
                     var   Root        = Windex.QuerySelect( ":root" );
                     int[] Ct          = { 0, 1, 2, 3 };
  
                  string[] Element     = { "root" , "side" , "main" , "pixel" };
                  double[] Unit        = { Win.Width , Win.Side , Win.Main , Win.Pixel };
                  string[] Name        = { "#top", "#side", "body" , "#main" };
                  string[] Property    = { "display", "display", "flex-direction", "--content" };
  
                  string[] Value       = new string[3];
                  string[] Value1      = { "flex", "none", "column", Win.Width + "px" };
                  string[] Value2      = { "none", "flex", "row", Win.Main + "px" };
  
  
                  if (Win.Width &lt; 720)
                  {
                      Value = Value1;
                  }
  
                  else
                  {
                      Value = Value2;
                  }
  
                  foreach (int i in Ct)
                  {
                      await Windex.SetProperty( Root, "--" + Element[i], Unit[i] + "px" );
                      await Windex.SetProperty( Windex.QuerySelect( Name[i] ), Property[i], Value[i] );
                  }
  
                  if (Win.Width &gt; 720)
                  {
                      Lay.Type    = "top";
                      Lay.Logo    = "toplogo";
                      Lay.ID      = "ti";
                      Lay.Class0  = "t0";
                      Lay.Class1  = "t1";
                      Lay.Class2  = "t2";
                      Lay.Class3  = "t3";
                      Lay.Class4  = "t4";
                      Lay.Class5  = "t5"; 
                      Lay.Class6  = "t6";
                      Lay.String0 = "Home";
                      Lay.String1 = "App Development";
                      Lay.String2 = "Network Security";
                      Lay.String3 = "Enterprise";
                      Lay.String4 = "OS Management";
                      Lay.String5 = "Hardware";
                      Lay.String6 = "Data Management";
  
                      return Lay;
                  }
  
                  else
                  {
                      Lay.Type   = "side";
                      Lay.Logo   = "sidelogo";
                      Lay.ID     = "si";
                      Lay.Class0 = "t0";
                      Lay.Class1 = "t1";
                      Lay.Class2 = "t2";
                      Lay.Class3 = "t3";
                      Lay.Class4 = "t4";
                      Lay.Class5 = "t5";
                      Lay.Class6 = "t6";
                      Lay.String0 = "Home";
                      Lay.String1 = "App&lt;br/&gt;Development";
                      Lay.String2 = "Network&lt;br/&gt;Security";
                      Lay.String3 = "Enterprise";
                      Lay.String4 = "OS&lt;br/&gt;Management";
                      Lay.String5 = "Hardware";
                      Lay.String6 = "Data&lt;br/&gt;Management";
  
                      return Lay;
                  }
              }
          }
          public class State
          {
              public static event Func&lt;Task&gt; Trip;
  
              [JSInvokable]
              public static async Task Set()
              {
                  Controller.Stage Stage = new Controller.Stage();
  
                  await Stage.Action();
  
                  await JSR.InvokeAsync&lt;object&gt;( "setEvent" );
  
                  await Trip?.Invoke();
              }
          }
      }
  }
  </code></pre>
  
  <p>.\Data\Model.cs</p>
  
  <pre><code>using System;
  using System.Collections.Generic;
  using System.Linq;
  using System.Threading.Tasks;
  
  namespace ShellBlaze.Data
  {
      public class Model
      {
          public class Layout
          {
              public string Type    { get; set; }
              public string Logo    { get; set; }
              public string ID      { get; set; }
              public string Class0  { get; set; }
              public string Class1  { get; set; }
              public string Class2  { get; set; }
              public string Class3  { get; set; }
              public string Class4  { get; set; }
              public string Class5  { get; set; }
              public string Class6  { get; set; }
              public string String0 { get; set; }
              public string String1 { get; set; }
              public string String2 { get; set; }
              public string String3 { get; set; }
              public string String4 { get; set; }
              public string String5 { get; set; }
              public string String6 { get; set; }
  
              public Layout()
              {
                  Type      = null;
                  Logo      = null;
                  ID        = null;
                  Class0    = null;
                  Class1    = null;
                  Class2    = null;
                  Class3    = null;
                  Class4    = null;
                  Class5    = null;
                  Class6    = null;
                  String0   = null;
                  String1   = null;
                  String2   = null;
                  String3   = null;
                  String4   = null;
                  String5   = null;
                  String6   = null;
              }
  
              public Layout( 
  
                  string _Type, 
                  string _Logo, 
                  string _ID,
                  string _Class0,
                  string _Class1,
                  string _Class2,
                  string _Class3,
                  string _Class4,
                  string _Class5,
                  string _Class6,
                  string _String0,
                  string _String1,
                  string _String2,
                  string _String3,
                  string _String4,
                  string _String5,
                  string _String6
              )
              {
                  Type      = _Type;
                  Logo      = _Logo;
                  ID        = _ID;
                  Class0    = _Class0;
                  Class1    = _Class1;
                  Class2    = _Class2;
                  Class3    = _Class3;
                  Class4    = _Class4;
                  Class5    = _Class5;
                  Class6    = _Class6;
                  String0   = _String0;
                  String1   = _String1;
                  String2   = _String2;
                  String3   = _String3;
                  String4   = _String4;
                  String5   = _String5;
                  String6   = _String6;
              }
          }
  
          public class Sheet
          {
              public object ID         { get; set; }
              public string Tag        { get; set; } 
              public string Property   { get; set; }
              public string Value      { get; set; }
  
              public Sheet()
              {
                  ID       = null;
                  Tag      = null;
                  Property = null;
                  Value    = null;
              }
  
              public Sheet( object _ID , string _Tag , string _Property , string _Value )
              {
                  ID       = _ID;
                  Tag      = _Tag;
                  Property = _Property;
                  Value    = _Value;
              }
          }
  
          public class Window
          {
              public int Height               { get; set; }
              public int Width                { get; set; }
              public double Side              { get; set; }
              public double Main              { get; set; }
              public double Pixel             { get; set; }
  
              public Window()
              {
                  Height      = 0;
                  Width       = 0;
                  Side        = 0.00f;
                  Main        = 0.00f;
                  Pixel       = 0.00f;
              }
  
              public Window( int _Height , int _Width , double _Side , double _Main , double _Pixel )
              {
                  Height      = _Height;
                  Width       = _Width;
                  Side        = _Side;
                  Main        = _Main;
                  Pixel       = _Pixel;
              }
          }
      }
  }
  </code></pre>
  
  <p>.\Scripts\script.js</p>
  
  <pre><code>
  function querySelect(Tag)
  {
      return document.querySelector( '"' + Tag + '"' );
  }
  
  function setProperty(ID, Property, Value )
  {
      ID.style.setProperty( "'" + Property + "'" , "'" + Value + Unit + "'" );
  }
  
  function getHeight()
  {
      return window.innerHeight;
  }
  
  function getWidth()
  {
      return window.innerWidth;
  }
  
  function setEvent()
  {
      DotNet.invokeMethodAsync( "Resize" , "Set" ).then(data =&gt; data);
      window.addEventListener(  "resize" , setEvent() );
  }
  </code></pre>