Skip to content

Commit

Permalink
added flexbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@ccatto
ccatto committed Jun 18, 2024
1 parent 053d17f commit 34260ad
Show file tree
Hide file tree
Showing 8 changed files with 286 additions and 7 deletions.
171 changes: 171 additions & 0 deletions app/(public)/code/css-styles/flexbox/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
import { Metadata } from 'next';
import JumbotronCattoFlexible from '@/app/components/JumbotronCattoFlexible/JumbotronCattoFlexible';
import CommandPromptDisplay from '@/app/components/Utils/CommandPromptDisplay/CommandPromptDisplay';
import SyntaxHighlightingReactCatto from '@/app/components/Utils/SyntaxHighlightingReactCatto/SyntaxHighlightingReactCatto';
const codeBlock =
"<div className='flex w-full bg-pink-400'>\n <div className='bg-orange-300 text-black'>Div 1</div>\n <div className='bg-blue-400 text-black'>2nd Div</div>\n <div className='bg-green-400 text-black'>3rd div</div>\n</div>";
const codeBlock2 =
"<div className='flex w-full'>\n <div className='flex-1 bg-orange-300 text-black'>Div 1</div>\n <div className='flex-1 bg-blue-400 text-black'>2nd Div</div>\n <div className='flex-1 bg-green-400 text-black'>3rd div</div>\n</div>";
const codeBlock3 =
"<div className='flex flex-col w-full'>\n <div className='flex-1 bg-orange-300 text-black'>Div 1</div>\n <div className='flex-1 bg-blue-400 text-black'>2nd Div</div>\n <div className='flex-1 bg-green-400 text-black'>3rd div</div>\n</div>";
const codeBlock4 =
"<div className='flex flex-col w-full'>\n <div className='flex-[10%] bg-orange-300 text-black'>Div 1</div>\n <div className='flex-[80%] bg-blue-400 text-black'>2nd Div</div>\n <div className='flex-[10%] bg-green-400 text-black'>3rd div</div>\n</div>";
const codeBlock5 =
"<div className='flex flex-col w-full'>\n <div className='flex-1 bg-orange-300 text-black'>Div 1</div>\n <div className='flex-1 bg-blue-400 text-black'>2nd Div</div>\n <div className='flex-1 bg-green-400 text-black'>3rd div</div>\n</div>";
const codeBlock5a =
"<div className='flex justify-center h-20 w-96 bg-orange-300 text-black'>\n justify-center(horizontally)\n</div>";
const codeBlock5b = '<div className="flex items-center h-20 w-96 bg-orange-300 text-black">\n items-center(vertically)\n</div>';
const codeBlock6 =
"<div className='flex flex-col w-full'>\n <div className='flex-1 bg-orange-300 text-black'>Div 1</div>\n <div className='flex-1 bg-blue-400 text-black'>2nd Div</div>\n <div className='flex-1 bg-green-400 text-black'>3rd div</div>\n</div>";

export const metadata: Metadata = {
title: 'Chris Catto Code CSS-Styles Flexbox',
description: 'Chris Catto Code CSS-Styles Flexbox',
};

