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

Merge pull request #55 from phuoc-ng/tweak-home

Browse Source 
Tweak home
This commit is contained in:
phuoc-ng
2019-11-26 23:18:15 +07:00
committed by GitHub
parent ab542dfc0e 27543dfd00
commit 38fd1026d8
11 changed files with 469 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@@ -23,6 +23,19 @@ They are powered by modern CSS features such as flexbox and grid.
They are great starting points and could 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 => lazyLoad(@loadable/component))
.then(r => optimizeAndBundle(webpack))
.then(r => exportHtml(react-snap))
.then(r => deploy(Netlify))
.assert([scalableCode, superFastWebsite, seoFriendly])
.done(/* Give me 1 star */) 🎉
~~~
## Running it on local
- Clone the project:
@@ -44,7 +57,7 @@ $ npm install
$ npm run dev-server
~~~
Visit http://localhost:8080 to see it in action.
Visit http://localhost:1234 to see it in action.
## Contributing

60
client/Explore.tsx
View File

@@ -12,18 +12,64 @@ const Home = () => {
return (
<Layout>
<div className="mv4">
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
<div style={{ margin: '32px 0' }}>
<Link
to="/"
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.home
</Link>
</div>
<div className="bt br bl b--black-20 relative br4 br--top">
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>Explore</h1>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '32px',
position: 'relative',
}}
>
<h1
style={{
backgroundColor: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%',
lineHeight: 1.5,
margin: 0,
padding: '0 16px',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
>
Explore
</h1>
<h2 className="fw3 f3 tc lh-copy ma0 pa4">Here is the collection of patterns</h2>
<h2
style={{
fontSize: '24px',
fontWeight: 300,
lineHeight: 1.5,
margin: 0,
padding: '32px 0',
textAlign: 'center',
}}
>
Here is the collection of patterns
</h2>
<section>
<Heading title="Layouts" />
<div className="flex flex-wrap items-start pa4">
<div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
<CoverCard pattern={Pattern.HolyGrail} />
<CoverCard pattern={Pattern.Sidebar} />
<CoverCard pattern={Pattern.SplitScreen} />
@@ -35,7 +81,7 @@ const Home = () => {
<section>
<Heading title="Patterns" />
<div className="flex flex-wrap items-start pa4">
<div style={{ display: 'flex', flexWrap: 'wrap', padding: '32px' }}>
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Breadcrumb} />
<CoverCard pattern={Pattern.ButtonWithIcon} />

137
client/Home.tsx
View File

@@ -1,6 +1,8 @@
import React from 'react';
import { Link } from 'react-router-dom';
import './home.css';
import CoverCard from './components/CoverCard';
import Pattern from './constants/Pattern';
import useDocumentTitle from './hooks/useDocumentTitle';
@@ -11,11 +13,31 @@ const Home = () => {
return (
<Layout>
<div className="mt5 bl br bt b--black-20 br4 br--top">
<div className="relative">
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '64px',
}}
>
<div style={{ position: 'relative' }}>
<h1
className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0 br-pill ph3 white bg-dark-blue"
style={{ left: '50%', transform: 'translate(-50%, -50%)' }}
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%',
lineHeight: 1.5,
margin: 0,
padding: '0 16px',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
>
CSS Layout
</h1>
@@ -33,37 +55,75 @@ const Home = () => {
a collection of popular layouts and patterns made with CSS
</h2>
<div className="w-30 center mb4">
<ul className="ma0 pa0 list f4 lh-copy">
<li className="flex items-center justify-between">
<div>Zero dependencies</div>
<div>🎉</div>
</li>
<li className="flex items-center justify-between">
<div>No frameworks</div>
<div>🎉</div>
</li>
<li className="flex items-center justify-between">
<div>No CSS hacks</div>
<div>🎉</div>
</li>
<li className="flex items-center justify-between">
<div>Real use cases</div>
<div>🎉</div>
</li>
<li className="flex items-center justify-between">
<div>Good practices</div>
<div className="br-pill ph2 white bg-dark-blue f6">soon</div>
</li>
<li className="flex items-center justify-between">
<div>Accessibility</div>
<div className="br-pill ph2 white bg-dark-blue f6">soon</div>
</li>
<div
className="hljs"
style={{
alignItems: 'center',
display: 'flex',
fontFamily: '\'Source Code Pro\'',
fontSize: '16px',
justifyContent: 'center',
lineHeight: 1.5,
}}
>
<ul style={{ listStyleType: 'none', margin: 0, padding: 0, width: '300px' }}>
<li><span className="hljs-selector-class">.awesome</span> &#123;</li>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div className="hljs-attribute">zero-dependencies:</div>
<div>🎉;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div className="hljs-attribute">no-frameworks:</div>
<div>🎉;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div className="hljs-attribute">no-css-hacks:</div>
<div>🎉;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex', justifyContent: 'space-between' }}>
<div className="hljs-attribute">real-use-cases:</div>
<div>🎉;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div className="hljs-attribute">good-practices:</div>
<div
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '14px',
marginLeft: 'auto',
padding: '0 8px',
}}
>
soon
</div>
;
</li>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div className="hljs-attribute">accessibility:</div>
<div
style={{
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
fontSize: '14px',
marginLeft: 'auto',
padding: '0 8px',
}}
>
soon
</div>
;
</li>
</ul>
<li>&#125;</li>
</ul>
</div>
</div>
<section style={{ position: 'relative' }}>
<section style={{ height: '900px', overflow: 'hidden', paddingBottom: '32px', position: 'relative' }}>
<div
style={{
alignItems: 'center',
@@ -102,6 +162,7 @@ const Home = () => {
</Link>
</div>
<div
className="home-cards"
style={{
display: 'flex',
flexWrap: 'wrap',
@@ -134,6 +195,20 @@ const Home = () => {
<CoverCard pattern={Pattern.PropertyList} />
<CoverCard pattern={Pattern.ProgressBar} />
<CoverCard pattern={Pattern.QuestionsAndAnswers} />
<CoverCard pattern={Pattern.RadioSwitch} />
<CoverCard pattern={Pattern.Rating} />
<CoverCard pattern={Pattern.SameHeightColumns} />
<CoverCard pattern={Pattern.SearchBox} />
<CoverCard pattern={Pattern.Separator} />
<CoverCard pattern={Pattern.SimpleGrid} />
<CoverCard pattern={Pattern.Slider} />
<CoverCard pattern={Pattern.SpinButton} />
<CoverCard pattern={Pattern.SplitNavigation} />
<CoverCard pattern={Pattern.StepperInput} />
<CoverCard pattern={Pattern.Switch} />
<CoverCard pattern={Pattern.Tab} />
<CoverCard pattern={Pattern.TogglePasswordVisibility} />
<CoverCard pattern={Pattern.Wizard} />
</div>
</section>
</div>

21
client/components/CoverCard.tsx
View File

@@ -14,10 +14,27 @@ const CoverCard: React.FC<CoverCardProps> = ({ pattern }) => {
<div className="pa1 w-20">
<Link
to={`/${slug(pattern)}`}
className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
padding: '16px',
textDecoration: 'none',
}}
>
<CoverLoader pattern={pattern} />
<h4 className="f5 mv0 pt3 fw6">{pattern}</h4>
<h4
style={{
fontSize: '16px',
fontWeight: 500,
margin: 0,
paddingTop: '12px',
textAlign: 'center',
}}
>
{pattern}
</h4>
</Link>
</div>
);

20
client/components/Heading.tsx
View File

@@ -6,8 +6,24 @@ interface HeadingProps {
const Heading: React.FC<HeadingProps> = ({ title }) => {
return (
<div className="bt b--black-20 relative">
<h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0 ttu" style={{ transform: 'translate(0, -50%)' }}>{title}</h3>
<div style={{ borderTop: '1px solid rgba(0, 0, 0, .2)', position: 'relative' }}>
<h3
style={{
backgroundColor: '#FFF',
fontSize: '20px',
fontWeight: 700,
left: '32px',
lineHeight: 1.5,
margin: 0,
padding: '0 8px',
position: 'absolute',
textTransform: 'uppercase',
top: 0,
transform: 'translate(0, -50%)',
}}
>
{title}
</h3>
</div>
);
};

12
client/home.css Normal file
View File

@@ -0,0 +1,12 @@
.home-cards {
animation: slide 60s linear infinite;
}
@keyframes slide{
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(0, -600px, 0);
}
}

62
client/layouts/DetailsLayout.tsx
View File

@@ -13,12 +13,64 @@ const DetailsLayout: React.FC<DetailsLayoutProps> = ({ title, children }) => {
return (
<Layout>
<div className="mv4">
<Link to="/" className="bg-dark-blue black br-pill link pa1 ph3 pv2 white">CSS Layout</Link>
<div
style={{
alignItems: 'center',
backgroundColor: '#00449E',
borderRadius: '9999px',
color: '#FFF',
display: 'inline-flex',
margin: '32px 0',
}}
>
<Link
to="/"
style={{
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.home
</Link>
<div>~</div>
<Link
to="/explore"
style={{
color: '#FFF',
padding: '8px 16px',
textDecoration: 'none',
}}
>
.explore
</Link>
</div>
<div className="bt br bl b--black-20 relative br4 br--top">
<h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomColor: 'transparent',
borderTopLeftRadius: '16px',
borderTopRightRadius: '16px',
marginTop: '32px',
position: 'relative',
}}
>
<h1
style={{
backgroundColor: '#FFF',
fontSize: '36px',
fontWeight: 600,
left: '50%',
lineHeight: 1.5,
margin: 0,
padding: '0 16px',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%)',
}}
>
{title}
</h1>
{children}
</div>
</Layout>

232
client/layouts/Footer.tsx
View File

@@ -4,106 +4,154 @@ import Heading from '../components/Heading';
const Footer: React.FC<{}> = () => {
return (
<div className="bl br bb b--black-20 flex justify-between br4 br--bottom">
<div className="br b--black-20" style={{ flex: 1 }}>
<Heading title="Products" />
<ul className="list ma0 pa0 lh-copy fw5 pa4">
<li>
<a href="https://formvalidation.io" className="link" target="_blank" title="FormValidation ~ best validation library for JavaScript">
FormValidation
</a>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.2)',
borderBottomLeftRadius: '16px',
borderBottomRightRadius: '16px',
display: 'flex',
}}
>
<div
style={{
alignItems: 'center',
borderRight: '1px solid rgba(0, 0, 0, 0.2)',
display: 'flex',
flex: 1,
fontSize: '16px',
lineHeight: 1.5,
padding: '32px',
}}
>
<ul
style={{
fontWeight: 500,
lineHeight: 1.5,
listStyleType: 'none',
margin: 0,
padding: 0,
}}
>
<li style={{ alignItems: 'center', display: 'flex' }}>
<h3
className="hljs-selector-class"
style={{
fontSize: '20px',
fontWeight: 700,
margin: 0,
padding: '0 8px 0 0',
}}
>
.my-products
</h3>
&#123;
</li>
<li>
<a className="link" href="https://blur.page" title="BlurPage ~ a browser extension to hide sensitive element on page" target="_blank">
BlurPage
</a>
</li>
<li>
<a className="link" href="https://react-pdf-viewer.dev" title="React PDF Viewer ~ a PDF viewer made for React" target="_blank">
React PDF Viewer
</a>
</li>
</ul>
</div>
<div style={{ flex: 1 }}>
<Heading title="About" />
<div className="pa4">
<div className="pb2 lh-copy">© 2019 Nguyen Huu Phuoc and contributors</div>
<ul className="list ma0 pa0 lh-copy fw5">
<li className="mb1">
<a href="https://twitter.com/nghuuphuoc" className="link flex items-center">
<span
className="bg-black-40 br-pill flex items-center justify-center mr2"
style={{ height: '24px', width: '24px' }}
>
<svg
viewBox="0 0 24 24"
className="w-60 h-60"
style={{
fill: "none",
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
}}
>
<path d={`M23,6.628l-2-0.5l1-2l-2.464,0.7c-1.809-1.688-4.644-1.589-6.332,0.22c-0.78,0.836-1.21,1.938-1.204,3.08v1 c-3.539,0.73-6.634-1.2-9.5-4.5c-0.5,2.667,0,4.667,1.5,6l-3-0.5c0.405,2.069,1.362,3.7,4,4l-2.5,1c1,2,2.566,2.31,5,2.5 c-1.893,1.353-4.174,2.054-6.5,2c12.755,5.669,20-2.664,20-10V8.3L23,6.628z`} />
</svg>
</span>
@nghuuphuoc
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<li>
<a
href="https://formvalidation.io"
style={{ textDecoration: 'none' }}
target="_blank"
title="FormValidation ~ best validation library for JavaScript"
>
form-validation,
</a>
</li>
<li className="mb1">
<a href="mailto: me@phuoc.ng" className="link flex items-center">
<span
className="bg-black-40 br-pill flex items-center justify-center mr2"
style={{ height: '24px', width: '24px' }}
>
<svg
viewBox="0 0 24 24"
className="w-60 h-60"
style={{
fill: "none",
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
}}
>
<path d={`M2.5,3.954h19c1.105,0,2,0.895,2,2v12c0,1.105-0.895,2-2,2h-19c-1.105,0-2-0.895-2-2v-12 C0.5,4.849,1.395,3.954,2.5,3.954z M22.911,4.536L12,13.454L1.089,4.536`} />
</svg>
</span>
me@phuoc.ng
<li>
<a
href="https://blur.page"
style={{ textDecoration: 'none' }}
target="_blank"
title="BlurPage ~ a browser extension to hide sensitive element on page"
>
blur-page,
</a>
</li>
<li className="mb1">
<a href="https://github.com/phuoc-ng/csslayout" className="link flex items-center">
<span
className="bg-black-40 br-pill flex items-center justify-center mr2"
style={{ height: '24px', width: '24px' }}
>
<svg
viewBox="0 0 24 24"
className="w-60 h-60"
style={{
fill: "none",
stroke: "#FFF",
strokeLinecap: "round",
strokeLinejoin: "round",
strokeWidth: 1,
}}
>
<path d={`M12,0.5C5.649,0.494,0.495,5.638,0.489,11.989c-0.005,4.959,3.17,9.362,7.876,10.925 c0.574,0.1,0.756-0.237,0.756-0.541c0-0.275,0.006-1.037,0-2c-3.2,0.694-3.861-1.515-3.861-1.515 c-0.211-0.695-0.664-1.292-1.276-1.682c-1.044-0.714,0.078-0.7,0.078-0.7c0.739,0.101,1.389,0.538,1.762,1.184 c0.65,1.185,2.139,1.619,3.324,0.968c0.007-0.004,0.015-0.008,0.022-0.012c0.053-0.581,0.312-1.125,0.73-1.532 c-2.553-0.292-5.238-1.278-5.238-5.686C4.646,10.255,5.07,9.15,5.847,8.312C5.495,7.32,5.535,6.232,5.959,5.269 c0,0,0.967-0.309,3.162,1.18c1.885-0.517,3.875-0.517,5.76,0c2.2-1.488,3.159-1.18,3.159-1.18c0.424,0.963,0.465,2.051,0.114,3.043 c0.777,0.839,1.201,1.945,1.183,3.088c0,4.42-2.689,5.391-5.251,5.674c0.557,0.559,0.844,1.333,0.787,2.12v3.184 c0,0.307,0.186,0.647,0.77,0.536c6.028-2.002,9.291-8.51,7.29-14.538C21.369,3.667,16.962,0.492,12,0.5z`} />
</svg>
</span>
github.com/phuoc-ng/csslayout
<li>
<a
href="https://react-pdf-viewer.dev"
style={{ textDecoration: 'none' }}
target="_blank"
title="React PDF Viewer ~ a PDF viewer made for React"
>
react-pdf-viewer,
</a>
</li>
</ul>
</div>
<li>&#125;</li>
</ul>
</div>
<div
style={{
alignItems: 'center',
display: 'flex',
flex: 1,
fontSize: '16px',
lineHeight: 1.5,
padding: '32px',
}}
>
<ul
style={{
fontWeight: 500,
lineHeight: 1.5,
listStyleType: 'none',
margin: 0,
padding: 0,
width: '100%',
}}
>
<li style={{ alignItems: 'center', display: 'flex' }}>
<h3
className="hljs-selector-class"
style={{
fontSize: '20px',
fontWeight: 700,
margin: 0,
padding: '0 8px 0 0',
}}
>
.about
</h3>
&#123;
</li>
<ul style={{ listStyleType: 'none', margin: 0, padding: '0 32px' }}>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div>twitter:</div>
<a
href="https://twitter.com/nghuuphuoc"
style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank"
>
@nghuuphuoc
</a>
<div>;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div>email:</div>
<a
href="mailto: me@phuoc.ng"
style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank"
>
me@phuoc.ng
</a>
<div>;</div>
</li>
<li style={{ alignItems: 'center', display: 'flex' }}>
<div>github:</div>
<a
href="https://github.com/phuoc-ng/csslayout"
style={{ marginLeft: 'auto', textDecoration: 'none' }}
target="_blank"
>
github.com/phuoc-ng/csslayout
</a>
<div>;</div>
</li>
</ul>
<li>&#125;</li>
</ul>
</div>
</div>
);

49
client/layouts/Layout.tsx
View File

@@ -11,6 +11,55 @@ const Layout: React.FC<{}> = ({ children }) => {
<div className="mw8 mb5 center">
{children}
<Footer />
<ul
style={{
fontSize: '14px',
lineHeight: 1.5,
listStyleType: 'none',
margin: '16px 0',
padding: 0,
}}
>
<li>this</li>
<li style={{ marginLeft: '16px' }}>
.madeWith([
<a href="https://reactjs.org" style={{ textDecoration: 'none' }}>react</a>,
<a href="https://www.typescriptlang.org" style={{ textDecoration: 'none' }}>typescript</a>
])
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => lazyLoad(
<a href="https://github.com/smooth-code/loadable-components" style={{ textDecoration: 'none' }}>
@loadable/component
</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => optimizeAndBundle(
<a href="https://webpack.js.org" style={{ textDecoration: 'none' }}>webpack</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => exportHtml(
<a href="https://github.com/stereobooster/react-snap" style={{ textDecoration: 'none' }}>
react-snap
</a>
))
</li>
<li style={{ marginLeft: '16px' }}>
.then(r => deploy(
<a href="https://www.netlify.com" style={{ textDecoration: 'none' }}>Netlify</a>
))
</li>
<li style={{ marginLeft: '16px' }}>.assert([scalableCode, superFastWebsite, seoFriendly])</li>
<li style={{ marginLeft: '16px' }}>
.done(
<a href="https://github.com/phuoc-ng/csslayout" style={{ textDecoration: 'none' }}>
/&#42; Give me 1 star &#42;/
</a>
) 🎉
</li>
</ul>
</div>
);
};

BIN
public/images/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 870 KiB

After

Width:  |  Height:  |  Size: 354 KiB

1
webpack.config.js
View File

@@ -71,6 +71,7 @@ module.exports = {
devServer: {
contentBase: path.join(__dirname, 'dist'),
historyApiFallback: true,
port: 1234,
},
plugins,
// See https://webpack.js.org/guides/caching/