2024-11-10 16:43:55 -05:00
<!DOCTYPE html>
< html lang = "en" >
2024-11-11 22:10:47 -05:00
< head >
< meta charset = "utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1" / >
< meta name = "color-scheme" content = "light dark" / >
< title > Preview • Pico CSS< / title >
< meta name = "description" content = "A pure HTML example, without dependencies." / >
<!-- Pico.css -->
< link rel = "stylesheet" href = "./../css/pico.lime.min.css" / >
< link rel = "stylesheet" href = "./../css/pico.colors.min.css" / >
< / head >
< body >
2024-11-12 00:35:16 -05:00
< div class = "container-fluid" >
< div class = "row-fluid" >
< div class = "col-12 col-md-3 col-lg-2" >
<!-- Header -->
< header >
< hgroup >
< h1 > Pico< / h1 >
< p > A Pico CSS + example with addition to the standard Pico CSS library.< / p >
< p > Demo page from < a href = "https://picocss.com/docs/modal#utilities" > picocss.com model docs< / a > < / p >
< / hgroup >
< details class = "dropdown" >
< summary role = "button" class = "secondary" > Theme< / summary >
< ul >
< li > < a href = "#" data-theme-switcher = "auto" > Auto< / a > < / li >
< li > < a href = "#" data-theme-switcher = "light" > Light< / a > < / li >
< li > < a href = "#" data-theme-switcher = "dark" > Dark< / a > < / li >
< / ul >
< / details >
< aside >
< nav >
< ul >
2024-11-13 03:42:58 -05:00
< li > < a href = "#validation" > Validation< / a > < / li >
2024-11-12 00:35:16 -05:00
< li > < a href = "#group" > Group< / a > < / li >
< li > < a href = "#rows" > Row< / a > < / li >
< li > < a href = "#row-offsets" > Row Offset< / a > < / li >
< li > < a href = "#row-alignments" > Row Alignments< / a > < / li >
< li > < a href = "#row-breakpoints" > Row Breakpoints< / a > < / li >
< li > < a href = "#modal" > Modals< / a > < / li >
< li > < a href = "#notifications" > Notifications< / a > < / li >
2024-11-12 04:59:34 -05:00
< li > < a href = "#accordions" > Accorddions< / a > < / li >
< li > < a href = "#timeline" > Timeline< / a > < / li >
2024-11-12 00:35:16 -05:00
< / ul >
< / nav >
< / aside >
< / header >
<!-- /Header -->
2024-11-11 22:10:47 -05:00
< / div >
2024-11-12 00:35:16 -05:00
< main class = "col-12 col-md-9 col-lg-10" >
2024-11-13 03:42:58 -05:00
<!-- Validation -->
< form action = "javascript:void(0);" >
< article id = "group" >
< header > < h2 > Validation< / h2 > < / header >
< p >
Form :user-valid and :user-invalid
< / p >
< input placeholder = "name" type = "text" name = "test" minlength = "4" maxlength = "30" pattern = "[a-z]{4,30}" required >
< small data-valid = "this is good!" data-invalid = "Min of 4 characters, max of 39, only a-z no caps." > < / small >
< input placeholder = "Url" type = "url" name = "test" required >
< small data-valid = "this is good!" data-invalid = "Must be a url." > < / small >
< input placeholder = "Email" type = "email" name = "test" required >
< small data-valid = "this is good!" data-invalid = "Must be a valid email." > < / small >
< select name = "favorite-cuisine" required >
< option selected disabled value = "" > Select your favorite cuisine...< / option >
< option > Italian< / option >
< option > Japanese< / option >
< option > Indian< / option >
< option > Thai< / option >
< option > French< / option >
< / select >
< small data-valid = "this is good!" data-invalid = "Error.." > < / small >
< input type = "date" name = "date" required >
< small data-valid = "this is good!" data-invalid = "Error.." > < / small >
< input type = "datetime-local" name = "datetime-local" required >
< small data-valid = "this is good!" data-invalid = "Error.." > < / small >
< input type = "month" name = "month" min = "2018-03" max = "2024-12" placeholder = "2024-12" step = "1" pattern = "[0-9]{4}-[0-9]{2}" required >
< small data-valid = "this is good!" data-invalid = "Format: YYYY-MM" > < / small >
< input type = "time" name = "time" required >
< small data-valid = "this is good!" data-invalid = "Error.." > < / small >
< header > Check JS for FileValidator class< / header >
< input type = "file" data-max-size = "1048576" accept = ".jpg,.svg,.png,.gif,.webp" id = "checkFile" multiple / >
< small data-invalid = "Only .jpg,.svg,.png,.gif,.webp image types allowed" data-valid = "Good!" > < / small >
< textarea minlength = "5" placeholder = "its always valid?" required > < / textarea >
< small data-valid = "this is good!" data-invalid = "Min of 5 characters!" > < / small >
< br >
< label > < input type = "checkbox" name = "english" required / > English < / label >
< footer >
< input type = "submit" value = "submit" class = "btn btn-primary" >
< / footer >
< / article >
< / form >
<!-- /Validation -->
2024-11-12 00:35:16 -05:00
<!-- Group -->
< article id = "group" >
< header > < h2 > Group< / h2 > < / header >
2024-11-12 04:59:34 -05:00
< form action = "javascript:void(0);" >
< fieldset role = "group" >
< label for = "email" > Email:< / label >
< input name = "email" type = "email" placeholder = "Enter your email" autocomplete = "email" / >
< input type = "submit" value = "Subscribe" / >
< / fieldset >
< / form >
< form action = "javascript:void(0);" >
< fieldset role = "group" >
< label for = "ex-browser" > Browser:< / label >
< select id = "ex-browser" name = "ex-browser" >
< option value = "Firefox" > Firefox< / option >
< option value = "Chrome" > Chrome< / option >
< option value = "Opera" > Opera< / option >
< option value = "Safari" > Safari< / option >
< / select >
< input type = "submit" value = "Save" / >
< / fieldset >
< / form >
2024-11-12 00:35:16 -05:00
< / article >
<!-- ./ Group -->
< hr >
<!-- rows -->
< article id = "rows" >
< header > < h2 > Rows< / h2 > < / header >
< p >
Similar to < a href = "https://getbootstrap.com/docs/5.3/layout/columns/" target = "_blank" > Bootstrap 5.3.3< / a > , with the responsive < code > .col-*COL#*< / code > , < code > .col-*BREAKPOINT*-*COL#*< / code > , < code > .offset-*COL#*< / code > , < code > .offset-*BREAKPOINT*-*COL#*< / code > .
< / p >
< p >
< code > .row< / code > has a max width set to the viewport of your < code > xl< / code > viewport (1300px by default)< / p >
< code > .row-fluid< / code > max width is 100%.
< / p >
< div class = "row-fluid" >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< div class = "col-6" > < article class = "pico-background-lime-750" > col-6< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-3 offset-1" > < article class = "pico-background-lime-750" > col-3 offset-1< / article > < / div >
< div class = "col-2" > < article class = "pico-background-lime-750" > col-2< / article > < / div >
< div class = "col-2" > < article class = "pico-background-lime-750" > col-2< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-2" > < article class = "pico-background-lime-750" > col-2< / article > < / div >
< div class = "col-8" > < article class = "pico-background-lime-750" > col-8< / article > < / div >
< div class = "col-2" > < article class = "pico-background-lime-750" > col-2< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-5" > < article class = "pico-background-lime-750" > col-5< / article > < / div >
< div class = "col-7" > < article class = "pico-background-lime-750" > col-7< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-9" > < article class = "pico-background-lime-750" > col-9< / article > < / div >
< div class = "col-3" > < article class = "pico-background-lime-750" > col-3< / article > < / div >
< / div >
< / article >
<!-- /rows -->
< hr >
<!-- offset -->
< article id = "row-offsets" >
< header > < h2 > Columns with offsets defined by breakpoints< / h2 > < / header >
< p > When defining multiple < code > .col-*-*< / code > on the same element, the order your put the classes on the element matter.< / p >
2024-11-11 22:10:47 -05:00
2024-11-12 00:35:16 -05:00
< div class = "row-fluid" >
< div class = "col-2 col-md-4" > < article class = "pico-background-lime-750" > col-2, col-md-4< / article > < / div >
< div class = "col-4 offset-8 col-md-6 offset-md-6" > < article class = "pico-background-lime-750" > col-4, offset-8, col-md-6, offset-md-6< / article > < / div >
< / div >
< div class = "row-fluid" >
< div class = "col-5 offset-1 col-md-11" > < article class = "pico-background-lime-550" > col-5, offset-1, col-md-11< / article > < / div >
< div class = "col-2 col-md-6" > < article class = "pico-background-lime-550" > col-2, col-md-6< / article > < / div >
< div class = "col-3 offset-9 col-md-6 offset-md-6" > < article class = "pico-background-lime-550" > col-3, offset-9, col-md-6, offset-md-6< / article > < / div >
< / div >
< div class = "row-fluid align-center" >
< div class = "col-3 col-md-12 col-lg-6" > < article class = "pico-background-lime-850" > col-3 col-md-12 col-lg-6< / article > < / div >
< div class = "col-3 col-md-12 col-lg-6" > < article class = "pico-background-lime-850" > col-3 col-md-12 col-lg-6< / article > < / div >
< div class = "col-4 col-md-6 col-lg-3" > < article class = "pico-background-lime-850" > col-4 col-md-6 col-lg-3< / article > < / div >
< div class = "col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10" > < article class = "pico-background-lime-850" > col-6 offset-6 col-md-3 offset-md-9 col-lg-2 offset-lg-10< / article > < / div >
< / div >
< / article >
<!-- /row - offsets -->
< hr >
<!-- row - alignments -->
< article id = "row-alignments" >
< header > < h2 > Alignment< / h2 > < / header >
< p >
You can add < code > .align-start< / code > (default), < code > .align-center< / code > or < code > .align-end< / code > to your < code > .row< / code > or < code > .row-fluid< / code > element to align the containing elements to the top, middle, or bottom.< / p >
< div class = "row-fluid align-center" id = "row-align-example" >
< div class = "col-4" > < article class = "pico-background-lime-850" > col-4< / article > < / div >
< div class = "col-4" >
< article class = "pico-background-lime-850" >
< input type = "button" class = "change-row-align" data-align = "start" value = ".align-start" >
< input type = "button" class = "change-row-align" data-align = "center" value = ".align-center" >
< input type = "button" class = "change-row-align" data-align = "end" value = ".align-end" >
< / article >
< / div >
< div class = "col-4" > < article class = "pico-background-lime-850" > col-4< / article > < / div >
< / div >
< / article >
<!-- /row - alignments -->
< hr >
<!-- row - breakpoints -->
< article id = "row-breakpoints" >
< header > < h2 > < code > -md- < / code > Breakpoints< / h2 > < / header >
< div class = "row-fluid" >
< div class = "col-12 col-md-4" > < article class = "pico-background-lime-650" > col-12, col-md-4< / article > < / div >
< div class = "col-12 col-md-4" > < article class = "pico-background-lime-650" > col-12, col-md-4< / article > < / div >
< div class = "col-12 col-md-4" > < article class = "pico-background-lime-650" > col-12, col-md-4< / article > < / div >
< / div >
< / article >
<!-- ./ row - breakpoints -->
< hr >
<!-- Modal -->
< article id = "modal" >
< header > < h2 > Modal< / h2 > < / header >
< button class = "contrast" data-target = "modal-example" onclick = "toggleModal(event)" >
Launch demo modal
< / button >
< / article >
<!-- ./ Modal -->
< hr >
<!-- notifications -->
< article id = "notifications" >
< header > < h2 > Notificaton< / h2 > < / header >
< button onclick = "showNotification('Accessible short notice.')" >
Short Notificaton
< / button >
< button onclick = "showNotification({ html: `
< section >
< h2 > Many news!< / h2 >
< p > This is fantastic!< / p >
< button onclick = 'closeNotification()' > OK< / button >
< / section >
`, delay: 60 * 1000 })">
Big Notificaton
< / button >
<!-- accessible dialog based notification element -->
< dialog role = "alert" data-backdrop = "false" > < / dialog >
< / article >
<!-- /notifications -->
< hr >
<!-- Accordions -->
< article id = "accordions" >
< header > < h2 > Accordions< / h2 > < / header >
< details name = "example-accordion" >
< summary > Accordion 1< / summary >
< p >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque urna diam,
tincidunt nec porta sed, auctor id velit. Etiam venenatis nisl ut orci consequat, vitae
tempus quam commodo. Nulla non mauris ipsum. Aliquam eu posuere orci. Nulla convallis
lectus rutrum quam hendrerit, in facilisis elit sollicitudin. Mauris pulvinar pulvinar
mi, dictum tristique elit auctor quis. Maecenas ac ipsum ultrices, porta turpis sit
amet, congue turpis.
< / p >
< / details >
< details name = "example-accordion" open >
< summary > Accordion 2< / summary >
< ul >
< li > Vestibulum id elit quis massa interdum sodales.< / li >
< li > Nunc quis eros vel odio pretium tincidunt nec quis neque.< / li >
< li > Quisque sed eros non eros ornare elementum.< / li >
< li > Cras sed libero aliquet, porta dolor quis, dapibus ipsum.< / li >
< / ul >
< / details >
< / article >
<!-- ./ Accordions -->
2024-11-12 04:59:34 -05:00
< hr >
< article id = "timeline" style = "background-color: transparent;" >
< header >
< h2 > Timeline< / h2 >
< br >
< details >
< summary > View Custom CSS< / summary >
< div style = "background-color: var(--pico-muted-border-color); padding: .5rem;" >
--pico-timeline-line-color: var(--pico-primary-background);< br >
--pico-timeline-dot-background-color: var(--pico-primary-inverse);< br >
--pico-timeline-dot-border-color: var(--pico-primary-background);< br >
--pico-timeline-arrow-color: var(--pico-card-sectioning-background-color);
< / div >
< / details >
< / header >
< div class = "timeline" >
< section class = "point left" >
< article >
< header > < h3 > 2017< / h3 > < / header >
< p > Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.< / p >
< / article >
< / section >
< section class = "point right" >
< article >
< header > < h3 > 2016< / h3 > < / header >
< p > Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.< / p >
< / article >
< / section >
< section class = "point left" >
< article >
< header > < h3 > 2015< / h3 > < / header >
< p > Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.< / p >
< / article >
< / section >
< section class = "point right" >
< article >
< header > < h3 > 2012< / h3 > < / header >
< p > Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam.< / p >
< / article >
< / section >
< / div >
< / article >
2024-11-12 00:35:16 -05:00
< / main >
< / div >
< / div >
2024-11-11 22:10:47 -05:00
<!-- Footer -->
< footer class = "container" >
< small >
Built with < a href = "https://picocss.com" > Pico< / a > •
2024-11-12 04:59:34 -05:00
< a href = "https://github.com/Yohn/PicoCSS" >
2024-11-11 22:10:47 -05:00
Source code
< / a >
< / small >
< / footer >
<!-- ./ Footer -->
<!-- Modal example -->
< dialog id = "modal-example" >
< article >
< header >
2024-11-12 00:35:16 -05:00
< button aria-label = "Close" rel = "prev" data-target = "modal-example" onclick = "toggleModal(event)" > < / button >
2024-11-11 22:10:47 -05:00
< h3 > Confirm your action!< / h3 >
< / header >
< p >
Cras sit amet maximus risus. Pellentesque sodales odio sit amet augue finibus
pellentesque. Nullam finibus risus non semper euismod.
< / p >
< footer >
< button role = "button" class = "secondary" data-target = "modal-example" onclick = "toggleModal(event)" > Cancel< / button >
< button autofocus data-target = "modal-example" onclick = "toggleModal(event)" >
Confirm
< / button >
< / footer >
< / article >
< / dialog >
<!-- ./ Modal example -->
<!-- Minimal theme switcher -->
< script src = "js/minimal-theme-switcher.js" > < / script >
<!-- Modal -->
< script src = "js/modal.js" > < / script >
2024-11-12 00:35:16 -05:00
<!-- alert notifications -->
< script src = "js/notifications.js" > < / script >
2024-11-13 03:42:58 -05:00
< script src = "js/FileValidator.js" > < / script >
2024-11-12 00:35:16 -05:00
< script src = "js/accordion.js" > < / script >
2024-11-11 22:10:47 -05:00
< script >
document.addEventListener("DOMContentLoaded", () => {
2024-11-13 03:42:58 -05:00
const checkFile = document.getElementById("checkFile");
new FileValidator(checkFile);
2024-11-11 22:10:47 -05:00
const alignButtons = document.querySelectorAll(".change-row-align");
2024-11-12 00:35:16 -05:00
const alignRow = document.getElementById("row-align-example");
2024-11-11 22:10:47 -05:00
alignButtons.forEach((button) => {
button.addEventListener("click", () => {
let dir = button.getAttribute('data-align');
2024-11-12 00:35:16 -05:00
console.log(dir)
2024-11-11 22:10:47 -05:00
if(dir == 'start'){
2024-11-12 00:35:16 -05:00
alignRow.classList.remove('align-center', 'align-end');
alignRow.classList.add('align-start');
2024-11-11 22:10:47 -05:00
} else if(dir == 'center'){
2024-11-12 00:35:16 -05:00
alignRow.classList.remove('align-start', 'align-end');
alignRow.classList.add('align-center');
2024-11-11 22:10:47 -05:00
} else {
2024-11-12 00:35:16 -05:00
alignRow.classList.remove('align-start', 'align-center');
alignRow.classList.add('align-end');
2024-11-11 22:10:47 -05:00
}
});
});
});
< / script >
< / body >
2024-11-10 16:43:55 -05:00
< / html >
