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

Merge pull request #146 from phuoc-ng/add-cbs

Browse Source 
Add Check Browsers Support
This commit is contained in:
phuoc-ng
2020-09-21 23:27:09 +07:00
committed by GitHub
parent be81f6cbde 08bcea9124
commit 8903ddac6a
2 changed files with 89 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
README.md
View File

@@ -1,5 +1,3 @@
[![Vote for me on ProductHunt](https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=176424&theme=light)](https://www.producthunt.com/posts/css-layout?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-css-layout)
# CSS Layout # CSS Layout
A collection of popular layouts and patterns made with CSS: A collection of popular layouts and patterns made with CSS:
@@ -89,13 +87,54 @@ Be my friend on
## Products ## Products
You might be interesting in my products: You might be interested in my products:
| Product | Description | <table>
|---------------------------------------------------|-------------------------------------------------------------------| <tbody>
| [Blur Page](https://blur.page) | A browser extension to hide sensitive information on a web page | <tr valign="top">
| [CSS Layout](https://csslayout.io) | A collection of popular layouts and patterns made with CSS | <td width="25%" align="center">
| [Fake Numbers](https://fakenumbers.io) | Generate fake and valid numbers | <h3>1 LOC (3.3k★)</h3>
| [Form Validation](https://formvalidation.io) | The best validation library for JavaScript | <a href="https://1loc.dev">Favorite JavaScript utilities in single line of code</a>
| [HTML DOM](https://htmldom.dev) | How to manage HTML DOM with vanilla JavaScript | </td>
| [React PDF Viewer](https://react-pdf-viewer.dev) | A React component to view a PDF document | <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>

54
client/layouts/Footer.tsx
View File

@@ -15,39 +15,57 @@ const Footer: React.FC<{}> = () => {
<div> <div>
<h3 className='text-xl sm:text-2xl font-semibold mb-2'>Products</h3> <h3 className='text-xl sm:text-2xl font-semibold mb-2'>Products</h3>
<ul className='flex flex-wrap -ml-1 -mr-1'> <ul className='flex flex-wrap -ml-1 -mr-1'>
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
<a
href="https://1loc.dev"
rel="noopener noreferrer"
target="_blank"
title="1 LOC - favorite JavaScript utilities in single line of code"
>
<div className='font-semibold flex items-center'>
1 LOC
<span className='bg-green-600 font-normal ml-1 p-1 rounded text-sm text-white'>new</span>
</div>
<span className='text-gray-600'>favorite JavaScript utilities in single line of code</span>
</a>
</li>
<li className='w-1/2 sm:w-1/3 px-1 mb-6'> <li className='w-1/2 sm:w-1/3 px-1 mb-6'>
<a <a
href="https://blur.page" href="https://blur.page"
rel="noopener noreferrer" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="BlurPage - a browser extension to hide sensitive element on page" title="BlurPage - a browser extension to hide sensitive element on page"
> >
<div className='font-semibold'>Blur Page</div> <div className='font-semibold'>Blur Page</div>
<span className='text-gray-600'> <span className='text-gray-600'>a browser extension to hide sensitive element on page</span>
a browser extension to hide sensitive element on page </a>
</span> </li>
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
<a
href="https://checkbrowsers.support"
rel="noopener noreferrer"
target="_blank"
title="Check Browsers Support - a browser extension to check browser compatibility without leaving your tab"
>
<div className='font-semibold'>Check Browsers Support</div>
<span className='text-gray-600'>a browser extension to check browser compatibility without leaving your tab</span>
</a> </a>
</li> </li>
<li className='w-1/2 sm:w-1/3 px-1 mb-6'> <li className='w-1/2 sm:w-1/3 px-1 mb-6'>
<a <a
href="https://csslayout.io" href="https://csslayout.io"
rel="noopener noreferrer" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="CSS Layout - a collection of popular layouts and patterns made with CSS" title="CSS Layout - a collection of popular layouts and patterns made with CSS"
> >
<div className='font-semibold'>CSS Layout</div> <div className='font-semibold'>CSS Layout</div>
<span className='text-gray-600'> <span className='text-gray-600'>a collection of popular layouts and patterns made with CSS</span>
a collection of popular layouts and patterns made with CSS
</span>
</a> </a>
</li> </li>
<li className='w-1/2 sm:w-1/3 px-1 mb-6'> <li className='w-1/2 sm:w-1/3 px-1 mb-6'>
<a <a
href="https://fakenumbers.io" href="https://fakenumbers.io"
rel="noopener noreferrer" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="Fake Numbers - a JavaScript library to fake a number" title="Fake Numbers - a JavaScript library to fake a number"
> >
@@ -59,7 +77,6 @@ const Footer: React.FC<{}> = () => {
<a <a
href="https://formvalidation.io" href="https://formvalidation.io"
rel="noopener noreferrer" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="FormValidation - the best validation library for JavaScript" title="FormValidation - the best validation library for JavaScript"
> >
@@ -71,21 +88,17 @@ const Footer: React.FC<{}> = () => {
<a <a
href="https://htmldom.dev" href="https://htmldom.dev"
rel="noopener noreferrer" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="HTML DOM - Common tasks of managing HTML DOM with native API" title="HTML DOM - Common tasks of managing HTML DOM with native API"
> >
<div className='font-semibold'>HTML DOM</div> <div className='font-semibold'>HTML DOM</div>
<span className='text-gray-600'> <span className='text-gray-600'>common tasks of managing HTML DOM with vanilla JavaScript</span>
common tasks of managing HTML DOM with vanilla JavaScript
</span>
</a> </a>
</li> </li>
<li className='w-1/2 sm:w-1/3 px-1 mb-6'> <li className='w-1/2 sm:w-1/3 px-1 mb-6'>
<a <a
href="https://react-pdf-viewer.dev" href="https://react-pdf-viewer.dev"
rel="noopener noreferrer" rel="noopener noreferrer"
style={{ textDecoration: 'none' }}
target="_blank" target="_blank"
title="React PDF Viewer - a PDF viewer made for React" title="React PDF Viewer - a PDF viewer made for React"
> >
@@ -93,6 +106,17 @@ const Footer: React.FC<{}> = () => {
<span className='text-gray-600'>a PDF viewer made for React</span> <span className='text-gray-600'>a PDF viewer made for React</span>
</a> </a>
</li> </li>
<li className='w-1/2 sm:w-1/3 px-1 mb-6'>
<a
href="https://thisthat.dev"
rel="noopener noreferrer"
target="_blank"
title="this VS that - the differences between ___ and ___ in the front-end development"
>
<div className='font-semibold'>this VS that</div>
<span className='text-gray-600'>the differences between ___ and ___ in the front-end development</span>
</a>
</li>
</ul> </ul>
</div> </div>