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

Merge pull request #59 from phuoc-ng/drop-area

Browse Source 
Add drop area
This commit is contained in:
phuoc-ng
2019-11-27 23:41:59 +07:00
committed by GitHub
parent cf9ae9ed51 0d4e44405a
commit afde58274e
9 changed files with 149 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -20,7 +20,7 @@ I usually don't want to include all of them in my project.
So I collect most popular layouts and components that can be built with pure CSS.
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.
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
@@ -33,8 +33,12 @@ this
.then(r => optimizeAndBundle(webpack))
.then(r => exportHtml(react-snap))
.then(r => deploy(Netlify))
.assert([scalableCode, superFastWebsite, seoFriendly])
.finally(/* Give me 1 star */) 🎉
.then(r => {
expect(r).is(scalableCode);
expect(r).is(superFastWebsite);
expect(r).is(seoFriendly);
})
.finally(() => {/* Give me 1 star */}) 🎉
~~~
## Running it on local

1
client/App.tsx
View File

@@ -22,6 +22,7 @@ const App = () => {
<Route exact={true} path='/docked-at-corner'><DetailsLoader pattern={Pattern.DockedAtCorner} /></Route>
<Route exact={true} path='/dot-leader'><DetailsLoader pattern={Pattern.DotLeader} /></Route>
<Route exact={true} path='/dot-navigation'><DetailsLoader pattern={Pattern.DotNavigation} /></Route>
<Route exact={true} path='/drop-area'><DetailsLoader pattern={Pattern.DropArea} /></Route>
<Route exact={true} path='/feature-list'><DetailsLoader pattern={Pattern.FeatureList} /></Route>
<Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern={Pattern.FixedAtCorner} /></Route>
<Route exact={true} path='/holy-grail'><DetailsLoader pattern={Pattern.HolyGrail} /></Route>

8
client/Explore.tsx
View File

@@ -58,13 +58,16 @@ const Home = () => {
fontSize: '24px',
fontWeight: 300,
lineHeight: 1.5,
margin: 0,
padding: '32px 0',
margin: '32px 0 16px 0',
padding: '0',
textAlign: 'center',
}}
>
Here is the collection of patterns
</h2>
<div style={{ marginBottom: '32px', textAlign: 'center' }}>
All covers you see in this page are made with CSS only. Inspect them! 🎉
</div>
<section>
<Heading title="Layouts" />
@@ -90,6 +93,7 @@ const Home = () => {
<CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.InputAddOn} />

23
client/Home.tsx
View File

@@ -55,6 +55,28 @@ const Home = () => {
a collection of popular layouts and patterns made with CSS
</h2>
<div style={{ display: 'flex', lineHeight: 1.5 }}>
<div style={{ flex: 1, padding: '24px'}} className="drop-cap">
<div style={{ marginBottom: '16px' }}>
Components, patterns and layouts are things you have to deal with everyday.
</div>
<div>There are a lot of CSS frameworks that provide rich set of layouts and patterns,
but I usually don't want to include all of them in my project.</div>
</div>
<div style={{ flex: 1, padding: '24px'}} className="drop-cap">
<div style={{ marginBottom: '16px' }}>
So that I collect most popular layouts and patterns that can be built with pure CSS.
</div>
<div>They are powered by modern CSS features such as flexbox and CSS grid.</div>
</div>
<div style={{ flex: 1, padding: '24px'}} className="drop-cap">
<div style={{ marginBottom: '16px' }}>
Starting with the most basic part, you can customize easily for each specific need.
</div>
<div>By composing them, you can have any possible layout that exists in the real life.</div>
</div>
</div>
<div
className="hljs"
style={{
@@ -183,6 +205,7 @@ const Home = () => {
<CoverCard pattern={Pattern.DockedAtCorner} />
<CoverCard pattern={Pattern.DotLeader} />
<CoverCard pattern={Pattern.DotNavigation} />
<CoverCard pattern={Pattern.DropArea} />
<CoverCard pattern={Pattern.FeatureList} />
<CoverCard pattern={Pattern.FixedAtCorner} />
<CoverCard pattern={Pattern.InputAddOn} />

1
client/constants/Pattern.ts
View File

@@ -7,6 +7,7 @@ enum Pattern {
DockedAtCorner = 'Docked at corner',
DotLeader = 'Dot leader',
DotNavigation = 'Dot navigation',
DropArea = 'Drop area',
FeatureList = 'Feature list',
FixedAtCorner = 'Fixed at corner',
HolyGrail = 'Holy grail',

9
client/index.css
View File

@@ -14,3 +14,12 @@ input[type="email"], input[type="number"], input[type="password"], input[type="t
code {
font-size: 14px;
}
.drop-cap:first-letter {
border: 2px solid;
float: left;
font-size: 64px;
font-weight: 700;
line-height: 1;
margin: 0 8px 0 0;
padding: 0 8px;
}

40
client/patterns/drop-area/Cover.tsx Normal file
View File

@@ -0,0 +1,40 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
import Line from '../../placeholders/Line';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '4px dashed rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
width: '100%',
}}
>
<div style={{ marginBottom: '4px', width: '60%' }}><Line /></div>
<div style={{ marginBottom: '4px', width: '50%' }}><Line /></div>
<div style={{ width: '30%' }}><Line /></div>
</div>
</div>
</Frame>
);
};
export default Cover;

61
client/patterns/drop-area/Details.tsx Normal file
View File

@@ -0,0 +1,61 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Drop area">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
alignItems: 'center',
border: '4px dashed rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
display: 'flex',
flexDirection: 'column',
height: '80%',
justifyContent: 'center',
width: '80%',
}}
>
<div style={{ width: '40%' }}>
<Block justify='center' numberOfBlocks={10} />
</div>
</div>
</div>
)}
source={`
<div style="
/* Content is centered */
align-items: center;
display: flex;
justify-content: center;
/* Border */
border: 4px dashed rgba(0, 0, 0, 0.3),
border-radius: 4px;
">
...
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -11,6 +11,7 @@
<url><loc>https://csslayout.io/centering</loc></url>
<url><loc>https://csslayout.io/docked-at-corner</loc></url>
<url><loc>https://csslayout.io/dot-navigation</loc></url>
<url><loc>https://csslayout.io/drop-area</loc></url>
<url><loc>https://csslayout.io/feature-list</loc></url>
<url><loc>https://csslayout.io/fixed-at-corner</loc></url>
<url><loc>https://csslayout.io/input-addon</loc></url>