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

feat: Media object

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 21:14:26 +07:00
parent 02b7e880ec
commit 14e3899bd5
7 changed files with 77 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
contents/_includes/patterns/media-object.njk Normal file
View File

@@ -0,0 +1,8 @@
<div class="media-object">
<div class="media-object__media">
{% square "md" %}
</div>
<div class="media-object__content">
{% lines "hor", 10 %}
</div>
</div>

6
contents/index.njk
View File

@@ -187,6 +187,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Lined paper</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/media-object/">
<div class="pattern__cover">{% include "patterns/media-object.njk" %}</div>
<div class="pattern__title">Media object</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/triangle-buttons/">
<div class="pattern__cover">{% include "patterns/triangle-buttons.njk" %}</div>

44
contents/media-object.md Normal file
View File

@@ -0,0 +1,44 @@
---
layout: layouts/post.njk
title: Media object
description: Create a media object with CSS flexbox
keywords: css flexbox, media object
---
## HTML
```html
<div class="media-object">
<!-- Media object -->
<div class="media-object__media">
...
</div>
<!-- Main content -->
<div class="media-object__content">
...
</div>
</div>
```
## CSS
```css
.media-object {
/* Align sub-items to top */
align-items: start;
display: flex;
}
.media-object__media {
margin-right: 0.5rem;
}
.media-object__content {
/* Take the remaining width */
flex: 1;
}
```
{% demo %}
{% include "patterns/media-object.njk" %}
{% enddemo %}

82
pages/media-object/index.tsx
View File

@@ -1,82 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Rectangle from '../../placeholders/Rectangle';
import Square from '../../placeholders/Square';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.MediaObject}>
<Head>
<meta name="description" content="Create a media object with CSS flexbox" />
<meta name="og:description" content="Create a media object with CSS flexbox" />
<meta name="twitter:description" content="Create a media object with CSS flexbox" />
<meta name="keywords" content="css flexbox, media object" />
</Head>
<BrowserFrame
html={`
<div class="container">
<!-- Media object -->
<div class="container__media">
...
</div>
<!-- Main content -->
<div class="container__content">
...
</div>
</div>
`}
css={`
.container {
/* Align sub-items to top */
align-items: start;
display: flex;
}
.container__media {
margin-right: 16px;
/* Set the width for the media object */
width: 200px;
}
.container__content {
/* Take the remaining width */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'flex-start',
display: 'flex',
height: '100%',
padding: '16px',
}}
>
<div style={{ height: '128px', marginRight: '16px', width: '128px' }}>
<Square />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px', width: '80%' }}>
<Rectangle />
</div>
<div style={{ marginBottom: '32px' }}>
<Block numberOfBlocks={20} />
</div>
<div style={{ marginBottom: '32px' }}>
<Block numberOfBlocks={15} />
</div>
</div>
</div>
</BrowserFrame>
</PatternLayout>
);
};
export default Details;

58
patterns/media-object/Cover.tsx
View File

@@ -1,58 +0,0 @@
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Square from '../../placeholders/Square';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'flex-start',
display: 'flex',
height: '100%',
padding: '8px',
width: '100%',
}}
>
<div style={{ height: '32px', marginRight: '8px', width: '32px' }}>
<Square />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '16px', width: '80%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '16px', width: '80%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '80%' }}>
<Line />
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -40,6 +40,7 @@
@import './patterns/keyboard-shortcut';
@import './patterns/layered-card';
@import './patterns/lined-paper';
@import './patterns/media-object';
@import './patterns/triangle-buttons';
@import './patterns/video-background';
@import './patterns/voting';

18
styles/patterns/_media-object.scss Normal file
View File

@@ -0,0 +1,18 @@
.media-object {
/* Align sub-items to top */
align-items: start;
display: flex;
/* Demo */
height: 100%;
width: 100%;
}
.media-object__media {
margin-right: 0.5rem;
}
.media-object__content {
/* Take the remaining width */
flex: 1;
}