Skip to content

Commit f4d699d

Browse files
mckaragozmckaragoz
committed
First Glance of Website
1 parent 47afea8 commit f4d699d

File tree

7 files changed

+172
-103
lines changed

7 files changed

+172
-103
lines changed

‎BCSS/Component/BlazorCssProvider.razor

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,11 @@
3535
@($"@media screen and (min-width:{Xl}px) {{ {GetMediaString("xl")} }}")
3636
</style>
3737

38-
Suffixes: @string.Join(", ", _bcssInfos.Select(x => x.Suffixes).LastOrDefault() ?? new List<string>())
39-
<br />
40-
Keys: @string.Join(", ", _bcssInfos.Select(x => x.Key))
41-
<br />
42-
Values: @string.Join(", ", _bcssInfos.Select(x => x.Value))
38+
@* Suffixes: @string.Join(", ", _bcssInfos.Select(x => x.Suffixes).LastOrDefault() ?? new List<string>()) *@
39+
@* <br /> *@
40+
@* Keys: @string.Join(", ", _bcssInfos.Select(x => x.Key)) *@
41+
@* <br /> *@
42+
@* Values: @string.Join(", ", _bcssInfos.Select(x => x.Value)) *@
4343
@* <br /> *@
4444
@* @_isValidResult *@
4545
@* <br /> *@

‎BCSSViewer.Docs/Components/BcssCard.razor

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
@namespace BCSSViewer
2+
@inject BcssService Bc
3+
4+
<MudCard Elevation="1">
5+
<MudCardHeader Class="mud-theme-primary">
6+
<MudIcon Icon="@Icon" />
7+
<MudText Class="ml-4" Typo="Typo.h6">@Header</MudText>
8+
</MudCardHeader>
9+
<MudCardContent Class="@Bc["hmin-120 hmax-120"]">
10+
<MudText>@Description</MudText>
11+
</MudCardContent>
12+
</MudCard>
13+
14+
@code {
15+
[Parameter]
16+
public string? Icon { get; set; }
17+
18+
[Parameter]
19+
public string? Header { get; set; }
20+
21+
[Parameter]
22+
public string? Description { get; set; }
23+
}

‎BCSSViewer.Docs/Pages/Index.razor

Lines changed: 74 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,27 +2,88 @@
22
@inject BcssService Bc
33
@inject NavigationManager NavigationManager
44

5-
<MudText>BCSS</MudText>
5+
<MudContainer Class="@Bc["h-40vh d-flex flex-column justify-center align-center"]">
6+
<MudText Style="font-weight:700" Typo="Typo.h3" Color="Color.Primary"><b>BCSS</b></MudText>
7+
<MudText Typo="Typo.h6" Color="Color.Primary">by CodeBeam</MudText>
8+
<MudText Class="mt-4" Align="Align.Center" Color="Color.Primary">Revolutionary runtime CSS generator for Blazor.</MudText>
9+
<MudButton Class="mt-8" Variant="Variant.Outlined" Color="Color.Primary" Href="/gettingstarted">GET STARTED</MudButton>
10+
</MudContainer>
611

7-
<MudPaper Class="@Bc[_cssString]" Width="200px" Height="200px" tabindex="1">
12+
<MudContainer Class="@Bc["hmin-60vh"]">
13+
<MudGrid>
14+
<MudItem xs="12" sm="6" md="4">
15+
<BcssCard Icon="@Icons.Material.Filled.Public" Header="OpenSource" Description="BCSS is open source and free forever with MIT license." />
16+
</MudItem>
17+
<MudItem xs="12" sm="6" md="4">
18+
<BcssCard Icon="@Icons.Material.Filled.Assistant" Header="Dynamic" Description="All content can be created and changed on runtime." />
19+
</MudItem>
20+
<MudItem xs="12" sm="6" md="4">
21+
<BcssCard Icon="@Icons.Material.Filled.Pages" Header="Optimized" Description="Not allowed any repeated values and unnecessary render cycles for the best performance." />
22+
</MudItem>
23+
<MudItem xs="12" sm="6" md="4">
24+
<BcssCard Icon="@Icons.Material.Filled.AutoStories" Header="Smart Usage" Description="Easy to learn and use. Does not require advanced CSS knowledge." />
25+
</MudItem>
26+
<MudItem xs="12" sm="6" md="4">
27+
<BcssCard Icon="@Icons.Material.Filled.MobileFriendly" Header="Mobile Friendly" Description="Suits for responsive design." />
28+
</MudItem>
29+
<MudItem xs="12" sm="6" md="4">
30+
<BcssCard Icon="@Icons.Material.Filled.Code" Header="C#" Description="Not needed to work any css or scss content files. Possible to work with C# variables." />
31+
</MudItem>
32+
</MudGrid>
33+
34+
</MudContainer>
835

9-
</MudPaper>
36+
<MudContainer Class="@Bc["hmin-80vh mt-32"]">
37+
<MudText Typo="Typo.h4" Color="Color.Primary">PlayGround</MudText>
38+
<MudText Typo="Typo.body1">Try the BCSS abilities and re-style the box.</MudText>
1039

1140

12-
<MudPaper Class="w-500" Width="200px" Height="200px" tabindex="1">
41+
<MudGrid Class="@Bc["mud-width-full mud-height-full mt-32"]">
42+
<MudItem xs="12" sm="8" Class="d-flex align-center justify-center">
43+
<MudPaper Class="@Bc[_cssString]" Width="200px" Height="200px" tabindex="1" />
44+
</MudItem>
1345

14-
</MudPaper>
46+
<MudItem xs="12" sm="4">
47+
<MudTextFieldExtended @bind-Value="_cssString" Lines="4" Variant="Variant.Outlined" Label="Bcss Class" Immediate="true">
48+
<AdornmentEnd>
49+
<MudTooltip Text="Generate" Delay="300">
50+
<MudIconButton Icon="@Icons.Material.Filled.Loop" OnClick="Generate" />
51+
</MudTooltip>
52+
</AdornmentEnd>
53+
</MudTextFieldExtended>
54+
</MudItem>
55+
</MudGrid>
56+
</MudContainer>
1557

16-
17-
<MudTextField @bind-Value="_cssString" Immediate="true" />
18-
19-
<MudButton OnClick="StateHasChanged">Refresh</MudButton>
20-
<MudButton OnClick="@(() => NavigationManager.NavigateTo("/testpage"))">Go To Second Page</MudButton>
58+
<MudContainer Class="@Bc["hmin-60vh d-flex flex-column align-center justify-start"]">
59+
<MudText Typo="Typo.h3" Align="Align.Center">Like It?</MudText>
60+
<MudText>Learn the Fundamentals</MudText>
61+
<div class="mud-width-full d-flex flex-wrap justify-center gap-4 mt-8">
62+
<MudButton Variant="Variant.Outlined">Syntax</MudButton>
63+
<MudButton Variant="Variant.Outlined">Usage</MudButton>
64+
</div>
65+
</MudContainer>
2166

2267
@code {
23-
string _cssString = "bg-blue w-400";
24-
protected override void OnInitialized()
68+
string _cssString = "";
69+
string[] _possibleWidth = new string[] { "w-100", "w-125", "w-150", "w-175", "w-200", "w-225", "w-250", "w-275", "w-300" };
70+
string[] _possibleHeight = new string[] { "h-100", "h-125", "h-150", "h-175", "h-200", "h-225", "h-250", "h-275", "h-300" };
71+
string[] _possibleColors = new string[] { "bg-purple", "bg-blue", "bg-red", "bg-green", "bg-[#123456]", "bg-[#efefef]" };
72+
string[] _possibleRounded = new string[] { "r-0", "r-10", "r-20", "r-30", "r-40", "r-50" };
73+
string[] _possibleBorders = new string[] { "", "b--8px-solid-yellow", "b--8px-dotted-yellow", "b--4px-dashed-yellow" };
74+
75+
private void Generate()
2576
{
26-
Bc.Add("w-500");
77+
Random rnd = new();
78+
int val = rnd.Next(0, 9);
79+
_cssString = _possibleWidth[val];
80+
val = rnd.Next(0, 9);
81+
_cssString += $" {_possibleHeight[val]}";
82+
val = rnd.Next(0, 5);
83+
_cssString += $" {_possibleColors[val]}";
84+
val = rnd.Next(0, 6);
85+
_cssString += $" {_possibleRounded[val]}";
86+
val = rnd.Next(0, 4);
87+
_cssString += $" {_possibleBorders[val]}";
2788
}
2889
}

‎BCSSViewer.Docs/Shared/MainLayout.razor

Lines changed: 40 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,43 @@
1-
@inherits LayoutComponentBase
1+
@using Microsoft.AspNetCore.Components.Routing;
2+
@inherits LayoutComponentBase
3+
@inject BcssService Bc
24

