mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 14:16:50 +02:00
Code Issues Releases Wiki Activity

feat: Add centering pattern

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 12:11:42 +07:00
parent 2f67a746ac
commit ff96c7c856
8 changed files with 53 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
contents/_includes/patterns/centering.njk Normal file
View File

@@ -0,0 +1,4 @@
<div class="centering">
{% circle %}
{% lines "hor", 5 %}
</div>

28
contents/centering.md Normal file
View File

@@ -0,0 +1,28 @@
---
layout: layouts/post.njk
title: Centering
description: Center an element with CSS flexbox
keywords: css centering, css flexbox
---
## HTML
```html
<div class="centering">
...
</div>
```
## CSS
```css
.centering {
align-items: center;
display: flex;
justify-content: center;
}
```
{% demo %}
{% include "patterns/centering.njk" %}
{% enddemo %}

6
contents/index.njk
View File

@@ -43,6 +43,12 @@ eleventyExcludeFromCollections: true
<div class="card__title">Badge</div>
</a>
</div>
<div class="card__item">
<a class="card__link" href="/centering/">
<div class="card__cover">{% include "patterns/centering.njk" %}</div>
<div class="card__title">Centering</div>
</a>
</div>
</div>
</div>

59
pages/centering/index.tsx
View File

@@ -1,59 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.Centering}>
<Head>
<meta name="description" content="Center an element with CSS flexbox" />
<meta name="og:description" content="Center an element with CSS flexbox" />
<meta name="twitter:description" content="Center an element with CSS flexbox" />
<meta name="keywords" content="css centering, css flexbox" />
</Head>
<BrowserFrame
html={`
<div class="container">
...
</div>
`}
css={`
.container {
align-items: center;
display: flex;
justify-content: center;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle size={64} />
<div style={{ marginTop: '16px', width: '40%' }}>
<Rectangle />
</div>
<div style={{ marginTop: '8px', width: '30%' }}>
<Rectangle />
</div>
<div style={{ marginTop: '8px', width: '20%' }}>
<Rectangle />
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

37
patterns/centering/Cover.tsx
View File

@@ -1,37 +0,0 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<Circle />
<div style={{ margin: '4px 0', width: '50%' }}>
<Line />
</div>
<div style={{ margin: '4px 0', width: '40%' }}>
<Line />
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -16,6 +16,7 @@
@import './patterns/avatar';
@import './patterns/avatar-list';
@import './patterns/badge';
@import './patterns/centering';
// Placeholders
@import './placeholders/circle';

9
styles/patterns/_centering.scss Normal file
View File

@@ -0,0 +1,9 @@
.centering {
align-items: center;
display: flex;
justify-content: center;
/* Demo */
flex-direction: column;
width: 6rem;
}

5
styles/placeholders/_line.scss
View File

@@ -9,6 +9,11 @@
height: 100%;
width: 1px;
}
.lines {
margin: 0.5rem 0;
width: 100%;
}
.lines .line {
margin-bottom: 0.25rem;
}