DEV Community

John Peters
John Peters

Posted on

An Angular Responsive Component

Using the HTML 5 Grid, we are able to create responsive web sites easily by including it in our new ResponsiveComponent.

Responsive Component CSS

Shown below is the start of our ResponsiveComponent CSS markup. It starts with a grid and has styles for a Header, Aside, Main and Footer component.

The ResponsiveComponent is only for applying CSS styling for everything contained within it.

Alt Text

Next, we assign styles using only tagnames to the grid areas. Angular has allowed us to create the header, footer and main components.

Alt Text

The ResponsiveComponent, MainComponent, and FooterComponent only contain this markup at the HTML layer. This means they are only applying styles for each section.

Alt Text

All of our components (responsive, main, footer and header) look like this at TS layer. Notice the shortened selector name.

Alt Text

Create Responsive pages

Finally we compose a new website or website page with this HTML, assembling the parts.

Alt Text

Responsive Web Pages All Day

Alt Text

Comments

This component does away with the need for any of the immensely popular CSS Frameworks. It 100% responsive and can be used/reused for an entire website. Other page layouts are simple to do, just change the grid areas templates.

JWP2019

Discussion (0)