daggrcss
Version:
A light-weight CSS style framework that focuses on useful responsive default styling and utilities. Daggr leaves the creative parts to the user.
1 lines • 16.8 kB
CSS
*,:after,:before{-webkit-box-sizing:border-box;box-sizing:border-box}html{-webkit-tap-highlight-color:transparent;scroll-behavior:smooth;font-size:1px;cursor:default;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;word-break:normal}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;font-size:18rem;font-weight:400;text-rendering:optimizeSpeed;line-height:1.3;color:#222;margin:0;padding:0}:not(body):not(html){border-width:0;outline-width:0;padding:0;margin:auto;text-align:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;justify-items:center;-ms-flex-line-pack:center;align-content:center;background-color:transparent}h1,h2,h3,h4,h5,h6,img{display:block;margin-block-start:0;margin-block-end:0;margin-inline-start:0;margin-inline-end:0}img{border-style:none}a,button,input[type=button],input[type=submit]{text-decoration:none;color:inherit;cursor:pointer}dd,fieldset,figure,h1,h2,h3,h4,h5,h6,input::-moz-focus-inner,nav,ol,textarea,ul{margin:0}dd,nav,ol,ul{list-style:none}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}b,strong{font-weight:bolder}cite{font-style:normal}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}small{font-size:80%}progress{display:inline-block;vertical-align:baseline}svg:not([fill]){fill:currentColor}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}textarea{overflow:auto;resize:vertical}[tabindex],a,area,button,input,label,select,summary,textarea{-ms-touch-action:manipulation;touch-action:manipulation}[type=search]{-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}code{font-family:Menlo,Monaco,Consolas,Courier New,monospace;word-break:break-all;word-wrap:break-word}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled=true],[disabled]{cursor:not-allowed}@media (prefers-reduced-motion:reduce){*{-webkit-animation-duration:.01ms;animation-duration:.01ms;-webkit-animation-iteration-count:1;animation-iteration-count:1;-webkit-transition-duration:.01ms;-o-transition-duration:.01ms;transition-duration:.01ms;scroll-behavior:auto}}:root{--desktop-container-width:70%;--mobile-font-size:22pt;--indent-size:1.5em}.gutters-none,.m-none{margin:0}.gutters-auto,.m-auto{margin:auto}.ml-auto{margin-left:auto}.mt-auto{margin-top:auto}.mb-auto{margin-bottom:auto}.mr-auto{margin-right:auto}.p-none{margin:0}.p-auto{margin:auto}.pl-auto{padding-left:auto}.pt-auto{padding-top:auto}.pb-auto{padding-bottom:auto}.pr-auto{padding-right:auto}@media (min-width:991px){body .desktop-gutters-none,body .desktop-m-none{margin:0}body .desktop-gutters-auto,body .desktop-m-auto{margin:auto}body .desktop-p-none{padding:0}body .desktop-p-auto{padding:auto}}.m-xs{margin:12px}.ml-xs,.mx-xs{margin-left:12px}.mt-xs,.my-xs{margin-top:12px}.mr-xs,.mx-xs{margin-right:12px}.mb-xs,.my-xs{margin-bottom:12px}.p-xs{padding:12px}.pl-xs,.px-xs{padding-left:12px}.pt-xs,.py-xs{padding-top:12px}.pr-xs,.px-xs{padding-right:12px}.pb-xs,.py-xs{padding-bottom:12px}.gutters-l-xs>:not(:first-child){margin-left:12px}.gutters-t-xs>:not(:first-child){margin-top:12px}.gutters-r-xs>:not(:last-child){margin-right:12px}.gutters-b-xs>:not(:last-child){margin-bottom:12px}@media (min-width:991px){body .desktop-m-xs{margin:12px}body .desktop-ml-xs,body .desktop-mx-xs{margin-left:12px}body .desktop-mt-xs,body .desktop-my-xs{margin-top:12px}body .desktop-mr-xs,body .desktop-mx-xs{margin-right:12px}body .desktop-mb-xs,body .desktop-my-xs{margin-bottom:12px}body .desktop-p-xs{padding:12px}body .desktop-pl-xs,body .desktop-px-xs{padding-left:12px}body .desktop-pt-xs,body .desktop-py-xs{padding-top:12px}body .desktop-pr-xs,body .desktop-px-xs{padding-right:12px}body .desktop-pb-xs,body .desktop-py-xs{padding-bottom:12px}body .desktop-gutters-l-xs>:not(:first-child){margin-left:12px}body .desktop-gutters-t-xs>:not(:first-child){margin-top:12px}body .desktop-gutters-r-xs>:not(:last-child){margin-right:12px}body .desktop-gutters-b-xs>:not(:last-child){margin-bottom:12px}}.m-sm{margin:48px}.ml-sm,.mx-sm{margin-left:48px}.mt-sm,.my-sm{margin-top:48px}.mr-sm,.mx-sm{margin-right:48px}.mb-sm,.my-sm{margin-bottom:48px}.p-sm{padding:48px}.pl-sm,.px-sm{padding-left:48px}.pt-sm,.py-sm{padding-top:48px}.pr-sm,.px-sm{padding-right:48px}.pb-sm,.py-sm{padding-bottom:48px}.gutters-l-sm>:not(:first-child){margin-left:48px}.gutters-t-sm>:not(:first-child){margin-top:48px}.gutters-r-sm>:not(:last-child){margin-right:48px}.gutters-b-sm>:not(:last-child){margin-bottom:48px}@media (min-width:991px){body .desktop-m-sm{margin:48px}body .desktop-ml-sm,body .desktop-mx-sm{margin-left:48px}body .desktop-mt-sm,body .desktop-my-sm{margin-top:48px}body .desktop-mr-sm,body .desktop-mx-sm{margin-right:48px}body .desktop-mb-sm,body .desktop-my-sm{margin-bottom:48px}body .desktop-p-sm{padding:48px}body .desktop-pl-sm,body .desktop-px-sm{padding-left:48px}body .desktop-pt-sm,body .desktop-py-sm{padding-top:48px}body .desktop-pr-sm,body .desktop-px-sm{padding-right:48px}body .desktop-pb-sm,body .desktop-py-sm{padding-bottom:48px}body .desktop-gutters-l-sm>:not(:first-child){margin-left:48px}body .desktop-gutters-t-sm>:not(:first-child){margin-top:48px}body .desktop-gutters-r-sm>:not(:last-child){margin-right:48px}body .desktop-gutters-b-sm>:not(:last-child){margin-bottom:48px}}.m-md{margin:108px}.ml-md,.mx-md{margin-left:108px}.mt-md,.my-md{margin-top:108px}.mr-md,.mx-md{margin-right:108px}.mb-md,.my-md{margin-bottom:108px}.p-md{padding:108px}.pl-md,.px-md{padding-left:108px}.pt-md,.py-md{padding-top:108px}.pr-md,.px-md{padding-right:108px}.pb-md,.py-md{padding-bottom:108px}.gutters-l-md>:not(:first-child){margin-left:108px}.gutters-t-md>:not(:first-child){margin-top:108px}.gutters-r-md>:not(:last-child){margin-right:108px}.gutters-b-md>:not(:last-child){margin-bottom:108px}@media (min-width:991px){body .desktop-m-md{margin:108px}body .desktop-ml-md,body .desktop-mx-md{margin-left:108px}body .desktop-mt-md,body .desktop-my-md{margin-top:108px}body .desktop-mr-md,body .desktop-mx-md{margin-right:108px}body .desktop-mb-md,body .desktop-my-md{margin-bottom:108px}body .desktop-p-md{padding:108px}body .desktop-pl-md,body .desktop-px-md{padding-left:108px}body .desktop-pt-md,body .desktop-py-md{padding-top:108px}body .desktop-pr-md,body .desktop-px-md{padding-right:108px}body .desktop-pb-md,body .desktop-py-md{padding-bottom:108px}body .desktop-gutters-l-md>:not(:first-child){margin-left:108px}body .desktop-gutters-t-md>:not(:first-child){margin-top:108px}body .desktop-gutters-r-md>:not(:last-child){margin-right:108px}body .desktop-gutters-b-md>:not(:last-child){margin-bottom:108px}}.m-lg{margin:192px}.ml-lg,.mx-lg{margin-left:192px}.mt-lg,.my-lg{margin-top:192px}.mr-lg,.mx-lg{margin-right:192px}.mb-lg,.my-lg{margin-bottom:192px}.p-lg{padding:192px}.pl-lg,.px-lg{padding-left:192px}.pt-lg,.py-lg{padding-top:192px}.pr-lg,.px-lg{padding-right:192px}.pb-lg,.py-lg{padding-bottom:192px}.gutters-l-lg>:not(:first-child){margin-left:192px}.gutters-t-lg>:not(:first-child){margin-top:192px}.gutters-r-lg>:not(:last-child){margin-right:192px}.gutters-b-lg>:not(:last-child){margin-bottom:192px}@media (min-width:991px){body .desktop-m-lg{margin:192px}body .desktop-ml-lg,body .desktop-mx-lg{margin-left:192px}body .desktop-mt-lg,body .desktop-my-lg{margin-top:192px}body .desktop-mr-lg,body .desktop-mx-lg{margin-right:192px}body .desktop-mb-lg,body .desktop-my-lg{margin-bottom:192px}body .desktop-p-lg{padding:192px}body .desktop-pl-lg,body .desktop-px-lg{padding-left:192px}body .desktop-pt-lg,body .desktop-py-lg{padding-top:192px}body .desktop-pr-lg,body .desktop-px-lg{padding-right:192px}body .desktop-pb-lg,body .desktop-py-lg{padding-bottom:192px}body .desktop-gutters-l-lg>:not(:first-child){margin-left:192px}body .desktop-gutters-t-lg>:not(:first-child){margin-top:192px}body .desktop-gutters-r-lg>:not(:last-child){margin-right:192px}body .desktop-gutters-b-lg>:not(:last-child){margin-bottom:192px}}.m-xl{margin:300px}.ml-xl,.mx-xl{margin-left:300px}.mt-xl,.my-xl{margin-top:300px}.mr-xl,.mx-xl{margin-right:300px}.mb-xl,.my-xl{margin-bottom:300px}.p-xl{padding:300px}.pl-xl,.px-xl{padding-left:300px}.pt-xl,.py-xl{padding-top:300px}.pr-xl,.px-xl{padding-right:300px}.pb-xl,.py-xl{padding-bottom:300px}.gutters-l-xl>:not(:first-child){margin-left:300px}.gutters-t-xl>:not(:first-child){margin-top:300px}.gutters-r-xl>:not(:last-child){margin-right:300px}.gutters-b-xl>:not(:last-child){margin-bottom:300px}@media (min-width:991px){body .desktop-m-xl{margin:300px}body .desktop-ml-xl,body .desktop-mx-xl{margin-left:300px}body .desktop-mt-xl,body .desktop-my-xl{margin-top:300px}body .desktop-mr-xl,body .desktop-mx-xl{margin-right:300px}body .desktop-mb-xl,body .desktop-my-xl{margin-bottom:300px}body .desktop-p-xl{padding:300px}body .desktop-pl-xl,body .desktop-px-xl{padding-left:300px}body .desktop-pt-xl,body .desktop-py-xl{padding-top:300px}body .desktop-pr-xl,body .desktop-px-xl{padding-right:300px}body .desktop-pb-xl,body .desktop-py-xl{padding-bottom:300px}body .desktop-gutters-l-xl>:not(:first-child){margin-left:300px}body .desktop-gutters-t-xl>:not(:first-child){margin-top:300px}body .desktop-gutters-r-xl>:not(:last-child){margin-right:300px}body .desktop-gutters-b-xl>:not(:last-child){margin-bottom:300px}}.col,.col-1,.col-2,.col-3,.col-4,.col-5,.col-6,.col-7,.col-8,.col-9,.col-10,.col-11,.col-12,body .desktop-col-1,body .desktop-col-2,body .desktop-col-3,body .desktop-col-4,body .desktop-col-5,body .desktop-col-6,body .desktop-col-7,body .desktop-col-8,body .desktop-col-9,body .desktop-col-10,body .desktop-col-11,body .desktop-col-12{position:relative;width:100%}@media (min-width:991px){.container{max-width:var(--desktop-container-width)}}.row{display:flex;flex-wrap:wrap}.col{flex:0 0 auto;width:auto;max-width:100%}.col-1{flex:0 0 8.33333%;max-width:8.33333%}.order-1{order:1}@media (min-width:991px){body .desktop-col-1{flex:0 0 8.33333%;max-width:8.33333%}}body .desktop-order-1{order:1}.col-2{flex:0 0 16.66667%;max-width:16.66667%}.order-2{order:2}@media (min-width:991px){body .desktop-col-2{flex:0 0 16.66667%;max-width:16.66667%}}body .desktop-order-2{order:2}.col-3{flex:0 0 25%;max-width:25%}.order-3{order:3}@media (min-width:991px){body .desktop-col-3{flex:0 0 25%;max-width:25%}}body .desktop-order-3{order:3}.col-4{flex:0 0 33.33333%;max-width:33.33333%}.order-4{order:4}@media (min-width:991px){body .desktop-col-4{flex:0 0 33.33333%;max-width:33.33333%}}body .desktop-order-4{order:4}.col-5{flex:0 0 41.66667%;max-width:41.66667%}.order-5{order:5}@media (min-width:991px){body .desktop-col-5{flex:0 0 41.66667%;max-width:41.66667%}}body .desktop-order-5{order:5}.col-6{flex:0 0 50%;max-width:50%}.order-6{order:6}@media (min-width:991px){body .desktop-col-6{flex:0 0 50%;max-width:50%}}body .desktop-order-6{order:6}.col-7{flex:0 0 58.33333%;max-width:58.33333%}.order-7{order:7}@media (min-width:991px){body .desktop-col-7{flex:0 0 58.33333%;max-width:58.33333%}}body .desktop-order-7{order:7}.col-8{flex:0 0 66.66667%;max-width:66.66667%}.order-8{order:8}@media (min-width:991px){body .desktop-col-8{flex:0 0 66.66667%;max-width:66.66667%}}body .desktop-order-8{order:8}.col-9{flex:0 0 75%;max-width:75%}.order-9{order:9}@media (min-width:991px){body .desktop-col-9{flex:0 0 75%;max-width:75%}}body .desktop-order-9{order:9}.col-10{flex:0 0 83.33333%;max-width:83.33333%}.order-10{order:10}@media (min-width:991px){body .desktop-col-10{flex:0 0 83.33333%;max-width:83.33333%}}body .desktop-order-10{order:10}.col-11{flex:0 0 91.66667%;max-width:91.66667%}.order-11{order:11}@media (min-width:991px){body .desktop-col-11{flex:0 0 91.66667%;max-width:91.66667%}}body .desktop-order-11{order:11}.col-12{flex:0 0 100%;max-width:100%}.order-12{order:12}@media (min-width:991px){body .desktop-col-12{flex:0 0 100%;max-width:100%}}body .desktop-order-12{order:12}.order-first{order:-1}@media (min-width:991px){body .desktop-order-first{order:-1}}.flex{display:flex}.align-top{align-items:flex-start}.align-center{align-items:center}.align-bottom{align-items:flex-end}.justify-left{justify-content:flex-start}.justify-center{justify-content:center}.justify-right{justify-content:flex-end}@media (min-width:991px){body .desktop-align-top{align-items:flex-start}body .desktop-align-center{align-items:center}body .desktop-align-bottom{align-items:flex-end}body .desktop-justify-left{justify-content:flex-start}body .desktop-justify-center{justify-content:center}body .desktop-justify-right{justify-content:flex-end}}.pos-fixed{position:fixed}.pos-abs{position:absolute}.pos-sticky{position:-webkit-sticky;position:sticky}.pos-rel{position:fixed}.d-inline{display:inline}.d-none{display:none}.d-block{display:block}.d-iblock{display:inline-block}@media (min-width:991px){.desktop-d-none{display:none}.desktop-d-block{display:block}.desktop-d-inline{display:inline}.desktop-d-iblock{display:inline-block}}@media (min-width:991px){.mobile-only{display:none}}@media (max-width:991px){.desktop-only{display:none}}.z-1{z-index:1}.z-2{z-index:2}.z-3{z-index:3}.z-4{z-index:4}.z-5{z-index:5}.z-6{z-index:6}.z-7{z-index:7}.z-8{z-index:8}.z-9{z-index:9}.z-10{z-index:10}.z-max{z-index:100}.z-least{z-index:-100}.text-right{text-align:right}.text-left{text-align:left}.text-center{text-align:center}h1,h2,h3,h4,h5,h6{text-transform:capitalize;font-weight:bolder}h6{font-size:.6em}h5{font-size:1.2em}h4{font-size:1.8em}h3{font-size:2.4em}h2{font-size:3em}h1{font-size:3.6em}@media (max-width:991px){body,html{font-size:var(--mobile-font-size)}}.text-capitalize{text-transform:capitalize}.text-upper{text-transform:uppercase}.text-lower{text-transform:lowercase}.indent{text-indent:var(--indent-size)}.italic{font-style:italic}.bold{font-weight:700}.bolder{font-weight:bolder}.w-10{width:10%}.h-10{height:10%}.w-20{width:20%}.h-20{height:20%}.w-30{width:30%}.h-30{height:30%}.w-40{width:40%}.h-40{height:40%}.w-50{width:50%}.h-50{height:50%}.w-60{width:60%}.h-60{height:60%}.w-70{width:70%}.h-70{height:70%}.w-80{width:80%}.h-80{height:80%}.w-90{width:90%}.h-90{height:90%}.w-100{width:100%}.h-100{height:100%}@media (min-width:991px){.desktop-w-10{width:10%}.desktop-h-10{height:10%}.desktop-w-20{width:20%}.desktop-h-20{height:20%}.desktop-w-30{width:30%}.desktop-h-30{height:30%}.desktop-w-40{width:40%}.desktop-h-40{height:40%}.desktop-w-50{width:50%}.desktop-h-50{height:50%}.desktop-w-60{width:60%}.desktop-h-60{height:60%}.desktop-w-70{width:70%}.desktop-h-70{height:70%}.desktop-w-80{width:80%}.desktop-h-80{height:80%}.desktop-w-90{width:90%}.desktop-h-90{height:90%}.desktop-w-100{width:100%}.desktop-h-100{height:100%}}.full-screen-width{width:100vw}.full-screen-height{height:100vh}body input[type=date],body input[type=datetime],body input[type=email],body input[type=number],body input[type=search],body input[type=text],body input[type=time],body input[type=url],body select,body textarea{border:1px solid #aaa;padding:5px;text-align:left}body input[type=date]:active,body input[type=date]:disabled,body input[type=date]:enabled,body input[type=date]:focus,body input[type=datetime]:active,body input[type=datetime]:disabled,body input[type=datetime]:enabled,body input[type=datetime]:focus,body input[type=email]:active,body input[type=email]:disabled,body input[type=email]:enabled,body input[type=email]:focus,body input[type=number]:active,body input[type=number]:disabled,body input[type=number]:enabled,body input[type=number]:focus,body input[type=search]:active,body input[type=search]:disabled,body input[type=search]:enabled,body input[type=search]:focus,body input[type=text]:active,body input[type=text]:disabled,body input[type=text]:enabled,body input[type=text]:focus,body input[type=time]:active,body input[type=time]:disabled,body input[type=time]:enabled,body input[type=time]:focus,body input[type=url]:active,body input[type=url]:disabled,body input[type=url]:enabled,body input[type=url]:focus,body select:active,body select:disabled,body select:enabled,body select:focus,body textarea:active,body textarea:disabled,body textarea:enabled,body textarea:focus{border:1px solid #000}body input[type=date]:disabled,body input[type=datetime]:disabled,body input[type=email]:disabled,body input[type=number]:disabled,body input[type=search]:disabled,body input[type=text]:disabled,body input[type=time]:disabled,body input[type=url]:disabled,body select:disabled,body textarea:disabled{background:#aaa}