3-
<PageTitle>BCSSViewer</PageTitle>
5+
<MudLayout>
6+
<MudAppBar Style="background: var(--mud-palette-background) !important;" Dense="true" Elevation="0">
7+
<MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Primary" Edge="Edge.Start" OnClick="@(() => _open = !_open)" />
8+
<MudText Style="color: var(--mud-palette-text-primary)">BCSS</MudText>
9+
<MudSpacer />
10+
<MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Primary" Href="https://github.com/CodeBeamOrg/BCSS" Target="_blank" />
11+
</MudAppBar>
412

5-
<div class="page">
6-
<main>
13+
<MudDrawer @bind-Open="@_open" Elevation="1" Variant="@DrawerVariant.Responsive" ClipMode="DrawerClipMode.Always">
14+
<MudNavMenu Bordered="true" Rounded="true">
15+
<MudNavGroup Title="Getting Started">
16+
<MudNavLink Match="NavLinkMatch.All" Href="/what">What is BCSS</MudNavLink>
17+
<MudNavLink Match="NavLinkMatch.All" Href="/what">Installation</MudNavLink>
18+
</MudNavGroup>
19+
<MudNavGroup Title="Syntax">
20+
<MudNavLink Match="NavLinkMatch.All" Href="/syntax/basics">Basics</MudNavLink>
21+
<MudNavLink Match="NavLinkMatch.All" Href="/syntax/dash">Dash and Double Dash</MudNavLink>
22+
</MudNavGroup>
23+
<MudNavGroup Title="Usage">
24+
<MudNavLink Match="NavLinkMatch.All" Href="/usage/dimension">Dimensions</MudNavLink>
25+
<MudNavLink Match="NavLinkMatch.All" Href="/usage/spacing">Spacing</MudNavLink>
26+
<MudNavLink Match="NavLinkMatch.All" Href="/usage/position">Position & Flex</MudNavLink>
27+
<MudNavLink Match="NavLinkMatch.All" Href="/usage/border">Borders</MudNavLink>
28+
</MudNavGroup>
29+
</MudNavMenu>
30+
</MudDrawer>
731

8-
<article class="content px-4">
9-
@Body
10-
</article>
11-
</main>
12-
</div>
32+
<MudMainContent>
33+
@Body
34+
<MudContainer Class="@Bc["mt-24"]">
35+
<MudDivider Class="mb-4" />
36+
<MudText Class="mb-4"><MudLink Href="https://codebeam.org" Target="_blank" Underline="Underline.Hover"><b>CodeBeam</b></MudLink> OpenSource @DateTime.Now.Year.</MudText>
37+
</MudContainer>
38+
</MudMainContent>
39+
</MudLayout>
40+
41+
@code {
42+
private bool _open;
43+
}

‎BCSSViewer.Docs/Shared/MainLayout.razor.css

Lines changed: 0 additions & 70 deletions
This file was deleted.

‎BCSSViewer.Wasm/App.razor

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,19 @@
1111
</NotFound>
1212
</Router>
1313

14-
<MudThemeProvider/>
15-
<MudDialogProvider/>
16-
<MudSnackbarProvider/>
14+
<MudThemeProvider Theme="_bcssTheme" />
15+
<MudDialogProvider />
16+
<MudSnackbarProvider />
1717
<BlazorCssProvider />
18+
19+
@code {
20+
MudTheme _bcssTheme = new MudTheme()
21+
{
22+
Palette = new PaletteLight()
23+
{
24+
Primary = "#313B72",
25+
Secondary = "#F45B69",
26+
Tertiary = "#EEF4D4",
27+
},
28+
};
29+
}

‎BCSSViewer/App.razor

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,19 @@
1111
</NotFound>
1212
</Router>
1313

14-
<MudThemeProvider/>
15-
<MudDialogProvider/>
16-
<MudSnackbarProvider/>
14+
<MudThemeProvider Theme="_bcssTheme" />
15+
<MudDialogProvider />
16+
<MudSnackbarProvider />
1717
<BlazorCssProvider />
18+
19+
@code {
20+
MudTheme _bcssTheme = new MudTheme()
21+
{
22+
Palette = new PaletteLight()
23+
{
24+
Primary = "#313B72",
25+
Secondary = "#F45B69",
26+
Tertiary = "#EEF4D4",
27+
},
28+
};
29+
}

0 commit comments

Comments
 (0)