diff --git a/README.md b/README.md index 55f6414..7b18808 100644 --- a/README.md +++ b/README.md @@ -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: - - - - - - - - - - - - - - - - - - - - - -
-

1 LOC (3.3kโ˜…)

- Favorite JavaScript utilities in single line of code - 		-

Blur Page

- A browser extension to hide sensitive information on a web page - 		-

Check Browsers Support

- A browser extension to check browser compatibility without leaving your tab - 		-

CSS Layout (2.7kโ˜…)

- A collection of popular layouts and patterns made with CSS -
-

Fake Numbers

- Generate fake and valid numbers - 		-

Form Validation

- The best validation library for JavaScript - 		-

HTML DOM (3.1kโ˜…)

- How to manage HTML DOM with vanilla JavaScript - 		-

React PDF Viewer

- A React component to view a PDF document -
-

this VS that

- The differences between ___ and ___ in the front-end development -
+_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) diff --git a/client/index.css b/client/index.css index 4f05de5..99e0e27 100644 --- a/client/index.css +++ b/client/index.css @@ -88,6 +88,7 @@ pre { box-shadow: none; color: #FFF; font-family: "Source Code Pro", monospace; + font-size: 1.25rem; height: 100%; line-height: 1.5; margin: 0px; diff --git a/client/index.html b/client/index.html index 7bc0488..f1ed7da 100644 --- a/client/index.html +++ b/client/index.html @@ -4,6 +4,19 @@ CSS layout + + + + + + + + + + + + + diff --git a/public/assets/screenshot.png b/public/assets/screenshot.png index 500b2b4..f04aa94 100644 Binary files a/public/assets/screenshot.png and b/public/assets/screenshot.png differ