2016-10-02 01:22:30 +08:00
<!DOCTYPE html>
< html >
< head >
< title > minireset.css: a tiny modern CSS reset< / title >
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
< meta property = "og:url" content = "http://jgthms.com/minireset.css/" >
< meta property = "og:type" content = "website" >
< meta property = "og:title" content = "minireset.css" >
< meta property = "og:description" content = "A tiny modern CSS reset" >
< meta property = "og:image" content = "http://jgthms.com/minireset.css/minireset.png" >
< meta property = "og:image:type" content = "image/png" >
< meta property = "og:image:width" content = "1200" >
< meta property = "og:image:height" content = "630" >
< meta name = "twitter:card" content = "summary_large_image" >
< meta name = "twitter:site" content = "@jgthms" >
< meta name = "twitter:creator" content = "@jgthms" >
< meta name = "twitter:title" content = "minireset.css" >
< meta name = "twitter:description" content = "A tiny modern CSS reset" >
< meta name = "twitter:image" content = "http://jgthms.com/minireset.css/minireset.png" >
< link rel = "apple-touch-icon" sizes = "180x180" href = "http://jgthms.com/minireset.css/favicons/apple-touch-icon.png" >
< link rel = "icon" type = "image/png" href = "http://jgthms.com/minireset.css/favicons/favicon-32x32.png" sizes = "32x32" >
< link rel = "icon" type = "image/png" href = "http://jgthms.com/minireset.css/favicons/favicon-16x16.png" sizes = "16x16" >
< link rel = "manifest" href = "http://jgthms.com/minireset.css/favicons/manifest.json" >
< link rel = "mask-icon" href = "http://jgthms.com/minireset.css/favicons/safari-pinned-tab.svg" color = "#fc0c18" >
< link rel = "shortcut icon" href = "http://jgthms.com/minireset.css/favicons/favicon.ico" >
< meta name = "msapplication-config" content = "http://jgthms.com/minireset.css/favicons/browserconfig.xml" >
< meta name = "theme-color" content = "#ffffff" >
< link rel = "stylesheet" type = "text/css" href = "docs.css" >
< / head >
< body >
< div class = "content" >
< header class = "header" >
< figure >
< img src = "images/minireset-logo.png" alt = "minireset.css logo" >
< / figure >
< h1 > minireset.css< / h1 >
< p > A tiny modern CSS reset< / p >
< / header >
< div class = "ghbtns" >
2018-04-09 00:22:23 +08:00
< iframe src = "https://ghbtns.com/github-btn.html?user=jgthms&repo=minireset.css&type=star&count=true&size=large" frameborder = "0" scrolling = "0" width = "150px" height = "30px" > < / iframe >
2016-10-02 01:22:30 +08:00
< iframe src = "https://ghbtns.com/github-btn.html?user=jgthms&repo=minireset.css&type=fork&count=false&size=large" frameborder = "0" scrolling = "0" width = "80px" height = "30px" > < / iframe >
< / div >
< nav class = "nav" >
< a class = "button" href = "https://raw.githubusercontent.com/jgthms/minireset.css/master/minireset.min.css" >
< span > Download < strong > minireset.min.css< / strong > < / span >
2017-04-14 21:07:19 +08:00
< small > 533 Bytes minified< / small >
2016-10-02 01:22:30 +08:00
< / a >
< p class = "or" > or< / p >
< pre class = "npm" > npm install minireset.css< / pre >
< / nav >
2018-06-03 17:02:42 +08:00
<!-- <script src="vendor/native.js"></script>
2018-04-09 00:22:23 +08:00
< script >
_native.init("CKYI42QI", {
targetClass: 'native-js',
fallback: `< a href = "https://jgthms.com/css-in-44-minutes-ebook" class = "native-flex" target = "_blank" >
< style >
.native-js {
background: linear-gradient(-30deg, #4f38a4, #a244bc 45%, #4f38a4 45%) #4f38a4;
}
.native-details {
color: #FFFFFF !important;
}
.native-details:hover {
color: #FFFFFF !important;
}
.native-cta {
color: #FFFFFF;
background-color: #3bb76d;
}
.native-cta:hover {
color: #native_cta_color_hover;
background-color: #3bb76d;
}
< / style >
< div class = "native-main" >
< img class = "native-img" src = "https://bulma.io/images/fortyfour-native.png" >
< div class = "native-details" >
< span class = "native-company" > CSS in 44 minutes< / span >
< span class = "native-desc" > Learn how to build your own webpage from scratch!< / span >
< / div >
< / div >
< span class = "native-cta" > Buy the book< / span >
< / a > `
});
< / script >
< div class = "native-js" >
< a href = "#native_link#" class = "native-flex" >
< style >
.native-js {
background: linear-gradient(-30deg, #native_bg_color#E5, #native_bg_color#E5 45%, #native_bg_color# 45%) #fff;
}
.native-details {
color: #native_color# !important;
}
.native-details:hover {
color: #native_color_hover# !important;
}
.native-cta {
color: #native_cta_color#;
background-color: #native_cta_bg_color#;
}
.native-cta:hover {
color: #native_cta_color_hover;
background-color: #native_cta_bg_color_hover#;
}
< / style >
< div class = "native-main" >
< img class = "native-img" src = "#native_logo#" >
< div class = "native-details" >
< span class = "native-company" > #native_company#< / span >
< span class = "native-desc" > #native_desc#< / span >
< / div >
< / div >
< span class = "native-cta" > #native_cta#< / span >
< / a >
2018-06-03 17:02:42 +08:00
< / div > -->
2018-04-09 00:22:23 +08:00
2016-10-02 01:22:30 +08:00
< main class = "main" >
< ul >
< li > < strong > < em > resets< / em > the font sizes< / strong > so that using semantic markup doesn't affect the styling< / li >
< li > < strong > < em > resets< / em > the block margins< / strong > so that the spacing is only applied when you need it< / li >
< li > < strong > < em > resets< / em > tables< / strong > so that tabular data only takes the space it needs< / li >
< li > < strong > < em class = "preserves" > preserves< / em > the inline paddings< / strong > so that buttons and inputs keep their default layout< / li >
< li > < strong > < em class = "sets" > sets< / em > the border-box box sizing< / strong > so that borders and paddings don't affect the set dimensions< / li >
< li > < strong > < em class = "sets" > sets< / em > responsive media elements< / strong > so that images and embeds scale with the browser width< / li >
< / ul >
< / main >
< a class = "fork-me" href = "https://github.com/jgthms/minireset.css" > < img src = "https://raw.githubusercontent.com/philwareham/github-ribbons-retina/master/fork-me%402x.png" alt = "Fork me on GitHub" > < / a >
< / div >
< footer class = "footer" >
< a href = "https://github.com/jgthms/minireset.css/blob/master/LICENSE" >
< span > License< / span >
< strong > MIT< / strong >
< / a >
< a href = "https://github.com/jgthms/minireset.css" >
< span > On< / span >
< strong > GitHub< / strong >
< / a >
< a href = "http://jgthms.com" >
< span > By< / span >
< strong > @jgthms< / strong >
< / a >
< / footer >
< / body >
< / html >