export default function Page() {
return (
<div className="flex h-full w-full flex-col flex-nowrap ">
<div className="flex-[20]">
<JumbotronCattoFlexible
title="CSS-Styles Flexbox"
description="The CSS3 Flexbox is a layout that allows responsive elements within a container to be automatically arranged depending on viewport size."
/>
</div>
<hr className="p-0" />

<div className="flex-[80] p-2 dark:bg-gray-700">
<h2 className="mb-4 inline-block text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white">
Flexbox examples to learn by doing; please note we will be utlizing TailwindCSS classes.
</h2>
<h4>
For these next code examples we have a container & 3 children
</h4>
<hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
<h6>
Ex. 1: only the container has the display:flex
</h6>
<p>
So as we see the the children are now on the same row not all stacked if we didn't use the flex attributes.
</p>
<br />
<div className='flex w-full bg-pink-400'>
<div className='bg-orange-300 text-black'>
Div 1
</div>
<div className='bg-blue-400 text-black'>
2nd Div
</div>
<div className='bg-green-400 text-black'>
3rd div
</div>
</div>
<SyntaxHighlightingReactCatto
codeString={codeBlock}
/>
<hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
<h6>
Ex. 2: Container has the display:flex && children have flex-1 specifically: flex: 1 1 0%
</h6>
<br />
<div className='flex w-full'>
<div className='flex-1 bg-orange-300 text-black'>
Div 1
</div>
<div className='flex-1 bg-blue-400 text-black'>
2nd Div
</div>
<div className='flex-1 bg-green-400 text-black'>
3rd div
</div>
</div>
<SyntaxHighlightingReactCatto
codeString={codeBlock2}
/>
<hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
<h6>
Ex. 3: Let's take a look at flex-direction column. Adding the flex-direction: column; will make the children div's to stack
</h6>
<br />
<div className='flex flex-col w-full'>
<div className='flex-1 bg-orange-300 text-black'>
Div 1
</div>
<div className='flex-1 bg-blue-400 text-black'>
2nd Div
</div>
<div className='flex-1 bg-green-400 text-black'>
3rd div
</div>
</div>
<SyntaxHighlightingReactCatto
codeString={codeBlock3}
/>
<hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
<h6>
Ex. 4: Let's take a look at flex with percent inside a child. Instead of just flex-1 we can use a percent:
</h6>
<br />
<div className='flex w-full'>
<div className='flex-[10%] bg-orange-300 text-black'>
Div 1
</div>
<div className='flex-[80%] bg-blue-400 text-black'>
2nd Div
</div>
<div className='flex-[10%] bg-green-400 text-black'>
3rd div
</div>
</div>
<SyntaxHighlightingReactCatto
codeString={codeBlock4}
/>
<hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
<h6>
Ex. 5: Let's take a look aligning. Adding the justify-content: center; will align horizontally & items-center will align vertically:
</h6>
<br />
<p>
Simple justify-center example
</p>
<br />
<div className='flex justify-center h-20 w-96 bg-orange-300 text-black'>
justify-center(horizontally)
</div>
<SyntaxHighlightingReactCatto
codeString={codeBlock5a}
/>
<br />
<p>
Simple align-items: center; example
</p>
<br />
<div className='flex items-center h-20 w-96 bg-orange-300 text-black'>
items-center(vertically)
</div>
<SyntaxHighlightingReactCatto
codeString={codeBlock5b}
/>
<hr className="m-5 mx-auto my-4 h-1 w-48 rounded border-0 bg-blue-100 dark:bg-blue-700 md:my-10" />
<h6>
Ex. 6: Let's take a look aligning & centering in a nested flexbox. Adding the flex-direction: column; will make the children div's to stack
</h6>
<br />
<div className='flex w-full h-20'>
<div className='flex-1 bg-orange-300 text-black'>
<div className='flex justify-center h-full'>Div 1</div>
</div>
<div className='flex-1 bg-blue-400 text-black'>
<div className='flex items-center h-full'>2nd Div</div>
</div>
<div className='flex-1 justify-center items-center bg-green-400 text-black'>
<div className='flex justify-center items-center h-full'>3rd Div</div>
</div>
</div>
<SyntaxHighlightingReactCatto
codeString={codeBlock5}
/>
</div>
</div>
);
}
23 changes: 23 additions & 0 deletions app/(public)/code/css-styles/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React, { ReactNode, useState } from 'react';
import JSNavDrawerCatto from '@/app/components/JavaScript/JSNavDrawerCatto/JSNavDrawerCatto';
import CSSSideNavLinkList from '@/app/components/AtomicDesign/molecules/CSSSideNavLinkList/CSSSideNavLinkList';

type LayoutProps = {
children: ReactNode;
};

const CSSLayout = ({ children }: LayoutProps) => {
return (
<>
<div className="flex min-h-[calc(100vh-27rem)]">
<aside className="h-full lg:flex-[20]">
<CSSSideNavLinkList />
</aside>
<article className="h-full lg:flex-[80]">{children}</article>
</div>
<hr className="m-3" />
</>
);
};

