Skip to content
Snippets Groups Projects
Commit 93ec7e9a authored by Lukas Haase's avatar Lukas Haase
Browse files

ars-style-typography-material component

parent 88ffecc0
No related merge requests found
......@@ -11,6 +11,7 @@ import { WrapperDirective } from './components/layout/frame/wrp/WrapperDirective
import { FrameTestComponent } from './components/test/layout/frame/frame-test/frame-test.component';
import { RespComponent } from './components/layout/base/resp/resp.component';
import { ScrollDirective } from './components/layout/base/scroll/ScrollDirective';
import { MaterialTypographyComponent } from './components/style/typography/material-typography/material-typography.component';
@NgModule({
declarations: [
......@@ -24,7 +25,8 @@ import { ScrollDirective } from './components/layout/base/scroll/ScrollDirective
WrapperDirective,
FrameTestComponent,
RespComponent,
ScrollDirective
ScrollDirective,
MaterialTypographyComponent
],
imports: [
MatIconModule,
......
<ng-content></ng-content>
$snap-width:600px;
$snap-width-micro:300px;
body{
font-size:100%;
@media screen and (max-width:$snap-width){
font-size:70%;
}
@media screen and (max-width:$snap-width-micro){
font-size:50%;
}
}
p,h1,h2,h3,h4,h5,h6{
font-family:'Roboto',sans-serif;
font-style:normal;
font-weight:400;
padding:0;
margin:0;
line-height:1em;
}
.typo{
&-lead{
&-h{
font-size:3.75em;
line-height:1.1em;
color:#212121;
@media screen and (max-width:$snap-width){
font-size:3.55em;
}
&.space{
&-lead-p{
margin-bottom:0.4em;
}
&-page-p{
margin-bottom:1.1em;
}
}
}
&-p{
font-size:1.25em;
line-height:1.5em;
color:#616161;
@media screen and (max-width:$snap-width){
font-size:1.6em;
}
}
}
&-main{
&-h{
font-size:2em;
line-height:1em;
color:#212121;
&.space{
&-page-p{
margin-bottom:0.8em;
}
}
}
}
&-page{
&-h{
font-size:1.25em;
line-height:1.2em;
color:#212121;
@media screen and (max-width:$snap-width){
font-size:1.8em;
}
@media screen and (max-width:$snap-width-micro){
font-size:2.0em;
}
&.space{
&-page-p{
margin-bottom:0.5em;
}
}
}
&-p{
font-size:1em;
line-height:1.5em;
color:#616161;
@media screen and (max-width:$snap-width){
font-size:16px;
}
@media screen and (max-width:$snap-width-micro){
font-size:14px;
}
&.space{
&-page-p{
margin-bottom:1em;
}
}
}
}
}
/*import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MaterialTypographyComponent } from './material-typography.component';
describe('MaterialTypographyComponent', () => {
let component: MaterialTypographyComponent;
let fixture: ComponentFixture<MaterialTypographyComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MaterialTypographyComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MaterialTypographyComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
*/
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'ars-style-typography-material',
templateUrl: './material-typography.component.html',
styleUrls: ['./material-typography.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class MaterialTypographyComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
<ars-style-typography-material>
<ars-screen ars-flex-box>
<ars-row [height]="1"></ars-row>
<ars-fill [overflow]="'hidden'">
<ars-resp ars-scroll [width]="750" [margin]="30">
<ars-screen ars-flex-box>
<ars-row [height]="64"></ars-row>
<ars-fill [overflow]="'hidden'">
<ars-resp ars-scroll [width]="500" [margin]="10">
<ars-row [height]="100"></ars-row>
<ars-row [height]="100"></ars-row>
<ars-row [height]="100"></ars-row>
<ars-row [height]="100"></ars-row>
<ars-row [height]="100"></ars-row>
<ars-row [height]="100"></ars-row>
<ars-row [height]="100"></ars-row>
<ars-row [height]="100"></ars-row>
<ars-row [height]="100"></ars-row>
</ars-resp>
</ars-fill>
<ars-row [height]="40"></ars-row>
</ars-screen>
<ars-row [height]="300"></ars-row>
<!-- typo-lead-h to typo-lead-p -->
<h1 class="typo-lead-h space-lead-p">
Roboto Typography
</h1>
<p class="typo-lead-p">
Roboto is a neo-grotesque sans-serif typeface family developed by Google.
</p>
<ars-row [height]="160"></ars-row>
<!-- typo-lead-h to typo-page-p -->
<h1 class="typo-lead-h space-page-p">
Roboto (/roʊˈbɒt.oʊ/)
</h1>
<p class="typo-page-p space-page-p">
Roboto is the default font on Android, and since 2013, other Google services such as
Google+, Google Play, YouTube, Google Maps, and mobile Google Search.
</p>
<p class="typo-page-p space-page-p">
In 2017 Roboto was used on the LCD countdown clocks of the New York City Subway's B
Division lines.
</p>
<p class="typo-page-p space-page-p">
Roboto Bold is the default font in Unreal Engine 4, and in Kodi. Roboto Condensed is used
to display Information on European versions of Nintendo Switch packaging, including
physical releases of games.
</p>
<ars-row [height]="160"></ars-row>
<!-- typo-main-h to typo-page-p -->
<h1 class="typo-main-h space-page-p">
Development
</h1>
<p class="typo-page-p space-page-p">
The font was designed entirely in-house by Christian Robertson who previously had released
an expanded Ubuntu-Title font through his personal type foundry Betatype. The font was
officially made available for free download on January 12, 2012, on the newly launched
Android Design website.
</p>
<p class="typo-page-p">
Compared to Android's previous system font, the humanist sans-serif Droid, Roboto belongs
to the neo-grotesque genre of sans-serif typefaces. It includes Thin, Light, Regular,
Medium, Bold and Black weights with matching oblique styles rather than true italics. It
also includes condensed styles in Light, Regular and Bold, also with matching oblique
designs.
</p>
<ars-row [height]="160"></ars-row>
<!-- typo-main-h to typo-page-p (with box at bottom) -->
<h1 class="typo-main-h space-page-p">
Redesign
</h1>
<p class="typo-page-p space-page-p">
In 2014, Matias Duarte announced at Google I/O that Roboto was significantly redesigned for
Android 5.0 "Lollipop".
</p>
<p class="typo-page-p space-page-p">
Punctuation marks and the tittles in the lowercase "i" and "j" were changed from square to
rounded, and the entire typeface was made “slightly wider and rounder” with many changes in
details.
</p>
<ars-row [height]="200" style="background-color: rgba(0,0,0,0.1)"></ars-row>
<ars-row [height]="160"></ars-row>
<!-- typo-page-h to typo-page-p (with box at bottom) -->
<h1 class="typo-page-h space-page-p">
Reception
</h1>
<p class="typo-page-p space-page-p">
Google developed the font to be "modern, yet approachable" and "emotional", but Roboto
received mixed reviews on its release. Joshua Topolsky, Editor-In-Chief of technology news
and media network The Verge, describes the font as<br>
<i>"clean and modern, but not overly futuristic– not a science fiction font".</i>
</p>
<ars-row [height]="200" style="background-color: rgba(0,0,0,0.1)"></ars-row>
<ars-row [height]="160"></ars-row>
<!-- typo-page-h to typo-page-p -->
<h1 class="typo-page-h space-page-p">
Measurement from the baseline
</h1>
<p class="typo-page-p">
Specify distances from UI elements from the baseline. Baseline values are
software-agnostic, so they work in any design program, and work with the grid. On Android
and iOS, code can be translated from baseline-relative specs into padding. For the web,
automate the calculation using Sass or CSS.
</p>
<ars-row [height]="160"></ars-row>
</ars-resp>
</ars-fill>
<ars-row [height]="1"></ars-row>
</ars-screen>
</ars-style-typography-material>
*{
box-shadow:inset 0px 0px 0px 1px rgba(0,0,0,0.2);
}
ars-screen{
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment