Angular forms with GitHub example – tutorial 2: form styling



Having a simple form might be handy but it should be coherent with the rest of the website and look consistent in all browsers and devices. I have already covered Angular material in my previous tutorial and here I’d like to introduce another popular CSS framework called Bootstrap. I assume that you are familiar with the framework already, otherwise head their website first and learn how it works first. We are going to install Bootstrap together, look into creating basic variables and how to frame our form. it is very important, even for demonstration purposes, to be able to prototype a form and make it look reasonably good before attempting to develop the form completely so this tutorial helps you to create a good looking form from scratch.

Best way to install Bootstrap is to use NPM. Open the terminal window on your VsCode and type below command command.

npm i --save  bootstrap

GitHub code commit

Now we need to include style reference in our Angular application. If you don’t have the project from previous tutorial, go to my Github page and download/fork Angular-forms project. Go to Angular.json file and add bootstrap css reference under styles property. Adding it here will load application level styles faster. You might need to stop the server (press Ctrl + c) and start again with ng serve to make sure Bootstrap reference is added.

GitHub code commit

In order to make your app visually appealing and consistent, you need to pick one of the frameworks. In this tutorials, Ill be using bootstrap’s grid system and Material components which means putting Angular material components such as textboxes, buttons, etc placed inside bootstrap containers.

Okay, so lets go back to our details-form component and create a nice container for it. We need a container and a row wrapper and a slight change of style to make the form appear in the center of the page.

GitHub code commit

Now if you notice we have some font-sizes and background colour that are introduced for this component only. To make sure things are consistent, we need to create variables and add refer to them in styles so all components would use the same reference, making sure style properties are consistent.

Lets head to our style file and add below code to load material theme variables in our main style file (style.scss)

@import '~@angular/material/theming';
@include mat-core();
$theme-primary: mat-palette($mat-primary, 500, 500, 500);
$theme-accent: mat-palette($mat-accent, 500, 500, 500);
$theme-tritary: mat-palette($mat-tritary, 500, 500, 500);
$theme: mat-light-theme($theme-primary, $theme-accent, $theme-tritary);
@include angular-material-theme($theme);

Then lets go to assets folder, create a new folder and name it scss and then add a new file as variables.scss inside it. This is where we are going to keep our variables so we can reach them easily inside components.

I’ve used a material color palette maker to generate necessary variations for below set of colors.

After exporting above color pallets, I add them to variables.scss file

$mat-primary: (
50 : #ffeaea,
100 : #ffcbcb,
200 : #ffa9a9,
300 : #ff8787,
400 : #ff6d6d,
500 : #ff5353,
600 : #ff4c4c,
700 : #ff4242,
800 : #ff3939,
900 : #ff2929,
A100 : #ffffff,
A200 : #ffffff,
A400 : #ffd6d6,
A700 : #ffbdbd,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$mat-accent: (
50 : #e7e8ea,
100 : #c4c6cb,
200 : #9da0a8,
300 : #757a85,
400 : #585e6b,
500 : #3a4151,
600 : #343b4a,
700 : #2c3240,
800 : #252a37,
900 : #181c27,
A100 : #6d91ff,
A200 : #3a6bff,
A400 : #0745ff,
A700 : #003bec,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #ffffff,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #ffffff,
A400 : #ffffff,
A700 : #ffffff,
)
);
$mat-tritary: (
50 : #fff6eb,
100 : #fee9ce,
200 : #fedbad,
300 : #fecc8c,
400 : #fdc173,
500 : #fdb65a,
600 : #fdaf52,
700 : #fca648,
800 : #fc9e3f,
900 : #fc8e2e,
A100 : #ffffff,
A200 : #ffffff,
A400 : #ffe8d6,
A700 : #ffdabd,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #000000,
600 : #000000,
700 : #000000,
800 : #000000,
900 : #000000,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);

Then I’m gonna add main variables to be accessed by components. so that in any components we need to first, include variables.scss file to have access to variables and then use them appropriately.

$color-primary: map-get($mat-primary, 500);
$color-accent: map-get($mat-accent, 500);
$color-tritary: map-get($mat-tritary, 500);

so lets head back to our details-form component and use our color variables.
GitHub code commit


Hope you enjoyed this tutorial and again you can find the source code on my GitHub page https://github.com/ramin-ahmadi/angular-forms/ and you can see the app on stackblitz https://stackblitz.com/github/ramin-ahmadi/angular-forms

Feel free to reach out to me if you have any questions.

Ramin Ahmadi

Written by

Ramin Ahmadi

Full stack front-end developer. I make it a goal to automate myself out of routine tasks. My motto is, ‘write human readable code, lean and clean’.

Ramin Ahmadi
I am a full-stack front end developer with over 5 years experience in web design and development. I have worked with a wide variety of environments and languages including Angular, TypeScript, NodeJS, Restful API, Microservices, Atomic design, JQuery, Material design, Progressive Web Apps, DevOps, and many Azure tools. I make it a goal to automate myself out of routine tasks in my daily work. My motto is, ‘write human readable code, lean and clean’.

Comments 0

Your email address will not be published. Required fields are marked *

Angular forms with GitHub example – tutorial 2: form styling

log in

Captcha!

reset password

Back to
log in
Font Resize
Choose A Format
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
List
The Classic Internet Listicles
Image
Photo or GIF
Gif
GIF format