export default CSSLayout;
8 changes: 4 additions & 4 deletions app/(public)/code/css-styles/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function Page() {
<ul className="space-y-2 font-medium">
<li>
<a
href="/code/css-styles/overview"
href="/code/css-styles/flexbox"
className="group flex items-center rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
>
<svg
Expand All @@ -37,10 +37,10 @@ export default function Page() {
d="M6,9 C6.55228,9 7,9.44772 7,10 L7,14 C7,14.5523 6.55228,15 6,15 L2,15 C1.44772,15 1,14.5523 1,14 L1,10 C1,9.44772 1.44772,9 2,9 L6,9 Z M14,13 C14.5523,13 15,13.4477 15,14 C15,14.5523 14.5523,15 14,15 L10,15 C9.44772,15 9,14.5523 9,14 C9,13.4477 9.44772,13 10,13 L14,13 Z M5,11 L3,11 L3,13 L5,13 L5,11 Z M14,9 C14.5523,9 15,9.44772 15,10 C15,10.5523 14.5523,11 14,11 L10,11 C9.44772,11 9,10.5523 9,10 C9,9.44772 9.44772,9 10,9 L14,9 Z M6,1 C6.55228,1 7,1.44772 7,2 L7,6 C7,6.55228 6.55228,7 6,7 L2,7 C1.44772,7 1,6.55228 1,6 L1,2 C1,1.44772 1.44772,1 2,1 L6,1 Z M14,5 C14.5523,5 15,5.44772 15,6 C15,6.51283143 14.613973,6.93550653 14.1166239,6.9932722 L14,7 L10,7 C9.44772,7 9,6.55228 9,6 C9,5.48716857 9.38604429,5.06449347 9.88337975,5.0067278 L10,5 L14,5 Z M5,3 L3,3 L3,5 L5,5 L5,3 Z M14,1 C14.5523,1 15,1.44772 15,2 C15,2.55228 14.5523,3 14,3 L10,3 C9.44772,3 9,2.55228 9,2 C9,1.44772 9.44772,1 10,1 L14,1 Z"
/>
</svg>
<span className="ms-3">Next.js Overview</span>
<span className="ms-3">CSS Flexbox</span>
</a>
</li>
<li>
{/* <li>
<a
href="/code/css-styles/fundamentals"
className="group flex items-center rounded-lg p-2 hover:bg-gray-100 dark:hover:bg-gray-700 dark:hover:text-white"
Expand Down Expand Up @@ -86,7 +86,7 @@ export default function Page() {
</a>
</li>
</ul>
</li>
</li> */}
</ul>
</div>
{/* <hr className="m-3" /> */}
Expand Down
77 changes: 77 additions & 0 deletions app/components/AtomicDesign/molecules/CSSSideNavLinkList/CSSSideNavLinkList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
'use client';
import Link from 'next/link';

const CSSSideNavLinkList = () => {

return (
<>
<div className="dark:text-[text-[#E2E8F0] hidden h-full overflow-y-auto bg-gray-50 px-3 py-4 text-[#E2E8F0] dark:bg-[#090A15] lg:block ">
<ul className="space-y-2 font-medium">
<li>
<Link
href="/code/css-styles"
className="group flex items-center rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>
<svg
className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 18 21"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"
></path>
</svg>
<span className="ms-3">CSS Home</span>
</Link>
</li>
<li>
<Link
href="/code/css-styles/flexbox"
className="group flex items-center rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>
<svg
className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 18 21"
>
<path
fillRule="evenodd"
d="M6,9 C6.55228,9 7,9.44772 7,10 L7,14 C7,14.5523 6.55228,15 6,15 L2,15 C1.44772,15 1,14.5523 1,14 L1,10 C1,9.44772 1.44772,9 2,9 L6,9 Z M14,13 C14.5523,13 15,13.4477 15,14 C15,14.5523 14.5523,15 14,15 L10,15 C9.44772,15 9,14.5523 9,14 C9,13.4477 9.44772,13 10,13 L14,13 Z M5,11 L3,11 L3,13 L5,13 L5,11 Z M14,9 C14.5523,9 15,9.44772 15,10 C15,10.5523 14.5523,11 14,11 L10,11 C9.44772,11 9,10.5523 9,10 C9,9.44772 9.44772,9 10,9 L14,9 Z M6,1 C6.55228,1 7,1.44772 7,2 L7,6 C7,6.55228 6.55228,7 6,7 L2,7 C1.44772,7 1,6.55228 1,6 L1,2 C1,1.44772 1.44772,1 2,1 L6,1 Z M14,5 C14.5523,5 15,5.44772 15,6 C15,6.51283143 14.613973,6.93550653 14.1166239,6.9932722 L14,7 L10,7 C9.44772,7 9,6.55228 9,6 C9,5.48716857 9.38604429,5.06449347 9.88337975,5.0067278 L10,5 L14,5 Z M5,3 L3,3 L3,5 L5,5 L5,3 Z M14,1 C14.5523,1 15,1.44772 15,2 C15,2.55228 14.5523,3 14,3 L10,3 C9.44772,3 9,2.55228 9,2 C9,1.44772 9.44772,1 10,1 L14,1 Z"
/>
</svg>
<span className="ms-3">Flexbox</span>
</Link>
</li>
{/* <li>
<Link
href="/code/orm/prisma/updates"
className="group flex items-center rounded-lg p-2 text-gray-900 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-700"
>
<svg
className="h-5 w-5 flex-shrink-0 text-gray-500 transition duration-75 group-hover:text-gray-900 dark:text-gray-400 dark:group-hover:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 18 21"
>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M2 6C2 4.34315 3.34315 3 5 3H19C20.6569 3 22 4.34315 22 6V18C22 19.6569 20.6569 21 19 21H5C3.34315 21 2 19.6569 2 18V6ZM5 5C4.44772 5 4 5.44772 4 6V7H20V6C20 5.44772 19.5523 5 19 5H5ZM4 18V9H20V18C20 18.5523 19.5523 19 19 19H5C4.44772 19 4 18.5523 4 18ZM7.70711 11.2929C7.31658 10.9024 6.68342 10.9024 6.29289 11.2929C5.90237 11.6834 5.90237 12.3166 6.29289 12.7071L7.58579 14L6.29289 15.2929C5.90237 15.6834 5.90237 16.3166 6.29289 16.7071C6.68342 17.0976 7.31658 17.0976 7.70711 16.7071L9.70711 14.7071C10.0976 14.3166 10.0976 13.6834 9.70711 13.2929L7.70711 11.2929Z"
/>
</svg>
<span className="ms-3">Making updates</span>
</Link>
</li> */}
</ul>
</div>
</>
);
};
export default CSSSideNavLinkList;
8 changes: 8 additions & 0 deletions app/components/Footer/FooterLinksTopCatto.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,6 +610,14 @@ const FooterLinksTopCatto = () => {
Environment Setup
</Link>
</h2>
<h2 className="mb-6 mt-5 text-sm font-semibold uppercase text-gray-900 dark:text-white">
<Link
href="/code/css-styles"
className="hover:underline"
>
CSS - Styles
</Link>
</h2>
</ul>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/components/HomeJumbotronCatto/HomeJumbotronCatto.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const HomeJumbotronCatto = () => {
strokeLinejoin="round"
strokeWidth="2"
d="M1 5h12m0 0L9 1m4 4L9 9"
/>
/>p
</svg>
</Link>
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/components/NavCatto/NavWrapperCatto.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import NavLinksCatto from './NavLinksCatto';
const NavWrapperCatto = () => {
return (
<>
{/* Desktop */}
<div className="hidden w-full lg:block">
<nav className="flex h-20 items-center justify-center border-gray-200 bg-white dark:bg-gray-900">
{/* Desktop */}
<div className="ml-auto mr-auto flex w-[70%]">
<div className="basis-1/4">
<NavLeftNameImageCatto />
Expand Down
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default async function RootLayout({
<h1 className="text-white">new</h1>
<hr />
<div className="mt-20 flex h-full">
<div className="h-full flex-[1] bg-gradient-to-r from-gray-500 to-gray-900"></div>
<div className="flex-[1] bg-gradient-to-r from-gray-500 to-gray-900"></div>
<main className="flex-[98] bg-gray-700">{children}</main>
<div className="flex-[1] bg-gradient-to-r from-gray-900 to-gray-500"></div>
</div>
Expand Down

0 comments on commit 34260ad

Please sign in to comment.