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.
Next, we assign styles using only tagnames to the grid areas. Angular has allowed us to create the header, footer and main components.
The ResponsiveComponent, MainComponent, and FooterComponent only contain this markup at the HTML layer. This means they are only applying styles for each section.
All of our components (responsive, main, footer and header) look like this at TS layer. Notice the shortened selector name.
Create Responsive pages
Finally we compose a new website or website page with this HTML, assembling the parts.
Responsive Web Pages All Day
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
Top comments (0)