mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-10-24 19:26:26 +02:00
Code Issues Releases Wiki Activity

Merge pull request #169 from phuoc-ng/responsive

Browse Source 
Responsive improvements
This commit is contained in:
phuoc-ng
2021-04-01 19:11:52 +07:00
committed by GitHub
parent 31d93cd69d 4aca50449b
commit 50d2c67b7d
248 changed files with 901 additions and 812 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.babelrc
View File

@@ -3,7 +3,7 @@
"@loadable/babel-plugin",
["prismjs", {
"languages": ["css", "html", "javascript", "jsx", "tsx"],
"theme": "twilight",
// "theme": "okaidia",
"css": true
}]
],

101
README.md
View File

@@ -7,9 +7,9 @@ A collection of popular layouts and patterns made with CSS:
* 🎉No CSS hacks
* 🎉Real use cases
* Good practices (coming soon)
* Accessibility (coming soon)
* Accessibility Support (coming soon)
[![CSS Layout](/public/assets/screenshot.png)](https://csslayout.io/)
[![CSS Layout](/public/assets/screenshot.png)](https://csslayout.io)
## Why
@@ -23,44 +23,26 @@ They are powered by modern CSS features such as flexbox and grid.
They are great starting points to be picked and customized easily for each specific need.
By composing them, you can have any possible layout that exists in the real life.
The entire website is powered by
~~~ javascript
this
.madeWith([react,typescript])
.then(r => lint(tslint))
.then(r => lazyLoad(@loadable/component))
.then(r => optimizeAndBundle(webpack))
.then(r => exportHtml(react-snap))
.then(r => deploy(Netlify))
.then(r => {
expect(r).is(scalableCode);
expect(r).is(superFastWebsite);
expect(r).is(seoFriendly);
})
.finally(() => {/* Give me 1 star */}) 🎉
~~~
## Running it on local
- Clone the project:
~~~ console
```console
$ git clone https://github.com/phuoc-ng/csslayout
~~~
```
- Install the dependencies:
~~~ console
```console
$ cd csslayout
$ npm install
~~~
```
- Run it on the local:
~~~ console
```console
$ npm run dev-server
~~~
```
Visit http://localhost:1234 to see it in action.
@@ -70,9 +52,9 @@ PRs are welcomed. If you thing there are any missing useful layouts or patterns,
It's important to note that you should run the following command to lint the code:
~~~ console
```console
$ npm run lint
~~~
```
If there is any issue, it will be logged in the `tslint.log` file.
@@ -89,52 +71,17 @@ Be my friend on
You might be interested in my products:
<table>
<tbody>
<tr valign="top">
<td width="25%" align="center">
<h3>1 LOC (3.3k★)</h3>
<a href="https://1loc.dev">Favorite JavaScript utilities in single line of code</a>
</td>
<td width="25%" align="center">
<h3>Blur Page</h3>
<a href="https://blur.page">A browser extension to hide sensitive information on a web page</a>
</td>
<td width="25%" align="center">
<h3>Check Browsers Support</h3>
<a href="https://checkbrowsers.support">A browser extension to check browser compatibility without leaving your tab</a>
</td>
<td width="25%" align="center">
<h3>CSS Layout (2.7k★)</h3>
<a href="https://csslayout.io">A collection of popular layouts and patterns made with CSS</a>
</td>
</tr>
<tr valign="top">
<td width="25%" align="center">
<h3>Fake Numbers</h3>
<a href="https://fakenumbers.io">Generate fake and valid numbers</a>
</td>
<td width="25%" align="center">
<h3>Form Validation</h3>
<a href="https://formvalidation.io">The best validation library for JavaScript</a>
</td>
<td width="25%" align="center">
<h3>HTML DOM (3.1k★)</h3>
<a href="https://htmldom.dev">How to manage HTML DOM with vanilla JavaScript</a>
</td>
<td width="25%" align="center">
<h3>React PDF Viewer</h3>
<a href="https://react-pdf-viewer.dev">A React component to view a PDF document</a>
</td>
</tr>
<tr valign="top">
<td width="25%" align="center">
<h3>this VS that</h3>
<a href="https://thisthat.dev">The differences between ___ and ___ in the front-end development</a>
</td>
<td width="25%" align="center"></td>
<td width="25%" align="center"></td>
<td width="25%" align="center"></td>
</tr>
</tbody>
</table>
_Products_
* [Blur Page - A browser extension to hide sensitive information on a web page](https://blur.page)
* [Check Browsers Support - A browser extension to check browser compatibility without leaving your tab](https://checkbrowsers.support")
* [Fake Numbers - Generate fake and valid numbers](https://fakenumbers.io)
* [Form Validation - The best validation library for JavaScript](https://formvalidation.io)
* [React PDF Viewer - A React component to view a PDF document](https://react-pdf-viewer.dev)
_Resources_
* [1LOC - Favorite JavaScript utilities in single line of code](https://1loc.dev)
* [CSS Layout - A collection of popular layouts and patterns made with CSS](https://csslayout.io)
* [HTML DOM - How to manage HTML DOM with vanilla JavaScript](https://htmldom.dev)
* [Responsive Design Patterns - A collection of patterns to create a responsive web page](https://responsive.page)
* [Super tiny, quick tips, tricks and best practices of front-end development](https://getfrontend.tips)
* [this VS that - The differences between ___ and ___ in the front-end development](https://thisthat.dev)

4
client/App.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { BrowserRouter as Router, Route, Switch as RouteSwitch } from 'react-router-dom';
import './index.css';

8
client/components/Ad.tsx
View File

@@ -1,17 +1,17 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React, { useEffect, useRef } from 'react';
import * as React from 'react';
import './ad.css';
const Ad: React.FC<{}> = () => {
const containerRef = useRef<HTMLDivElement | null>(null);
const containerRef = React.useRef<HTMLDivElement | null>(null);
const source = 'https://cdn.carbonads.com/carbon.js?serve=CE7I6KQL&placement=csslayoutio';
useEffect(() => {
React.useEffect(() => {
// Ignore if the code is reached in snapping mode
if (navigator.userAgent === 'ReactSnap') {
return;

2
client/components/CoverCard.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';

2
client/components/Heading.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';

2
client/components/Product.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';

4
client/components/RelatedPatterns.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Pattern from '../constants/Pattern';
import CoverCard from './CoverCard';

11
client/components/SampleCode.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
@@ -19,15 +19,6 @@ const SampleCode: React.FC<SampleCodeProps> = ({ code, fullHeight = false, lang
: (
<pre
className={`language-${lang}`}
style={{
border: 'none',
borderRadius: 0,
boxShadow: 'none',
fontFamily: "'Source Code Pro', monospace",
height: fullHeight ? '100%' : 'auto',
lineHeight: 1.5,
margin: 0,
}}
dangerouslySetInnerHTML={{ __html: highlight(code, lang) }}
/>
);

2
client/components/ad.css
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
#carbonads {

18
client/components/coverCard.css
View File

@@ -1,17 +1,17 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.cover {
align-items: center;
color: var(--text-color);
color: var(--color-gray-9);
display: flex;
flex-direction: column;
justify-content: flex-start;
padding: 1rem;
text-decoration: none;
width: 50%;
width: 7rem;
}
.cover__name {
font-weight: normal;
@@ -20,18 +20,8 @@
text-align: center;
}
@media (min-width: 640px) {
.cover {
width: 25%;
}
}
@media (min-width: 768px) {
.cover {
width: 20%;
width: 8rem;
}
}
@media (min-width: 1024px) {
.cover {
width: 16.666666666666668%;
}
}

5
client/components/heading.css
View File

@@ -1,9 +1,10 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.heading {
color: var(--color-gray-9);
display: grid;
font-size: 2rem;
grid-template-columns: 1fr auto 1fr;
@@ -13,6 +14,6 @@
.heading::before,
.heading::after {
align-self: center;
border-top: 0.25rem double var(--text-color);
border-top: 0.25rem double var(--color-gray-9);
content: '';
}

2
client/components/product.css
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.product {

2
client/constants/Pattern.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
enum Pattern {

5
client/constants/ProductList.ts
View File

@@ -1,3 +1,8 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import ProductModel from './ProductModel';
const ProductList: ProductModel[] = [

5
client/constants/ProductModel.ts
View File

@@ -1,3 +1,8 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
export default interface ProductModel {
name: string;
url: string;

2
client/helpers/chunk.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
function chunk<T>(arr: T[], size: number): T[][] {

2
client/helpers/highlight.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import Prism from 'prismjs';

2
client/helpers/random.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
const random = (min: number, max: number) => min + Math.round(Math.random() * (max - min));

2
client/helpers/randomFromArray.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
function randomFromArray<T>(array: T[]): T {

2
client/helpers/randomIterms.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
type Tuple<T> = [number, T[]];

2
client/helpers/shuffe.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
const shuffe = (array: number[]) => {

2
client/helpers/slug.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
const slug = (item: string) => item.toLowerCase().split(' ').join('-');

6
client/hooks/useDocumentTitle.ts
View File

@@ -1,12 +1,12 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import { useEffect } from 'react';
import * as React from 'react';
const useDocumentTitle = (title: string) => {
useEffect(() => {
React.useEffect(() => {
document.title = title;
}, [title]);
};

2
client/hooks/useInterval.ts
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import { useEffect } from 'react';

95
client/index.css
View File

@@ -1,11 +1,15 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
:root {
--background-color: #e7d900;
--text-color: #1e1d6e;
--color-blue-6: #2563EB;
--color-gray-2: #E5E7EB;
--color-gray-5: #6B7280;
--color-gray-8: #27272A;
--color-gray-9: #111827;
}
body {
font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -22,6 +26,7 @@ a {
.container {
margin: 0 auto;
max-width: 64rem;
padding: 0 1rem;
}
.content {
display: flex;
@@ -43,34 +48,102 @@ a {
/* Hero */
.hero {
--current-background-color: var(--background-color);
background: var(--background-color);
display: flex;
justify-content: center;
padding-bottom: 2rem;
padding-bottom: 1rem;
}
.hero__logo {
display: flex;
justify-content: center;
}
.hero__logo img {
height: 16rem;
height: 12rem;
object-fit: cover;
width: 24rem;
width: 20rem;
}
.hero__heading {
color: var(--text-color);
font-size: 3rem;
margin: 2rem 0;
color: var(--color-gray-9);
font-size: 2rem;
line-height: 1.5;
text-align: center;
text-transform: capitalize;
}
.hero__subheading {
color: var(--text-color);
font-size: 2rem;
margin: 2rem 0;
color: var(--color-gray-9);
font-size: 1.5rem;
line-height: 1.5;
text-align: center;
}
/*
Prism theme
Credit to https://github.com/tailwindlabs/tailwindcss.com/blob/master/src/css/prism.css
*/
pre {
background: var(--color-gray-8);
border: none;
border-radius: 0px;
box-shadow: none;
color: #FFF;
font-family: "Source Code Pro", monospace;
font-size: 1.25rem;
height: 100%;
line-height: 1.5;
margin: 0px;
overflow: auto;
padding: 1rem;
}
.token.tag,
.token.class-name,
.token.selector,
.token.selector .class,
.token.function {
color: #E879F9;
}
.token.attr-name,
.token.keyword,
.token.rule,
.token.operator,
.token.pseudo-class,
.token.important {
color: #22D3EE;
}
.token.attr-value,
.token.class,
.token.string,
.token.number,
.token.unit,
.token.color {
color: #BEF264;
}
.token.punctuation,
.token.module,
.token.property {
color: #BAE6FD;
}
.token.atapply .token:not(.rule):not(.important) {
color: inherit;
}
.language-shell .token:not(.comment) {
color: inherit;
}
.language-css .token.function {
color: inherit;
}
.token.comment {
color: #A1A1AA;
}
/* Responsive */
@media (min-width: 640px) {
.sidebar {

13
client/index.html
View File

@@ -4,6 +4,19 @@
<title>CSS layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="author" content="Nguyen Huu Phuoc" />
<meta name="description" content="A collection of popular layouts and patterns made with CSS" />
<meta name="twitter:site" content="@nghuuphuoc" />
<meta name="twitter:title" content="A collection of popular layouts and patterns made with CSS" />
<meta name="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
<meta name="twitter:creator" content="@nghuuphuoc" />
<meta name="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
<meta property="og:site_name" content="1 LOC" />
<meta property="og:title" content="A collection of popular layouts and patterns made with CSS" />
<meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
<meta property="og:url" content="https://csslayout.io" />
<meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
<link href="/assets/favicon.png" rel="icon">
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&family=Lato&display=swap" rel="stylesheet">

4
client/index.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { hydrate, render } from 'react-dom';
import App from './App';

2
client/layouts/DetailsLayout.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';

2
client/layouts/Footer.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';

2
client/layouts/Header.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';

2
client/layouts/Layout.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';

20
client/layouts/footer.css
View File

@@ -1,8 +1,14 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.footer {
padding: 2rem 0 4rem 0;
padding: 2rem 0;
}
.footer__about {
border-bottom: 1px solid var(--text-color);
border-bottom: 1px solid var(--color-gray-2);
color: var(--color-gray-9);
display: flex;
margin-bottom: 1rem;
padding-bottom: 1rem;
@@ -12,10 +18,9 @@
}
.footer__social {
margin-left: 0.5rem;
color: var(--text-color);
color: var(--color-gray-5);
}
.footer__grid {
display: flex;
margin-left: -1rem;
margin-right: -1rem;
}
@@ -33,5 +38,10 @@
margin: 0.25rem 0;
}
.footer__product a {
color: var(--text-color);
color: var(--color-gray-5);
}
@media (min-width: 640px) {
.footer__grid {
display: flex;
}
}

7
client/layouts/header.css
View File

@@ -1,3 +1,8 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.header {
background-color: var(--background-color);
}
@@ -11,6 +16,6 @@
margin-right: auto;
}
.header__nav a {
color: var(--text-color);
color: var(--color-gray-9);
margin-left: 1rem;
}

2
client/loaders/CoverLoader.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import loadable, { LoadableComponent } from '@loadable/component';

4
client/loaders/DetailsLoader.tsx
View File

@@ -1,10 +1,10 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import loadable, { LoadableComponent } from '@loadable/component';
import React from 'react';
import * as React from 'react';
import './spinner.css';

2
client/loaders/spinner.css
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.spinner {

4
client/pages/ExplorePage.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Ad from '../components/Ad';

32
client/pages/HomePage.tsx
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
@@ -40,22 +40,44 @@ const HomePage = () => {
<div className="container">
<div className="home__features">
<div className="home__feature">
<div className="home__title">Zero Dependencies</div>
<div className="home__icon">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M0.500 12.000 A11.500 11.500 0 1 0 23.500 12.000 A11.500 11.500 0 1 0 0.500 12.000 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4.5,14.5v-4a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4.5 12.5L6 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5 14.5L8.5 9.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5,9.5h.75a1.25,1.25,0,0,1,0,2.5H8.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M10.5 14.5L9 12" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M14.5,14.5h-1a1,1,0,0,1-1-1v-3a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.5 12.5L14.5 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M18.5,14.5h-1a1,1,0,0,1-1-1v-3a1,1,0,0,1,1-1h1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.5 12.5L18.5 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
</div>
<div className="home__title">
Zero Dependencies
</div>
</div>
<div className="home__feature">
<div className="home__icon">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M0.500 2.500 L23.500 2.500 L23.500 21.500 L0.500 21.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.5 7.5L23.5 7.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M4,4.75A.25.25,0,1,1,3.75,5,.25.25,0,0,1,4,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7,4.75A.25.25,0,1,1,6.75,5,.25.25,0,0,1,7,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M10,4.75A.25.25,0,1,1,9.75,5,.25.25,0,0,1,10,4.75" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M8.5,11.5a2,2,0,0,0-2,2v1a2,2,0,0,0,2,2" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.5,11.5h-1a1,1,0,0,0-1,1c0,1.5,2,1.5,2,3a1,1,0,0,1-1,1h-1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.5,11.5h-1a1,1,0,0,0-1,1c0,1.5,2,1.5,2,3a1,1,0,0,1-1,1h-1" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
</div>
<div className="home__title">No Frameworks</div>
</div>
<div className="home__feature">
<div className="home__title">No CSS Hacks</div>
<div className="home__icon">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M13.514 23.5L10.514 23.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M14.514 21.5L9.514 21.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M12.014 0.5L12.014 3.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.528 4.015L5.65 6.136" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M20.499 4.015L18.378 6.136" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.514 12.5L3.514 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M23.514 12.5L20.514 12.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M18.014,12.5a6,6,0,1,0-9.429,4.917,1,1,0,0,1,.429.821V19a.5.5,0,0,0,.5.5h5a.5.5,0,0,0,.5-.5v-.763a1,1,0,0,1,.429-.821A5.98,5.98,0,0,0,18.014,12.5Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
</div>
<div className="home__title">
No CSS Hacks
</div>
</div>
<div className="home__feature">
<div className="home__icon">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M9.000 9.500 A3 1.5 0 1 0 15.000 9.500 A3 1.5 0 1 0 9.000 9.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.000 3.500 A3 1.5 0 1 0 15.000 3.500 A3 1.5 0 1 0 9.000 3.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.000 6.500 A3 1.5 0 1 0 22.000 6.500 A3 1.5 0 1 0 16.000 6.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M2.500 6.500 A3 1.5 0 1 0 8.500 6.500 A3 1.5 0 1 0 2.500 6.500 Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.737 4.484L7.582 5.421" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M16.694 5.541L14.261 4.483" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.074,7.381,1.1,8.239a1,1,0,0,0-.6.917v6.7a1,1,0,0,0,.586.91L11.1,21.32a1,1,0,0,0,.8.013l10.983-4.577a1,1,0,0,0,.615-.923V9.156a1,1,0,0,0-.6-.917L21.2,7.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M11.5 13.5L11.5 21.408" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M23.315 8.577L11.5 13.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M11.5 13.5L0.681 8.582" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
</div>
<div className="home__title">Real Use Cases</div>
</div>
<div className="home__feature">
<div className="home__title">Good Practices</div>
<div className="home__icon">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M20,15.659h0a1.5,1.5,0,1,1,0,3H19a1.5,1.5,0,0,1,1.5,1.5c0,.829-.672,1-1.5,1H12.5c-2.851,0-3.5-.5-7-1v-8.5c2.45,0,6.5-4.5,6.5-8.5,0-1.581,2.189-2.17,3,.719.5,1.781-1,5.281-1,5.281h8a1.5,1.5,0,0,1,1.5,1.5c0,.829-.672,2-1.5,2H21a1.5,1.5,0,0,1,0,3H20" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M0.5 10.159H5.5V22.159H0.5z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.25 19.659L3.25 19.659" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M3.25,19.659a.25.25,0,1,0,.25.25.25.25,0,0,0-.25-.25" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
</div>
<div className="home__title">Good Practices <div className="home__soon">soon</div></div>
</div>
<div className="home__feature">
<div className="home__title">Accessibility</div>
<div className="home__icon">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 48 48" width="48" height="48"><g transform="matrix(2,0,0,2,0,0)"><path d="M7,6,8.362,16.44a1,1,0,0,0,1.184.853C11.644,16.882,16.233,16,17,16c1,0,1.5,5.5,2,5.5a11.343,11.343,0,0,0,2-.5" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7.389,12.557A5.645,5.645,0,0,0,3,18a5.487,5.487,0,0,0,5.4,5.5A5.66,5.66,0,0,0,14,18V16.451" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M9.456,3.227A2.728,2.728,0,1,1,6.728.5,2.728,2.728,0,0,1,9.456,3.227Z" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path><path d="M7.389 12.557L13.5 11" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round"></path></g></svg>
</div>
<div className="home__title">Accessibility Support <div className="home__soon">soon</div></div>
</div>
</div>

4
client/pages/PatternPage.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Pattern from '../constants/Pattern';
import DetailsLoader from '../loaders/DetailsLoader';

2
client/pages/explorePage.css
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.explore__collection {

42
client/pages/homePage.css
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.home__features {
@@ -10,19 +10,18 @@
max-width: 48rem;
}
.home__feature {
padding: 2rem;
padding: 1rem;
text-align: center;
width: 33.333%;
width: 50%;
}
.home__feature:not(:nth-child(3n)) {
border-right: 1px solid var(--text-color);
}
.home__feature:nth-child(-n+3) {
border-bottom: 1px solid var(--text-color);
.home__icon {
color: var(--color-blue-6);
margin-bottom: 1rem;
}
.home__title {
font-size: 2rem;
font-weight: 500;
color: var(--color-gray-5);
font-size: 1.5rem;
font-weight: 600;
}
.home__patterns {
@@ -44,6 +43,7 @@
z-index: 10;
}
.home__heading {
color: var(--color-gray-9);
font-size: 4rem;
font-weight: 600;
margin-bottom: 1rem;
@@ -51,17 +51,19 @@
.home__explore {
background-color: var(--background-color);
border-radius: 0.4rem;
color: var(--text-color);
font-size: 2rem;
color: var(--color-gray-9);
font-size: 1.5rem;
font-weight: 600;
padding: 1rem 2rem;
}
.home__sliders {
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
height: 180rem;
opacity: 0.4;
width: 192rem;
}
.home__slide {
animation: slide 20s linear infinite;
@@ -69,15 +71,23 @@
flex-wrap: wrap;
height: 60rem;
justify-content: center;
width: 64rem;
width: 60rem;
will-change: transform;
}
.home__soon {
background: #1e1d6e;
border-radius: 9999px;
color: #fff;
display: inline-block;
padding: 0.125rem 1rem;
}
@keyframes slide {
from {
transform: translateX(0);
transform: translateY(0);
}
to {
transform: translateX(-100%);
transform: translateY(-100%);
}
}

4
client/patterns/accordion/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';

35
client/patterns/accordion/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React, { useState } from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -20,7 +20,7 @@ interface ItemProps {
}
const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = useState(1);
const [activeItem, setActiveItem] = React.useState(1);
const Item: React.FC<ItemProps> = ({ index, title, children }) => {
const isOpened = (index === activeItem);
@@ -66,22 +66,22 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Container -->
<div class="container">
<div class="accordion">
<!-- Each accordion item -->
<div class="item">
<div class="accordion__item">
<!-- Heading -->
<div class="header">
<div class="accordion__header">
<!-- The toggle icon -->
<div class="toggle">...</div>
<div class="accordion__toggle">...</div>
<!-- The title -->
<div class="title">
<div class="accordion__title">
...
</div>
</div>
<!-- The content -->
<div class="content">
<div class="accordion__content">
...
</div>
</div>
@@ -91,18 +91,18 @@ html={`
</div>
`}
css={`
.container {
.accordion {
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
border-bottom-color: transparent;
border-radius: 4px;
}
.item {
.accordion__item {
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
.header {
.accordion__header {
/* Center the content horizontally */
align-items: center;
display: flex;
@@ -110,22 +110,25 @@ css={`
cursor: pointer;
padding: 16px;
}
.toggle {
.accordion__toggle {
margin-right: 12px;
}
.title {
.accordion__title {
/* Take remaining width */
flex: 1;
}
.content {
.accordion__content {
/* For not selected item */
display: none;
border-top: 1px solid rgba(0, 0, 0, 0.3);
padding: 16px;
}
.content.selected {
.accordion__content--selected {
/* For selected item */
display: block;
}

8
client/patterns/arrow-buttons/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
@@ -23,7 +23,6 @@ const Cover: React.FC<{}> = () => {
<div style={{ height: '100%', position: 'relative', width: '100%' }}>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
@@ -36,7 +35,6 @@ const Cover: React.FC<{}> = () => {
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
@@ -49,7 +47,6 @@ const Cover: React.FC<{}> = () => {
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
@@ -62,7 +59,6 @@ const Cover: React.FC<{}> = () => {
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',

32
client/patterns/arrow-buttons/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -22,43 +22,43 @@ const Details: React.FC<{}> = () => {
<BrowserFrame
html={`
<!-- Up arrow button -->
<button class="container">
<button class="button">
<!-- Arrow -->
<div class="container__arrow container__arrow--up"></div>
<div class="button__arrow button__arrow--up"></div>
<!-- Content -->
...
</button>
<!-- Right arrow button -->
<button class="container">
<button class="button">
<!-- Content -->
...
<!-- Arrow -->
<div class="container__arrow container__arrow--right"></div>
<div class="button__arrow button__arrow--right"></div>
</button>
<!-- Down arrow button -->
<button class="container">
<button class="button">
<!-- Arrow -->
<div class="container__arrow container__arrow--down"></div>
<div class="button__arrow button__arrow--down"></div>
<!-- Content -->
...
</button>
<!-- Left arrow button -->
<button class="container">
<button class="button">
<!-- Arrow -->
<div class="container__arrow container__arrow--left"></div>
<div class="button__arrow button__arrow--left"></div>
<!-- Content -->
...
</button>
`}
css={`
.container {
.button {
/* Center the content */
align-items: center;
display: flex;
@@ -68,7 +68,7 @@ css={`
padding: 8px;
}
.container__arrow {
.button__arrow {
/* Transparent background */
background-color: transparent;
@@ -77,28 +77,28 @@ css={`
width: 12px;
}
.container__arrow--up {
.button__arrow--up {
/* Edges */
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(25%) rotate(45deg);
}
.container__arrow--right {
.button__arrow--right {
/* Edges */
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translateX(-25%) rotate(45deg);
}
.container__arrow--down {
.button__arrow--down {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translateY(-25%) rotate(45deg);
}
.container__arrow--left {
.button__arrow--left {
/* Edges */
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);

4
client/patterns/avatar-list/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

16
client/patterns/avatar-list/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -41,10 +41,10 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="container">
<div class="avatars">
<!-- Avatar item -->
<div class="container__item">
<div class="container__avatar">
<div class="avatars__item">
<div class="avatars__image">
<!-- Image -->
...
</div>
@@ -55,16 +55,16 @@ html={`
</div>
`}
css={`
.container {
.avatars {
display: flex;
}
.container__item {
.avatars__item {
/* Nagative margin make avatar overlap to previous one */
margin-left: -4px;
}
.container__avatar {
.avatars__image {
/* Add a white curve between avatars */
box-shadow: 0 0 0 4px #FFF;

4
client/patterns/avatar/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

12
client/patterns/avatar/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -21,20 +21,20 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="container">
<div class="avatar">
<!-- Avatar image -->
<img class="container__avatar" src="..." />
<img class="avatar__image" src="..." />
</div>
`}
css={`
.container {
.avatar {
/* Rounded border */
border-radius: 50%;
height: 64px;
width: 64px;
}
.container__avatar {
.avatar__image {
/* Rounded border */
border-radius: 50%;

4
client/patterns/badge/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

8
client/patterns/badge/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -21,12 +21,12 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="container">
<div class="badge">
...
</div>
`}
css={`
.container {
.badge {
/* Center the content */
align-items: center;
display: flex;

4
client/patterns/breadcrumb/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';

13
client/patterns/breadcrumb/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
@@ -21,24 +21,25 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="container">
<div class="breadcrumb">
<!-- Breadcrumb item -->
<a>...</a>
<!-- Separator -->
<div class="separator">/</div>
<div class="breadcrumb__separator">/</div>
<!-- Repeated items and separators -->
...
</div>
`}
css={`
.container {
.breadcrumb {
/* Content is centered vertically */
align-items: center;
display: flex;
}
.separator {
.breadcrumb__separator {
margin: 0 8px;
}
`}

4
client/patterns/button-with-icon/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';

4
client/patterns/button-with-icon/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';

4
client/patterns/card-layout/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';

13
client/patterns/card-layout/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -22,9 +22,9 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="container">
<div class="cards">
<!-- A card with given width -->
<div class="card">
<div class="cards__item">
...
</div>
@@ -33,7 +33,7 @@ html={`
</div>
`}
css={`
.container {
.cards {
display: flex;
/* Put a card in the next row when previous cards take all width */
@@ -42,7 +42,8 @@ css={`
margin-left: -8px;
margin-right: -8px;
}
.card {
.cards__item {
/* There will be 4 cards per row */
flex-basis: 25%;

4
client/patterns/card/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';

16
client/patterns/card/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -23,31 +23,31 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="container">
<div class="card">
<!-- Cover -->
<div class="container__cover">
<div class="card__cover">
...
</div>
<!-- Content -->
<div class="container__content">
<div class="card__content">
...
</div>
...
</div>
`}
css={`
.container {
.card {
display: flex;
flex-direction: column;
}
.container__cover {
.card__cover {
height: 150px;
width: 100%;
}
.container__content {
.card__content {
/* Take available height */
flex: 1;
}

4
client/patterns/centering/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';

4
client/patterns/centering/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';

4
client/patterns/chip/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';

4
client/patterns/chip/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';

4
client/patterns/chip/InputChip.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
const InputChip: React.FC<{}> = ({ children }) => {
return (

4
client/patterns/circular-navigation/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

21
client/patterns/circular-navigation/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
@@ -57,15 +57,14 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="container">
<div class="navigation">
<!-- The trigger element that will show all circles when user clicks it -->
...
<!-- A circle menu item -->
<div class="item">
<!-- The inner -->
<div class="inner">
<!-- The content -->
<div class="navigation__circle">
<!-- The content -->
<div class="navigation__content">
...
</div>
</div>
@@ -75,10 +74,11 @@ html={`
</div>
`}
css={`
.container {
.navigation {
position: relative;
}
.item {
.navigation__circle {
/* Position */
position: absolute;
top: 0;
@@ -95,7 +95,8 @@ css={`
height: 32px;
width: 32px;
}
.inner {
.navigation__content {
/*
Rotate it to make it displayed vertically
Replace -0deg with -60deg, -180deg, -240deg, -300deg for another item

4
client/patterns/close-button/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

18
client/patterns/close-button/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -21,14 +21,14 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<button class="container">
<div class="container__line container__line--first"></div>
<button class="button">
<div class="button__line button__line--first"></div>
<div class="container__line container__line--second"></div>
<div class="button__line button__line--second"></div>
</button>
`}
css={`
.container {
.button {
/* Reset */
background-color: transparent;
border-color: transparent;
@@ -44,7 +44,7 @@ css={`
position: relative;
}
.container__line {
.button__line {
/* Background color */
background-color: rgba(0, 0, 0, 0.3);
@@ -56,7 +56,7 @@ css={`
width: 100%;
}
.container__line--first {
.button__line--first {
/* Position */
left: 0px;
top: 50%;
@@ -67,7 +67,7 @@ css={`
width: 100%;
}
.container__line--second {
.button__line--second {
/* Position */
left: 50%;
top: 0px;

4
client/patterns/cookie-banner/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';

12
client/patterns/cookie-banner/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -23,9 +23,9 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<div class="container">
<div class="banner">
<!-- Tells visitors that the website uses cookie -->
<div class="container__content">
<div class="banner__content">
...
</div>
@@ -34,7 +34,7 @@ html={`
</div>
`}
css={`
.container {
.banner {
/* Banner is displayed at the bottom */
bottom: 0;
left: 0;
@@ -47,7 +47,7 @@ css={`
justify-content: center;
}
.container__content {
.banner__content {
/* Take available width */
flex: 1;
}

4
client/patterns/corner-ribbon/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

4
client/patterns/corner-ribbon/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import { Link } from 'react-router-dom';

4
client/patterns/curved-background/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

4
client/patterns/curved-background/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';

4
client/patterns/custom-checkbox-button/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Rectangle from '../../placeholders/Rectangle';

6
client/patterns/custom-checkbox-button/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React, { useState } from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -19,7 +19,7 @@ interface CheckboxProps {
const Details: React.FC<{}> = () => {
const Checkbox: React.FC<CheckboxProps> = ({ isChecked, value, children }) => {
const [checked, setChecked] = useState(isChecked);
const [checked, setChecked] = React.useState(isChecked);
const click = () => setChecked((c) => !c);
return (

4
client/patterns/custom-radio-button/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';

6
client/patterns/custom-radio-button/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React, { useState } from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';
@@ -17,7 +17,7 @@ interface RadioProps {
}
const Details: React.FC<{}> = () => {
const [selectedValue, setSelectedValue] = useState('1');
const [selectedValue, setSelectedValue] = React.useState('1');
const Radio: React.FC<RadioProps> = ({ value, children }) => {
const click = () => setSelectedValue(value);

4
client/patterns/diagonal-section/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

4
client/patterns/diagonal-section/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import RelatedPatterns from '../../components/RelatedPatterns';

4
client/patterns/docked-at-corner/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

4
client/patterns/docked-at-corner/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Heading from '../../components/Heading';

4
client/patterns/dot-leader/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';

4
client/patterns/dot-leader/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Heading from '../../components/Heading';

4
client/patterns/dot-navigation/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';

15
client/patterns/dot-navigation/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React, { useState } from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
@@ -15,7 +15,7 @@ interface DotProps {
}
const Details: React.FC<{}> = () => {
const [activeItem, setActiveItem] = useState(0);
const [activeItem, setActiveItem] = React.useState(0);
const Dot: React.FC<DotProps> = ({ index }) => {
const isActive = index === activeItem;
@@ -45,15 +45,15 @@ const Details: React.FC<{}> = () => {
<div className='p-8 pb-20'>
<BrowserFrame
html={`
<ul class="container">
<li class="item" />
<ul class="dots">
<li class="dots__item"></li>
<!-- Repeat other dots -->
...
</div>
`}
css={`
.container {
.dots {
/* Center the content */
align-items: center;
display: flex;
@@ -64,7 +64,8 @@ css={`
margin: 0;
padding: 0;
}
.item {
.dots__item {
/* Rounded border */
border-radius: 9999px;
height: 12px;

4
client/patterns/drawer/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';

14
client/patterns/drawer/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';
@@ -26,10 +26,10 @@ const Details: React.FC<{}> = () => {
html={`
<div class="container">
<!-- Backdrop -->
<div class="overlay"></div>
<div class="container__overlay"></div>
<!-- Sidebar -->
<div class="sidebar">
<div class="container__sidebar">
...
</div>
</div>
@@ -45,7 +45,8 @@ css={`
z-index: 9999;
}
.overlay {
.container__overlay {
/* Take full size */
height: 100%;
left: 0;
@@ -58,7 +59,8 @@ css={`
z-index: -1;
}
.sidebar {
.container__sidebar {
/* Take full height */
height: 100%;
left: 0;

4
client/patterns/drop-area/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';

4
client/patterns/drop-area/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';

4
client/patterns/drop-cap/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';

4
client/patterns/drop-cap/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import './dropcap.css';

2
client/patterns/drop-cap/dropcap.css
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.p-drop-cap:first-letter {

4
client/patterns/dropdown/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';

10
client/patterns/dropdown/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import './dropdown.css';
@@ -34,7 +34,7 @@ html={`
<button>...</button>
<!-- The content -->
<div class="dropdown-content">
<div class="dropdown__content">
...
</div>
</div>
@@ -45,7 +45,7 @@ css={`
}
/* Hide the dropdown's content by default -->
.dropdown-content {
.dropdown__content {
display: none;
/* Position it right below the trigger element */
@@ -64,7 +64,7 @@ css={`
}
/* Show the content when hover on the container -->
.dropdown:hover .dropdown-content {
.dropdown:hover .dropdown__content {
display: block;
}
`}

2
client/patterns/dropdown/dropdown.css
View File

@@ -1,6 +1,6 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
.p-dropdown-content {

4
client/patterns/fading-long-section/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import random from '../../helpers/random';
import Frame from '../../placeholders/Frame';

4
client/patterns/fading-long-section/Details.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import { Helmet } from 'react-helmet';
import Pattern from '../../constants/Pattern';

4
client/patterns/feature-comparison/Cover.tsx
View File

@@ -1,9 +1,9 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2020 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import React from 'react';
import * as React from 'react';
import Circle from '../../placeholders/Circle';
import Frame from '../../placeholders/Frame';

Some files were not shown because too many files have changed in this diff Show More