Coding With David

I found a really good YouTube video  from Google Chrome Developer channel that I am piggybacking off of for this post.  I found the content very interesting and I wanted to see what it would take to first port it s Blazzor application, then how to implement the layouts in a Blazor component library where I can use them in any project.   Please note, even though I am a fan of Bootstrap and other CSS frameworks, I have been on a push lately to write my own CSS.  These layouts are pure HTML and CSS. I won't cover the details of the 10 different layouts and the 1 kay line that makes them work, I do highly recommend you watch the video, it is very educational on CSS layouts. To demonstrate the 10 layouts, I have created a razor page to display the layout.  You can review the source code provided for the details 10 Layouts: 1. Center - All child content is centered within the parent container                     ...

In Blazor, the basic routing is defined in the App.razor file.  You can see the part that handles a known page route and assigns it a layout:     <Router AppAssembly="@typeof(Program).Assembly">         <Found Context="routeData">             <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />         </Found>         <NotFound>             <LayoutView Layout="@typeof(MainLayout)">                 <p>Sorry, there's nothing at this address.</p>             </LayoutView>         </NotFound>     </Router> There is a section, NotFound, that is invoked with the page route is not found.  It will apply a layout as well.  You can see that when a route is n...