<!--210610,200429-->
<h1>css grid with angular (break into 2?)</h1>
may 5, 2022<br>
#angular #css #webdev <br>
<br>
<h2>start from the beginning</h2><br>
<a href="https://angular.io/guide/setup-local">Angular's documentation</a> shares the process for beginning a new project, but I'll explain it, too. <br>
<br>
<ul>
<li>Installation process will differ depending on your operating system. These commands are for Linux Mint, downstream from Ubuntu and Debian. </li>
<li><a href="https://nodejs.org/en/">Install Node.js </a> </li>
<li><code>sudo curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash</code></li>
<li><code>sudo apt-get install -y nodejs</code></li>
<li><code>sudo apt install -y build-essential</code></li>
<li><code>sudo npm install -g @angular/cli</code> (you can decide whether to share analytics) </li>
</ul>
<br>
<h2>grab the template </h2>
Now you're ready to start an Angular project. Begin in the folder you'd like your project folder to be. Instructions and files are also available on <a href="https://github.com/angular/angular-cli">Angular's github</a>. <br>
<br>
<ul>
<li><code>ng new Example</code> (accept Angular routing and CSS) Change out the name 'Example' with your project name. </li>
<li>Now you'll have a folder named 'Example,' containing your skeleton. If you didn't already have git initialized in the folder, it'll automatically do so for you. </li>
</ul>
<h2>test run </h2>
Now you can run your example project in the browser. <br>
<br>
<ul>
<li><code>cd Example/ </code></li>
<li><code>npm start </code><li>
<li>Now you can browse to your project. By default, it used port 4200, so it's viewable @ <a href="http://localhost:4200/">http://localhost:4200/</a> </li>
<li>When you're done, stop the script by entering ctrl + c into the terminal. </li>
</ul>
<br>
If you see the page below, you have everything you need to get started on your own project. <br>
<center><a target="_blank" href="/static/img/ent/angular_examplepage.png">
    <img src="/static/img/ent/angular_examplepage.png" alt="(image: the example webpage that comes with the skeleton files.)" width="500" height="505">
</a></center><br>
<br>
<br>
<h2>adding custom components </h2>
With a basic HTML/CSS website (like blessfrey.me), the CSS Grid allows you to align its nested divs into rows and columns. Angular allows you to break each area into a <a href="https://angular.io/guide/component-overview">component</a> to be styled by the grid. <br>
<br>
I'll use the petsite browser game I'm making as an example: <br>
<center><a target="_blank" href="/static/img/ent/lemonland_cssgrid.png">
    <img src="/static/img/ent/lemonland_cssgrid.png" alt="(image: planned layout of my example page: two buffers at the sides named Left and Right, Header at the top, Footer at the bottom, Chatter in between Header and Footer and left of Right, Zone and PDA in the second row from the top, Alert in the third, and Action and Partner in the fourth.)" width="500" height="478">
</a></center><br>
<br>
This webpage has some major elements that will be reused on many pages, which I would like to keep in a general grid. <br>
<ul>
<li>header - wgill hold the logo, home page link, account links </li>
<li>left - a centering buffer, will have a background </li>
<li>right - a centering buffer, will have a background </li>
<li>footer - hold copyright, footer links </li>
</ul>
Then I'd like to nest a grid inside to contain elements more specific to this kind of page. <br>
<ul>
<li>zone - a graphic representing the player's location </li>
<li>pda - a control panel with news, email, friend's list, quick links, inventory, etc </li>
<li>alert - a window for dialog, system messages, etc </li>
<li>action - a window containing player choices and dialog responses </li>
<li>partner - basic info about the active pet </li>
<li>chatter - a live-time chat box </li>
</ul>
<br>
Each of these will need to be added as components via the terminal. <br>
<br>
<ul>
<li><code>cd app/ </code></li>
<li><code>ng g c header </code></li>
<li><code>ng g c zone </code></li>
<li>...and so on. </li>
</ul>
These commands fill your app folder with components for your grid. <br>
<br>
<center><a target="_blank" href="/static/img/ent/angular_componentdir.pngid.png">
    <img src="/static/img/ent/angular_componentdir.png" alt="(image: screenshot of each folder generated for each component inside the app folder.)" width="500" height="273">
</a></center><br>
<br>
<h2>writing the css grid </h2>
There's a few HTML files and a few CSS files in your project folder. <br>
<ul>
<li><code>src/index.html</code> is the basic webpage </li>
<li><code>src/app/app.component.html</code> is the app displayed in the webpage </li>
<li>Then there's an HTML file for each component, like <code>src/app/partner/partner.component.html</code> </li>
<br>
<h3>index.html + styles.css </h3>
I'm keeping these two very general, since most of the content on the page is part of the game. <br> 
<code><!doctype html></code><br>
<code><html lang="en"></code><br>
<code><head></code><br>
<code>    <meta charset="utf-8"></code><br>
<code>    <title>lemonland</title></code><br>
<code>    <base href="/"></code><br>
<code>    <meta name="viewport" content="width=device-width, initial-scale=1"></code><br>
<code>    <link rel="icon" type="image/x-icon" href="favicon.ico"></code><br>
<code></head></code><br>
<code><body></code><br>
<code><router-outlet></router-outlet></code><br>
<code>    <div class="app-container"></code><br>
<code>        <app-root></app-root></code><br>
<code>    </div></code><br>
<code></body></code><br>
<code></html></code><br>
<br>
Then the CSS... <br>
<code>* {</code><br>
<code>    padding: 0;</code><br>
<code>    margin: 0;</code><br>
<code>    font-family: verdana;</code><br>
<code>    font-size: 18px;</code><br>
<code>}</code><br>
<code>body {</code><br>
<code>    background-color: black;</code><br>
<code>    color: MidnightBlue;</code><br>
<code>}</code><br>
<br>
<h3>app.component.html + app.component.css </h3>
These two contain all the subcomponents generated earlier. <br>
<code><div class="container"></code><br>
<code>    <app-header></app-header></code><br>
<code>    <app-left></app-left></code><br>
<code>    <router-outlet></router-outlet></code><br>
<code>    <div class="content-grid"></code><br>
<code>        <app-zone></app-zone></code><br>
<code>        <app-pda></app-pda></code><br>
<code>        <app-chatter></app-chatter></code><br>
<code>        <app-alert></app-alert></code><br>
<code>        <app-action></app-action></code><br>
<code>        <app-partner></app-partner></code><br>
<code>    </div></code><br>
<code>    <app-right></app-right></code><br>
<code>    <app-footer></app-footer></code><br>
<code></div></code><br>
<br>
Then the CSS grid takes place in the CSS file. <br>
<br>
<br>
Last updated April 12, 2022
<br>
