initial
This commit is contained in:
nm1
commit
74ae93a96e
27 changed files with 94691 additions and 0 deletions
|
|
@ -0,0 +1,40 @@
|
|||
Setup
|
||||
- use cdn
|
||||
include link and script tags with their links
|
||||
- with syncfusion
|
||||
https://ej2.syncfusion.com/aspnetcore/documentation/getting-started/vscode : important
|
||||
https://help.syncfusion.com/aspnet-core/gettingstarted/getting-started-2-0
|
||||
https://ej2.syncfusion.com/aspnetcore/documentation/nuget-packages
|
||||
to be downloaded from here
|
||||
https://www.nuget.org/packages/Syncfusion.EJ2.AspNet.Core/
|
||||
- licensing
|
||||
- to validate it with license, 2 ways
|
||||
1. entry point file
|
||||
```cs
|
||||
using Syncfusion.Licensing;
|
||||
|
||||
public class Startup
|
||||
{
|
||||
public void ConfigureServices(IServiceCollection services)
|
||||
{
|
||||
// Register the Syncfusion license
|
||||
SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY"); // Replace with your actual license key
|
||||
|
||||
// Other service registrations
|
||||
services.AddControllersWithViews();
|
||||
}
|
||||
|
||||
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
|
||||
{
|
||||
// Existing code for middleware configuration...
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
2. in razor pages
|
||||
```cshtml
|
||||
@using Syncfusion.Licensing
|
||||
@{
|
||||
SyncfusionLicenseProvider.RegisterLicense("YOUR_LICENSE_KEY"); // Replace with your actual license key
|
||||
}
|
||||
```
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
tips
|
||||
|
||||
- whenever using row, it is recommended to use `m-0` to remove unpredicatable margin.
|
||||
- tabs approach : either spaces between them or white background wit opacity 0.1 to 0.3.
|
||||
https://youtu.be/7vVDxpCY7YY
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
validation
|
||||
|
||||
- for browser default validation for no custom validation rules use something like this
|
||||
```html
|
||||
<form class="needs-valiation">
|
||||
<input type="text" required>
|
||||
</form>
|
||||
```
|
||||
|
||||
```js
|
||||
const forms = document.querySelectorAll(".needs-validation");
|
||||
|
||||
// Loop over them and prevent submission
|
||||
Array.from(forms).forEach((form) => {
|
||||
form.querySelector("input").addEventListener("blur", (e) => {
|
||||
console.log("detected");
|
||||
form.classList.add("was-validated");
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
form.addEventListener("submit", (event) => {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
console.log("submit listened");
|
||||
// event.preventDefault();
|
||||
// if (!form.checkValidity()) {
|
||||
// console.log("preventing default");
|
||||
// event.preventDefault();
|
||||
// event.stopPropagation();
|
||||
// }
|
||||
|
||||
// form.classList.add("was-validated");
|
||||
});
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
|
||||
Using custom rules for validation
|
||||
19
joplin notion extension/Web Development/CSS/Cards.md
Normal file
19
joplin notion extension/Web Development/CSS/Cards.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
Cards
|
||||
|
||||
```html
|
||||
<div style="display: flex;">
|
||||
<div style="display:flex;flex-direction:column">
|
||||
<div style="padding:100px;margin:10px;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);border:1px solid #ddd;display:flex;justify-content:center;align-items:center">
|
||||
Users
|
||||
</div>
|
||||
<div style="padding:100px;margin:10px;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);border:1px solid #ddd;display:flex;justify-content:center;align-items:center">
|
||||
Reviews
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; flex: 1 1 0%;">
|
||||
<div style="padding:100px;margin:10px;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2);border:1px solid #ddd;display:flex;justify-content:center;align-items:center">
|
||||
Notifications
|
||||
</div>
|
||||
</div>
|
||||
</div>;
|
||||
```
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
Custom upload File Button
|
||||
|
||||
```html
|
||||
<input type="file" id="actual-btn"/>
|
||||
<label for="actual-btn">Choose File</label>
|
||||
```
|
||||
|
||||
```css
|
||||
.input{
|
||||
display: none;
|
||||
}
|
||||
|
||||
label {
|
||||
background-color: indigo;
|
||||
color: white;
|
||||
padding: 0.5rem;
|
||||
font-family: sans-serif;
|
||||
border-radius: 0.3rem;
|
||||
cursor: pointer;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
or instead of label div or other element can be used too
|
||||
|
||||
```html
|
||||
<!-- default HTML file upload button -->
|
||||
<input type="file" id="actual-btn" style="display: none;" />
|
||||
|
||||
<!-- custom file upload button using a <button> element -->
|
||||
<div onclick="document.getElementById('actual-btn').click();">Choose File</button>
|
||||
|
||||
```
|
||||
|
||||
24
joplin notion extension/Web Development/CSS/Extras.md
Normal file
24
joplin notion extension/Web Development/CSS/Extras.md
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
Extras
|
||||
|
||||
- superscript
|
||||
```css
|
||||
.superscript {
|
||||
position: relative;
|
||||
top: -0.5em;
|
||||
font-size: 80%;
|
||||
}
|
||||
```
|
||||
- mouseglow
|
||||
https://github.com/anishshobithps/anishshobithps.com/blob/main/src/components/shared/Mouseglow.tsx
|
||||
- uiverse
|
||||
https://uiverse.io/ : library of customizable UI made with css and tailwind
|
||||
- wrapping of characters in word
|
||||
```css
|
||||
.text{
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
```
|
||||
- chartjs
|
||||
https://www.chartjs.org/docs/latest/samples/legend/html.html : for custom html legend
|
||||
https://www.chartjs.org/docs/latest/ : docs
|
||||
|
||||
4
joplin notion extension/Web Development/CSS/Resources.md
Normal file
4
joplin notion extension/Web Development/CSS/Resources.md
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
Resources
|
||||
|
||||
- https://uiverse.io/ : library of customizable UI made with css and tailwind
|
||||
- tweakcn.com
|
||||
58
joplin notion extension/Web Development/CSS/Snippet links.md
Normal file
58
joplin notion extension/Web Development/CSS/Snippet links.md
Normal file
|
|
@ -0,0 +1,58 @@
|
|||
Snippet links
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid034rP3kxNEFqQU2jYos2jfbv1mwUTfX3kZbLMe3z23U7x92BzHGxrhjz8utFFqcA8Xl/ : Glowing Login Form
|
||||
|
||||
|
||||
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02TSuLtC5v89hCWJKHANqRfLq6iktdixWGVbEFzGhmn71nZqVqKyWu1zdA5gfGrQCxl/ : Animated Skills Bar
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid035uybxxxRNiTF3MmPiYN49Ncd8UnHy7Er7fX9EwEoAsG8Hn4LwT1UCy22NifkHRJCl/ : Dynamic Stopwatch
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02bCCMncYSKD8RLL8krApogqk6NAj9uQjvbqnzgLwzZr9tgx6XRMzEazvXMnAyBz6yl/?app=fbl : Responsive Double Vertical Slider
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02TEtkpYYQt1kxXDuLhzavafw99rBwWxdXAShXYz2EsaaaYxjWUDMNZMgMvbMnXCgZl/?app=fbl : Digital and Analog Clock Theme
|
||||
|
||||
|
||||
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02TrHUgSbCnUB2ZrJjcY6TyU4Mv4MEJCrnaPWqGmQr8JEdptHHf9Bq4XYmKhwHTMWPl/?app=fbl : Random choice picker using HTML CSS and JavaScript
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02s5HJkurMTMwA4qPmBMdUD3uKti429cooyppwtx16zUfBKy1mQitnWwuo8wYFWGkcl/ : Animated navigation bar using HTML CSS and JavaScript
|
||||
- https://www.facebook.com/groups/codingthai9/permalink/686919516573076/ : Background Slider
|
||||
- 
|
||||
|
||||
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02PJsKcfcQCZFoMjJ7f8GSszkEXrKJiaNE7gq19pGB4bXSMh1imT4eNogfEPV9P8tWl/ : Responsive movie app using HTML CSS and JavaScript
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid0ajfXteMg4snc8EAW9pEqZZhH6npPYPYmusMXJGR2tJdhP8ekqPZQxSap4LNnbLbel/?app=fbl : Responsive increment counter using HTML CSS and JavaScript
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02jefi6jVQFYitCZ3YBaF5FadTessjiR4f29hVyokzfp1FrKCKL83Bod2tmet2KxRpl/ : Responsive Login Form
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02y8iqoGnc9TwseJEMFG8MMn3LcndJgqmdf3VJ7yqodxuMn8r8VnyALspYPaYH4mk4l/ : Social Share Button
|
||||
- https://www.facebook.com/groups/codingthai9/permalink/693400445924983/ : Split Landing page
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid0Kk2q1oH2jU7Z8hJVZ3uNSgQioF18wenpUY4WKW7nJV7Z6jxiLXxN46GT4UmN5hwwl/ : Progress Steps Bar
|
||||
- https://www.facebook.com/100076552205538/posts/pfbid02ibjWHEPGTQeEwBYqU6nf1tGDLduSuvNigDtMDMfxFXDtWY9CBYkTvhdr2UuFBSADl/ : Creating a heart
|
||||
|
||||
|
||||
295
joplin notion extension/Web Development/CSS/Snippets/Login.md
Normal file
295
joplin notion extension/Web Development/CSS/Snippets/Login.md
Normal file
|
|
@ -0,0 +1,295 @@
|
|||
Login
|
||||
|
||||
```html
|
||||
<!--<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<style id="webmakerstyle">
|
||||
body{
|
||||
background-color: steelblue;
|
||||
color: white;
|
||||
font-family: 'Muli', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container{
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
padding : 20px 40px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.container h1{
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.container a{
|
||||
text-decoration: none;
|
||||
color: lightblue;
|
||||
}
|
||||
|
||||
.btn{
|
||||
cursor: pointer;
|
||||
display :inline-block;
|
||||
width: 100%;
|
||||
background: lightblue;
|
||||
padding: 15px;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn:focus{
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn:active{
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.text{
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form-control{
|
||||
position: relative;
|
||||
margin : 20px 0 40px;
|
||||
width : 300px;
|
||||
}
|
||||
|
||||
.form-control input{
|
||||
background-color : transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid lightblue;
|
||||
/* border-bottom-color : lightblue; */
|
||||
|
||||
display : block;
|
||||
width : 100%;
|
||||
padding: 15px 0;
|
||||
font-size : 18px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.form-control input:focus,
|
||||
.form-control input:valid{
|
||||
|
||||
outline: 0;
|
||||
border-bottom-color : lightblue;
|
||||
}
|
||||
|
||||
.form-control label{
|
||||
position : absolute;
|
||||
top: 15px;
|
||||
left : 0;
|
||||
pointer-events : none;
|
||||
color: lightgray;
|
||||
font-size: 18px;
|
||||
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.form-control label {
|
||||
display : inline-block;
|
||||
font-size : 18px;
|
||||
min-width : 5px;
|
||||
transition : 0.3s cubic-bezier(0.68,-0.55,0.265,1.55);
|
||||
}
|
||||
|
||||
.form-control input:focus ~ label ,
|
||||
.form-control input:valid ~ label {
|
||||
color: lightblue;
|
||||
transform : translateY(-30px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Please Login</h1>
|
||||
<form action="">
|
||||
<div class="form-control">
|
||||
<input type="text" required>
|
||||
<label for="">Email</label>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<input type="password" required>
|
||||
<label for="">Password</label>
|
||||
</div>
|
||||
|
||||
<button class="btn">Login</button>
|
||||
|
||||
<p class="text">Don't have an account? <a href="#">Register</a></p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// const labels=document.querySelectorAll('.form-control label')
|
||||
//
|
||||
// labels.forEach(label=>{
|
||||
// label.innerHTML=label.innerText.split('').map( (letter,idx)=> `span style="transition-delay:${idx*50}ms">${letter}</span> ` ).join('')
|
||||
// })
|
||||
// # sourceURL=userscript.js
|
||||
</script>
|
||||
</body>
|
||||
</html>-->
|
||||
|
||||
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
<style id="webmakerstyle">
|
||||
body {
|
||||
background-color: #f0f0f0; /* Light background for the body */
|
||||
color: #333; /* Dark text color for readability */
|
||||
font-family: 'Muli', sans-serif;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #ffffff; /* White background for the container */
|
||||
padding: 20px 40px;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: add subtle shadow for depth */
|
||||
}
|
||||
|
||||
.container h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.container a {
|
||||
text-decoration: none;
|
||||
color: #333; /* Dark color for links */
|
||||
}
|
||||
|
||||
.container a:hover{
|
||||
color : grey;
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
background: #333; /* Dark background for button */
|
||||
color: #fff; /* White text color for button */
|
||||
padding: 15px;
|
||||
font-family: inherit;
|
||||
font-size: 16px;
|
||||
border: 0;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.btn:hover{
|
||||
background-color: #111;
|
||||
}
|
||||
|
||||
.btn:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 30px;
|
||||
}
|
||||
|
||||
.form-control {
|
||||
position: relative;
|
||||
margin: 20px 0 40px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.form-control input {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
border-bottom: 2px solid #333; /* Black border for input fields */
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 15px 0;
|
||||
font-size: 18px;
|
||||
color: #333; /* Dark text color for input fields */
|
||||
}
|
||||
|
||||
.form-control input:focus,
|
||||
.form-control input:valid {
|
||||
outline: 0;
|
||||
border-bottom-color: #333; /* Black color for border on focus */
|
||||
}
|
||||
|
||||
.form-control label {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
color: #666; /* Gray color for label text */
|
||||
font-size: 18px;
|
||||
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.form-control label span {
|
||||
display: inline-block;
|
||||
min-width: 5px;
|
||||
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
}
|
||||
|
||||
.form-control input:focus ~ label span,
|
||||
.form-control input:valid ~ label span {
|
||||
color: #333; /* Black color for label on focus */
|
||||
transform: translateY(-30px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>Please Login</h1>
|
||||
<form action="">
|
||||
<div class="form-control">
|
||||
<input type="text" id="email" required>
|
||||
<label for="email"><span>Email</span></label>
|
||||
</div>
|
||||
<div class="form-control">
|
||||
<input type="password" id="password" required>
|
||||
<label for="password"><span>Password</span></label>
|
||||
</div>
|
||||
|
||||
<button class="btn">Login</button>
|
||||
|
||||
<p class="text">Don't have an account? <a href="#">Register</a></p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Uncomment and use the following script if needed for animation
|
||||
// const labels = document.querySelectorAll('.form-control label');
|
||||
// labels.forEach(label => {
|
||||
// label.innerHTML = label.innerText.split('')
|
||||
// .map((letter, idx) => `<span style="transition-delay:${idx * 50}ms">${letter}</span>`)
|
||||
// .join('');
|
||||
// });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
```
|
||||
154
joplin notion extension/Web Development/CSS/Snippets/Overlay.md
Normal file
154
joplin notion extension/Web Development/CSS/Snippets/Overlay.md
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
Overlay
|
||||
|
||||
```html
|
||||
<div className="Overlay">
|
||||
<div className="OverlayBox">
|
||||
<div className="message">
|
||||
<h3>This will delete your question. Are you sure?</h3>
|
||||
</div>
|
||||
|
||||
<div className="actionSection">
|
||||
<div className="ok">
|
||||
<button className="okbtn">Ok</button>
|
||||
</div>
|
||||
<div className="cancel">
|
||||
<button className="cancelbtn">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
```scss
|
||||
.Overlay {
|
||||
// to overlay over all others
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
position: fixed;
|
||||
// position: absolute;
|
||||
top: 0;
|
||||
// position: relative;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
min-height: 100%;
|
||||
// height: 100vh;
|
||||
// min-height: fit-content;
|
||||
// height: min(100vh, fit-content);
|
||||
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||
|
||||
.OverlayBox {
|
||||
// when height is too so reducing its height to make it scrollable. has issues but best workaround
|
||||
max-height: 100vh;
|
||||
overflow-y: auto;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: white;
|
||||
width: 300px;
|
||||
aspect-ratio: 2/1;
|
||||
// position: fixed;
|
||||
// position: absolute;
|
||||
position: relative;
|
||||
|
||||
// inset: 0;
|
||||
|
||||
margin: auto;
|
||||
padding: 0.5rem;
|
||||
border: 10px solid grey;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 8px rgba($color: white, $alpha: 0.2);
|
||||
|
||||
.message {
|
||||
color: $navColor;
|
||||
}
|
||||
|
||||
.actionSection {
|
||||
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
// occupying rest of space so to push ok and cancel at end
|
||||
r// both horizontally and vertically
|
||||
flex: 1;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
|
||||
.ok,
|
||||
.cancel {
|
||||
margin: 0.3rem;
|
||||
|
||||
button {
|
||||
@include buttonDim;
|
||||
padding: 0.4rem;
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ok button:hover {
|
||||
background-color: $correct-ans-color;
|
||||
}
|
||||
|
||||
.cancel button:hover {
|
||||
background-color: $wrong-ans-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-xs-400-height {
|
||||
.Overlay {
|
||||
.OverlayBox {
|
||||
// max-width: 300px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
```jsx
|
||||
import "./Overlay.scss";
|
||||
|
||||
function Overlay(props) {
|
||||
const { isOverlayVisible, setIsOverlayVisible, message, children } = props;
|
||||
|
||||
console.log("children :", children);
|
||||
|
||||
const cancelEvent = () => {
|
||||
setIsOverlayVisible(false);
|
||||
};
|
||||
|
||||
const okEvent = () => {
|
||||
setIsOverlayVisible(false);
|
||||
};
|
||||
|
||||
// if no children elements then children will be empty object
|
||||
return (
|
||||
<div className="Overlay">
|
||||
<div className="OverlayBox">
|
||||
<div className="message">
|
||||
<h3>{message}</h3>
|
||||
</div>
|
||||
{children ? children : <></>}
|
||||
|
||||
<div className="actionSection">
|
||||
<div className="ok">
|
||||
<button className="okbtn" onClick={okEvent}>
|
||||
Ok
|
||||
</button>
|
||||
</div>
|
||||
<div className="cancel">
|
||||
<button className="cancelbtn" onClick={cancelEvent}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Overlay;
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,240 @@
|
|||
Questions with answers ui
|
||||
|
||||
```html
|
||||
<div className="ShowQuizMain">
|
||||
<div className="ShowQuizSection">
|
||||
<div className="extraButtonsSection">
|
||||
<div className="expandAll">
|
||||
<button>Expand All</button>
|
||||
</div>
|
||||
<div className="collapseAll">
|
||||
<button>Collapse All</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="QuestionBox">
|
||||
<div className="headerSection">
|
||||
<div className="col1">
|
||||
<h4 className="technologyText"> Technology : Java</h4>
|
||||
</div>
|
||||
<div className="col2">
|
||||
<div className="update">
|
||||
<button title="edit">
|
||||
<i class="fas fa-edit"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="delete">
|
||||
<button title="delete">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="QuestionBox_Question">
|
||||
<div className="QuestionBox_Question_Text">
|
||||
1. What is Java? What is Java? What is Java? What is Java? What is
|
||||
Java? What is Java? What is Java? What is Java? What is Java? What
|
||||
is Java? What is Java? What is Java? What is Java?
|
||||
</div>
|
||||
<button className="toggleAnsBtn">
|
||||
<i className="arrow up"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div className="QuestionBox_Options_Container">
|
||||
<div className="QuestionBox_Options visible">
|
||||
<div className="QuestionBox_Options_Option">
|
||||
a. Java is object oriented language
|
||||
</div>
|
||||
<div className="QuestionBox_Options_Option correct">
|
||||
b. Java is not an object oriented language
|
||||
</div>
|
||||
|
||||
<div className="QuestionBox_Options_Option">
|
||||
c. Java is annoying
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```scss
|
||||
@import "../config";
|
||||
|
||||
@import "./Arrows";
|
||||
.ShowQuizMain {
|
||||
padding-top: 20px;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
background-color: $dimwhite;
|
||||
min-height: 500px;
|
||||
|
||||
.ShowQuizSection {
|
||||
width: 70%;
|
||||
padding: 0 0.5rem;
|
||||
min-width: 500px;
|
||||
background-color: white;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Added subtle shadow
|
||||
|
||||
.extraButtonsSection {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.expandAll,
|
||||
.collapseAll {
|
||||
margin: 0 1rem;
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); // Added subtle shadow
|
||||
|
||||
button {
|
||||
cursor: pointer;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border: 1px solid black;
|
||||
border-radius: 3px;
|
||||
background-color: transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: $dimwhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ShowQuizSection .QuestionBox {
|
||||
// overflow: hidden;
|
||||
margin: 1rem auto;
|
||||
// padding-top: 2rem;
|
||||
width: 70%;
|
||||
|
||||
.headerSection {
|
||||
display: flex;
|
||||
border-top: 1px solid black;
|
||||
background-color: whitesmoke;
|
||||
|
||||
.technologyText {
|
||||
padding: 0.1rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.update button,
|
||||
.delete button {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0.3rem;
|
||||
font-size: 1rem;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.delete button:hover {
|
||||
background-color: $delete-btn-hover;
|
||||
}
|
||||
|
||||
.update button:hover {
|
||||
background-color: $edit-btn-hover;
|
||||
}
|
||||
|
||||
.update {
|
||||
margin-right: 0.2rem;
|
||||
}
|
||||
|
||||
.col1,
|
||||
.col2 {
|
||||
width: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.col2 {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
&_Question {
|
||||
position: relative;
|
||||
// background-color: $navColor;
|
||||
border: 1px solid $dimwhite;
|
||||
background-color: white;
|
||||
border-radius: 5px;
|
||||
padding: 0.5rem 1rem;
|
||||
padding-right: 2rem;
|
||||
// color: white;
|
||||
color: black;
|
||||
line-height: 1.5rem;
|
||||
|
||||
.toggleAnsBtn {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 15px;
|
||||
|
||||
transform: scale(1.2);
|
||||
|
||||
padding: 0 4px;
|
||||
|
||||
// color: white;
|
||||
color: black;
|
||||
border: none;
|
||||
// background-color: rgba($color: white, $alpha: 0.1);
|
||||
background-color: rgba($color: black, $alpha: 0.1);
|
||||
// background-color: transparent;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
&_Options_Container {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&_Options {
|
||||
// width: 99%;
|
||||
margin: 0 auto;
|
||||
// box-sizing: border-box;
|
||||
transform: translateY(-100%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
|
||||
padding: 0.5rem 0rem;
|
||||
// color: white;
|
||||
color: black;
|
||||
// background-color: $dimwhite;
|
||||
background-color: $options-bg-color;
|
||||
|
||||
&_Option {
|
||||
background-color: $wrong-ans-color;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem;
|
||||
border-radius: 5px;
|
||||
|
||||
&.correct {
|
||||
background-color: $correct-ans-color;
|
||||
}
|
||||
}
|
||||
|
||||
&.visible {
|
||||
transform: translateY(0%);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// config.scss
|
||||
$navColor: rgba(20, 20, 20, 0.9);
|
||||
$dimwhite: rgb(220, 220, 220);
|
||||
$wrong-ans-color: rgba(#ba0021, 0.3);
|
||||
$correct-ans-color: rgba(green, 0.3);
|
||||
$options-bg-color: rgba(
|
||||
$color: grey,
|
||||
$alpha: 0.2,
|
||||
);
|
||||
|
||||
$delete-btn-hover: rgba(red, 0.3);
|
||||
$edit-btn-hover: rgba(blue, 0.3);
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
Rotating arrow
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
.arrow {
|
||||
border: solid black;
|
||||
border-width: 0 3px 3px 0;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.right {
|
||||
transform: rotate(-45deg);
|
||||
-webkit-transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
.left {
|
||||
transform: rotate(135deg);
|
||||
-webkit-transform: rotate(135deg);
|
||||
}
|
||||
|
||||
.up {
|
||||
transform: rotate(-135deg);
|
||||
-webkit-transform: rotate(-135deg);
|
||||
}
|
||||
|
||||
.down {
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h2>CSS Arrows</h2>
|
||||
|
||||
<p>arrow: <i class="arrow"></i></p>
|
||||
<p>Right arrow: <i class="arrow right"></i></p>
|
||||
<p>Left arrow: <i class="arrow left"></i></p>
|
||||
<p>Up arrow: <i class="arrow up"></i></p>
|
||||
<p>Down arrow: <i class="arrow down"></i></p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
Sidepanel
|
||||
|
||||
```html
|
||||
<div class="sidePanel">
|
||||
<div class="userList">
|
||||
<div class="userItem" onclick="toggleQuizzes('user1')">
|
||||
User 1
|
||||
</div>
|
||||
<div class="userQuizzes" id="user1">
|
||||
<ul>
|
||||
<li>Quiz 1</li>
|
||||
<li>Quiz 2</li>
|
||||
<li>Quiz 3</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="userItem" onclick="toggleQuizzes('user2')">
|
||||
User 2
|
||||
</div>
|
||||
<div class="userQuizzes" id="user2">
|
||||
<ul>
|
||||
<li>Quiz A</li>
|
||||
<li>Quiz B</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="userItem" onclick="toggleQuizzes('user2')">
|
||||
User 2
|
||||
</div>
|
||||
<div class="userQuizzes" id="user2">
|
||||
<ul>
|
||||
<li>Quiz A</li>
|
||||
<li>Quiz B</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: Arial, sans-serif;
|
||||
}
|
||||
|
||||
.sidePanel {
|
||||
width: 200px;
|
||||
height: 100vh;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
// transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.userList {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.userItem {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 10px;
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.userItem:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
|
||||
.userQuizzes {
|
||||
display: none;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.userQuizzes ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.userQuizzes li {
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
confirmation feature on button without js
|
||||
|
||||
```html
|
||||
<form action="/register" method="POST">
|
||||
<!-- Registration Fields -->
|
||||
<label for="username">Username:</label>
|
||||
<input type="text" id="username" name="username" required>
|
||||
|
||||
<label for="password">Password:</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
|
||||
<!-- The CSS Hack Trigger -->
|
||||
<div class="submit-wrapper">
|
||||
<input type="checkbox" id="unlock-submit" class="toggle-gate">
|
||||
<label for="unlock-submit" class="cover-button">Register</label>
|
||||
<button type="submit" class="real-button">Confirm Registration</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<style>
|
||||
.submit-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
/* Hide the actual checkbox */
|
||||
.toggle-gate {
|
||||
display: none;
|
||||
}
|
||||
/* The fake button that sits on top */
|
||||
.cover-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #007bff;
|
||||
color: white;
|
||||
text-align: center;
|
||||
line-height: 35px;
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
}
|
||||
/* The real submit button hidden underneath */
|
||||
.real-button {
|
||||
padding: 8px 16px;
|
||||
background: #28a745;
|
||||
color: white;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* When the fake button is clicked, it checks the box and hides itself */
|
||||
.toggle-gate:checked ~ .cover-button {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
tailwind
|
||||
|
||||
```html
|
||||
<form action="/register" method="POST" class="max-w-md mx-auto p-6 bg-white rounded-lg shadow-md space-y-4">
|
||||
<!-- Registration Fields -->
|
||||
<div>
|
||||
<label for="username" class="block text-sm font-medium text-gray-700 mb-1">Username</label>
|
||||
<input type="text" id="username" name="username" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="password" class="block text-sm font-medium text-gray-700 mb-1">Password</label>
|
||||
<input type="password" id="password" name="password" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
</div>
|
||||
|
||||
<!-- The CSS Hack Trigger Container -->
|
||||
<div class="relative inline-block w-full pt-2">
|
||||
<!-- Hidden Checkbox using Tailwind's peer utility -->
|
||||
<input type="checkbox" id="unlock-submit" class="peer hidden">
|
||||
|
||||
<!-- First Click: The Fake Button Label -->
|
||||
<label for="unlock-submit" class="absolute inset-x-0 bottom-0 top-2 flex items-center justify-center bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-md cursor-pointer z-10 transition-colors peer-checked:hidden">
|
||||
Register
|
||||
</label>
|
||||
|
||||
<!-- Second Click: The Real Submit Button -->
|
||||
<button type="submit" class="w-full bg-green-600 hover:bg-green-700 text-white font-semibold py-2 px-4 rounded-md transition-colors">
|
||||
Confirm Registration
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
custom dropdown with bootstrap
|
||||
```html
|
||||
|
||||
<style>
|
||||
.mh-250{
|
||||
max-height: 250px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="btn-group w-100 border">
|
||||
<button
|
||||
type="button"
|
||||
class="btn btn-secondary bg-transparent text-black fs-5 border-0 text-start"
|
||||
>
|
||||
--Select--
|
||||
</button>
|
||||
<button
|
||||
style="max-width: 50px"
|
||||
class="btn btn-secondary dropdown-toggle dropdown-toggle-split p-2 bg-transparent text-black fit-content fs-5 border-0"
|
||||
type="button"
|
||||
id="dropdownMenuButton1"
|
||||
data-bs-toggle="dropdown"
|
||||
aria-expanded="false"
|
||||
></button>
|
||||
|
||||
<ul
|
||||
class="dropdown-menu mh-250 overflow-auto w-100"
|
||||
id="yearSelect"
|
||||
aria-labelledby="dropdownMenuButton1"
|
||||
>
|
||||
<li><a class="dropdown-item" href="#">--Select-- </a></li>
|
||||
</ul>
|
||||
</div>
|
||||
```
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
files
|
||||
|
||||
[editForm.html](../../../../_resources/editForm.html)
|
||||
|
||||
[editForm2.html](../../../../_resources/editForm2.html)
|
||||
|
||||
[tabsAtTtop.html](../../../../_resources/tabsAtTtop.html)
|
||||
|
||||
195
joplin notion extension/Web Development/CSS/Tailwind/Extras.md
Normal file
195
joplin notion extension/Web Development/CSS/Tailwind/Extras.md
Normal file
|
|
@ -0,0 +1,195 @@
|
|||
Extras
|
||||
- with `npx tailwindcss init --full` we can have full configuratio of properties available at `tailwind.config.js` and we can add some properties with their values too like
|
||||
```js
|
||||
// in theme
|
||||
fontSize: {
|
||||
mammoth: ["10rem", { lineHeight: "1" }],
|
||||
xs: ["0.75rem", { lineHeight: "1rem" }],
|
||||
sm: ["0.875rem", { lineHeight: "1.25rem" }],
|
||||
base: ["1rem", { lineHeight: "1.5rem" }],
|
||||
lg: ["1.125rem", { lineHeight: "1.75rem" }],
|
||||
xl: ["1.25rem", { lineHeight: "1.75rem" }],
|
||||
"2xl": ["1.5rem", { lineHeight: "2rem" }],
|
||||
"3xl": ["1.875rem", { lineHeight: "2.25rem" }],
|
||||
"4xl": ["2.25rem", { lineHeight: "2.5rem" }],
|
||||
"5xl": ["3rem", { lineHeight: "1" }],
|
||||
"6xl": ["3.75rem", { lineHeight: "1" }],
|
||||
"7xl": ["4.5rem", { lineHeight: "1" }],
|
||||
"8xl": ["6rem", { lineHeight: "1" }],
|
||||
"9xl": ["8rem", { lineHeight: "1" }],
|
||||
},
|
||||
```
|
||||
here under fontSize we added mammoth so when we type `text-mammoth` in html we will get font-size as 10rem with line-height of similar size(10 rem in this case).
|
||||
- instead of directly modyfying full tailwind.config.js we can do same with empty one which is created without using `full` flag.
|
||||
```js
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./public/**/*.{html,js}"],
|
||||
theme: {c
|
||||
extend: {
|
||||
colors: {
|
||||
primary: "#FF6363",
|
||||
secondary: {
|
||||
100: "#E2E2D5",
|
||||
200: "888883",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
```
|
||||
in html
|
||||
```html
|
||||
<ul>
|
||||
<li
|
||||
class="text-blue-900 font-bold text-xl p-4 m-4 border-2 border-solid border-gray-400"
|
||||
>
|
||||
<a href="#">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span
|
||||
class="bg-secondary-100 text-secondary-200"
|
||||
>About</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
|
||||
- **custom fonts**
|
||||
in src/style.css import the font with CDN like this
|
||||
```css
|
||||
@import url(https://cdn.jsdelivr.net/fontsource/fonts/nunito:vf@latest/latin-wght-normal.woff2);
|
||||
```
|
||||
then in tailwind.config.js add this
|
||||
```js
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./public/**/*.{html,js}"],
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
body: ["Nunito"],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
```
|
||||
finally in html
|
||||
`<body class="font-body">` this will add the font 'Nunito'
|
||||
|
||||
- **@apply Directive**
|
||||
just like mixin in sass we can use apply directive to inherit the properties of other classs
|
||||
in src/styles.css
|
||||
```css
|
||||
@import url(https://cdn.jsdelivr.net/fontsource/fonts/nunito:vf@latest/latin-wght-normal.woff2);
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.card {
|
||||
@apply relative bg-white rounded overflow-hidden shadow-md;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@apply bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2;
|
||||
}
|
||||
|
||||
```
|
||||
in public/index.html
|
||||
```html
|
||||
<div class="card">
|
||||
<img
|
||||
class="w-full h-32 sm:h-48 object-cover"
|
||||
src="img/stew.png"
|
||||
alt="stew"
|
||||
/>
|
||||
<div>
|
||||
<span class="font-bold">5 Bean Chili Stew</span>
|
||||
<span class="block text-gray-500 text-sm"
|
||||
>Recipe by Mario</span
|
||||
>
|
||||
</div>
|
||||
<div class="badge">
|
||||
<span>25 mins</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
to fix bluish nature when using gray do this
|
||||
```js
|
||||
const colors = require('tailwindcss/colors')
|
||||
|
||||
module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
// This overrides 'gray' classes to use the flat 'neutral' color palette instead
|
||||
gray: colors.neutral,
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
- **Tailwind components**
|
||||
https://merakiui.com/components
|
||||
https://daisyui.com/
|
||||
https://demos.creative-tim.com/soft-ui-design-system/presentation.html
|
||||
https://www.hyperui.dev/
|
||||
https://daily.dev/blog/10-free-tailwind-css-ui-kits-and-component-libraries-2024
|
||||
[10 Free Tailwind CSS UI Kits & Component Libraries 2024 (15_3_2025 11_21_40 pm).u.zip.html](../../../../_resources/10%20Free%20Tailwind%20CSS%20UI%20Kits%20&%20Component%20Libraries.html)
|
||||
|
||||
|
||||
|
||||
|
||||
for !important use this
|
||||
|
||||
`ml-auto` to `!ml-auto`
|
||||
|
||||
tailwind group
|
||||
eg:
|
||||
```html
|
||||
<div class="group bg-blue-200 p-4">
|
||||
<p class="text-blue-800 group-hover:text-red-500">Hover over me!</p>
|
||||
<button class="bg-gray-300 group-hover:bg-green-500">Click me</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
tailwind peer class
|
||||
The peer class in Tailwind CSS is a modifier used to style an element based on the state of its sibling elements. Group allows child elements to react to the state of their parent
|
||||
Peer allows an element to react to the state of its sibling.
|
||||
|
||||
```html
|
||||
<div class="pill">
|
||||
<input type="checkbox" class="peer hidden" name="che1" id="che1" >
|
||||
|
||||
<label for="che1" class="max-w-[300px] opacity-50 peer-checked:opacity-100 cursor-pointer hover:opacity-80 border border-gray-500 items-center gap-1 bg-gray-200 text-gray-800 rounded-full px-2.5 py-0.5 text-sm" >
|
||||
<span class="whitespace-nowrap truncate ">
|
||||
rockdsadsadsd dsa ssafdd fdssdfsadsa sds sd dsf dfd fds rockdsadsadsd dsa ssafdd fdssdfsadsa sds sd dsf dfd fds
|
||||
|
||||
</span>
|
||||
</label>
|
||||
|
||||
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
to increase specificity
|
||||
using `[&&]` or `[&]`
|
||||
`<div class="m-10 border border-slate-200 [&&]:border-rose-500">Foo`
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
Fonts and Colors
|
||||
https://tailwindcss.com/docs
|
||||
|
||||
- Text colors
|
||||
`text-<color_name>-<strength>`
|
||||
eg: `text-yellow-500`
|
||||
highter strength means more darker it is.
|
||||
- font-size
|
||||
Syntax : `text-<sizeLabel>`
|
||||
`text-large`, `text-xl`, `text-6xl`,`text-2xl`
|
||||
- bold
|
||||
`font-bold`, `font-semibold`
|
||||
|
||||
|
||||
**Padding , margin and borders**
|
||||
- `p-1`, `p-2` , `p-3` , `p-4` with padding equivalent of 0.25rem, 0.5rem, 0.75rem , 1 rem
|
||||
for padding at vertical means for top,down => `py-4`
|
||||
for padding at horizontal means for left,right => `px-4`
|
||||
for at top => `pt-4`. similarly for right, bottom, left => `pr`, `pb`, `pl`.
|
||||
- for margin, replace `p` with `m`.
|
||||
- for border,
|
||||
`border` for border of width 1px , `border-2` => width : 2px
|
||||
`border-y` : border-top and border-bottom will be there of width 1px
|
||||
`border-x` : border-left and border-right will be there of width 1px
|
||||
similarly for individual directions
|
||||
`border-t-4`, `border-r-4`, `border-b-4` and `border-l-4`
|
||||
for border style
|
||||
`border-solid`
|
||||
for border color
|
||||
`border-blue-200` , `border-gray-400`
|
||||
|
||||
|
||||
**Sizing**
|
||||
- `size-full` => `width: 100%; height: 100%`
|
||||
`size-fit` => `width: fit-content; height: fit-content`
|
||||
`size-6/12` => `width: 50%; height: 50%`
|
||||
|
||||
|
||||
**flex layout**
|
||||
```html
|
||||
<div class="flex items-end justify-center">
|
||||
<div class="bg-red-500 h-4 w-6"></div>
|
||||
<div class="bg-blue-500 h-8 w-6"></div>
|
||||
<div class="bg-green-500 h-12 w-6"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
**responsive classes**
|
||||
- in tailwind.configs.js
|
||||
```js
|
||||
module.exports= {
|
||||
theme : {
|
||||
screens : {
|
||||
'sm': '640px',
|
||||
// => @media (min-width: 640px){...}
|
||||
'md': '768px',
|
||||
'lg': '1024px',
|
||||
'xl': '1280px'
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
in html
|
||||
`<a href="/" class="text-green-500 sm:text-red-500 lg:text-blue-500">Food Ninja</a>`
|
||||
So as width keeps increasing color will change from green to red to blue
|
||||
|
||||
|
||||
**Cards**
|
||||
```html
|
||||
<!-- cards go here -->
|
||||
<div class="bg-white rounded overflow-hidden shadow-md">
|
||||
<img
|
||||
class="w-full h-32 sm:h-48 object-cover"
|
||||
src="img/stew.png"
|
||||
alt="stew"
|
||||
/>
|
||||
<div>
|
||||
<span class="font-bold">5 Bean Chili Stew</span>
|
||||
<span class="block text-gray-500 text-sm"
|
||||
>Recipe by Mario</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**Badge**
|
||||
- badges are small visual indicators or labels that convey information or denote status on cards. They can serve various purposes, such as status indicator, classification,etc
|
||||
```html
|
||||
<div
|
||||
class="relative bg-white rounded overflow-hidden shadow-md"
|
||||
>
|
||||
<img
|
||||
class="w-full h-32 sm:h-48 object-cover"
|
||||
src="img/stew.png"
|
||||
alt="stew"
|
||||
/>
|
||||
<div>
|
||||
<span class="font-bold">5 Bean Chili Stew</span>
|
||||
<span class="block text-gray-500 text-sm"
|
||||
>Recipe by Mario</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="bg-secondary-100 text-secondary-200 text-xs uppercase font-bold rounded-full p-2 absolute top-0 ml-2 mt-2"
|
||||
>
|
||||
<span>25 mins</span>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
- make sure that parent ie card has relative(`postition : relative`) class so badge as absolute would work
|
||||
|
||||
|
||||
**Grids**
|
||||
|
||||
|
|
@ -0,0 +1,88 @@
|
|||
HTML Template
|
||||
|
||||
- By linking style.css of tailwind, all the default styles of elements imposed by browser will be gone
|
||||
```html
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<div>
|
||||
<nav>
|
||||
<div>
|
||||
<h1>
|
||||
<a href="/">Food Ninja</a>
|
||||
</h1>
|
||||
</div>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>Home</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>About</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<span>Contact</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<main>
|
||||
<div>
|
||||
<a href="#">Log in</a>
|
||||
<a href="#">Sign up</a>
|
||||
</div>
|
||||
|
||||
<header>
|
||||
<h2>Recipes</h2>
|
||||
<h3>For Ninjas</h3>
|
||||
</header>
|
||||
|
||||
<div>
|
||||
<h4>Latest Recipes</h4>
|
||||
|
||||
<div>
|
||||
<!-- cards go here -->
|
||||
<div>
|
||||
<img src="img/stew.jpg" alt="stew" />
|
||||
<div>
|
||||
<span>5 Bean Chili Stew</span>
|
||||
<span>Recipe by Mario</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>Most Popular</h4>
|
||||
|
||||
<div>
|
||||
<!-- cards go here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div>Load more</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
Without linking tailwind style file
|
||||
|
||||
|
||||
With linking tailwind style file
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
Intro and Setup
|
||||
https://www.youtube.com/playlist?list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw
|
||||
|
||||
- Css framwork made of utility classes and are much lower level than Bootstrap, Materialize etc for improved flexibility
|
||||
|
||||
**Installation**
|
||||
- `npm init -y` to create package.json base file and then `npm i tailwindcss postcss autoprefixer` to install these modules locally
|
||||
|
||||
**How it works**
|
||||
|
||||
in src all the classes of tailwind and importted and tailwind script compiles it to output public style.css files which is interpretated by browser.
|
||||
We can also add our styles in src file too but that is not needed often
|
||||
|
||||
### Setup
|
||||
- Create directory named `src` and `public` and inside `src` add `style.css` and add followiing code
|
||||
```css
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
```
|
||||
- Also do `npx tailwindcss init` and add following in `tailwind.config.js`
|
||||
```js
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./public/**/*.{html,js}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
|
||||
```
|
||||
If html file is int public folder then it is public/** ... . if its in src then it is src/**..
|
||||
- In package.json under scripts section add the following script
|
||||
`"build-css": "tailwindcss build src/styles.css -o public/styles.css"`
|
||||
- Now run `npm run build-css` to generate style.css at public folder. this public folder may have index.html file too
|
||||
|
||||
- Without npm, in order to use tailwind simply add following cdn link
|
||||
`<link href= "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"/>`
|
||||
|
||||
also make sure to install this if there are problems `npm i tailwindcss@3.4.17 --save-dev`
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue