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: Feature list

Browse Source
This commit is contained in:
Phuoc Nguyen
2022-09-19 18:34:42 +07:00
parent 3fa0341174
commit cd700fb737
9 changed files with 113 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
.eleventy.js
View File

@@ -28,8 +28,10 @@ module.exports = function(eleventyConfig) {
</div>`;
});
eleventyConfig.addShortcode('circle', function() {
return `<div class="circle"></div>`;
// `size` can be `sm`, `md`, `lg`
eleventyConfig.addShortcode('circle', function(size) {
const s = size || 'sm';
return `<div class="circle circle--${s}"></div>`;
});
// `direction` can be `hor` or `ver`
eleventyConfig.addShortcode('line', function(dir) {

16
contents/_includes/patterns/feature-list.njk Normal file
View File

@@ -0,0 +1,16 @@
<div class="feature-list">
<div class="feature-list__image">
{% circle "md" %}
</div>
<div class="feature-list__desc">
{% lines "hor", 5 %}
</div>
</div>
<div class="feature-list feature-list--reverse">
<div class="feature-list__image">
{% circle "md" %}
</div>
<div class="feature-list__desc">
{% lines "hor", 5 %}
</div>
</div>

55
contents/feature-list.md Normal file
View File

@@ -0,0 +1,55 @@
---
layout: layouts/post.njk
title: Feature list
description: Create a feature list with CSS flexbox
keywords: css feature list, css flexbox
---
## HTML
```html
<!-- Feature item -->
<div class="feature-list">
<!-- Image -->
<div class="feature-list__image">
...
</div>
<!-- Right side -->
<div class="feature-list__desc">
...
</div>
</div>
<!-- Repeated items -->
...
```
## CSS
```css
.feature-list {
display: flex;
/* OPTIONAL: Spacing between items */
margin: 0.5rem 0;
}
/* Reverse the order of image and content */
.feature-list--reverse {
flex-direction: row-reverse;
}
.feature-list__image {
width: 2rem;
}
.feature-list__desc {
/* Take the remaining width */
flex: 1;
}
```
{% demo %}
{% include "patterns/feature-list.njk" %}
{% enddemo %}

6
contents/index.njk
View File

@@ -133,6 +133,12 @@ eleventyExcludeFromCollections: true
<div class="pattern__title">Feature comparison</div>
</a>
</div>
<div class="pattern__item">
<a class="pattern__link" href="/feature-list/">
<div class="pattern__cover">{% include "patterns/feature-list.njk" %}</div>
<div class="pattern__title">Feature list</div>
</a>
</div>
</div>
</div>

101
pages/feature-list/index.tsx
View File

@@ -1,101 +0,0 @@
import * as React from 'react';
import Head from 'next/head';
import { Spacer } from '@1milligram/design';
import { RelatedPatterns } from '../../components/RelatedPatterns';
import { Pattern } from '../../constants/Pattern';
import { PatternLayout } from '../../layouts/PatternLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
import Circle from '../../placeholders/Circle';
import Rectangle from '../../placeholders/Rectangle';
const Details: React.FC<{}> = () => {
return (
<PatternLayout pattern={Pattern.FeatureList}>
<Head>
<meta name="description" content="Create a feature list with CSS flexbox" />
<meta name="og:description" content="Create a feature list with CSS flexbox" />
<meta name="twitter:description" content="Create a feature list with CSS flexbox" />
<meta name="keywords" content="css feature list, css flexbox" />
</Head>
<BrowserFrame
html={`
<!-- Feature item -->
<div class="container">
<!-- Image -->
<div class="container__image">
...
</div>
<!-- Right side -->
<div class="container__feature">
...
</div>
</div>
<!-- Repeated items -->
...
`}
css={`
.container {
display: flex;
/* OPTIONAL: Reverse the order of image and content */
flex-direction: row-reverse;
/* OPTIONAL: Spacing between items */
margin: 16px 0;
}
.container__image {
width: 128px;
}
.container__feature {
/* Take the remaining width */
flex: 1;
}
`}
>
<div
style={{
alignItems: 'center',
display: 'flex',
height: '100%',
justifyContent: 'center',
}}
>
<div style={{ width: '60%' }}>
<div style={{ display: 'flex', marginBottom: '32px' }}>
<div style={{ margin: '0 16px' }}>
<Circle size={128} />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px' }}>
<Rectangle height={8} />
</div>
<Block numberOfBlocks={10} />
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'row-reverse', marginBottom: '32px' }}>
<div style={{ margin: '0 16px' }}>
<Circle size={128} />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '32px' }}>
<Rectangle height={8} />
</div>
<Block numberOfBlocks={15} />
</div>
</div>
</div>
</div>
</BrowserFrame>
<Spacer size="extraLarge" />
<RelatedPatterns patterns={[Pattern.FeatureComparison]} />
</PatternLayout>
);
};
export default Details;

64
patterns/feature-list/Cover.tsx
View File

@@ -1,64 +0,0 @@
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
import Rectangle from '../../placeholders/Rectangle';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
width: '100%',
}}
>
<div style={{ display: 'flex', marginBottom: '8px', width: '100%' }}>
<div style={{ margin: '0 4px' }}>
<Circle size={32} />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '8px', width: '100%' }}>
<Rectangle height={4} />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ width: '80%' }}>
<Line />
</div>
</div>
</div>
<div style={{ display: 'flex', flexDirection: 'row-reverse', width: '100%' }}>
<div style={{ margin: '0 4px' }}>
<Circle size={32} />
</div>
<div style={{ flex: 1 }}>
<div style={{ marginBottom: '8px', width: '100%' }}>
<Rectangle height={4} />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ marginBottom: '4px', width: '100%' }}>
<Line />
</div>
<div style={{ width: '80%' }}>
<Line />
</div>
</div>
</div>
</div>
</Frame>
);
};
export default Cover;

1
styles/index.scss
View File

@@ -31,6 +31,7 @@
@import './patterns/drop-cap';
@import './patterns/fading-long-section';
@import './patterns/feature-comparison';
@import './patterns/feature-list';
// Placeholders
@import './placeholders/circle';

20
styles/patterns/_feature-list.scss Normal file
View File

@@ -0,0 +1,20 @@
.feature-list {
display: flex;
/* OPTIONAL: Spacing between items */
margin: 0.5rem 0;
width: 100%;
}
.feature-list--reverse {
flex-direction: row-reverse;
}
.feature-list__image {
width: 2rem;
}
.feature-list__desc {
/* Take the remaining width */
flex: 1;
}

13
styles/placeholders/_circle.scss
View File

@@ -1,6 +1,15 @@
.circle {
background: rgba(0, 0, 0, .3);
border-radius: 9999px;
height: 0.5rem;
width: 0.5rem;
height: var(--var-circle-size);
width: var(--var-circle-size);
}
.circle--sm {
--var-circle-size: 0.5rem;
}
.circle--md {
--var-circle-size: 2rem;
}
.circle--lg {
--var-circle-size: 4rem;
}