Hello world!
\n```\n\nThe syntax is a little bit clunky, and gets a bit harder to read as we add\nmore and more css rules. And if we wanted to make it responsive, e.g change\nthe font size on smaller screens, we'd need to give it a class name and write\nsome bulky CSS media queries. We also can't access selectors like `:hover` at all\nthis way.\n\nUsing this package means that we get a nicer style props syntax, and can\neasily make this responsive using [Styled System's responsive style](https://styled-system.com/responsive-styles) syntax.\nWith this in mind, the example above becomes:\n\n```jsx\n\n Hello world!\n
\n```\n\nNow instead of using the standard style prop we have a prop for every css\nproperty, e.g `color` and `fontSize`. If we want to make a property responsive we\nsimply pass an array of strings instead of just one string, where each element\nin the array applies the rule to a certain screen size. In this example, the\nfont size is 16px on small screens, and 18px on all larger screens. Notice\nthat `` becomes `
`.\n\nAnother benefit we get is access to direct CSS selector props. This means that\nwe can add rules for selectors such as`:hover` directly\nthrough a prop in React. To change color, for example, on hover we do the\nfollowing:\n\n```jsx\n
\n Hello world!\n
\n```\n\nBy adding a CSS selector name such as `hover` as a prop we get quick, direct access to\nselectors we want to use and don't have to write separate css or use bulky\n[template literals](https://styled-components.com/docs/basics#pseudoelements-pseudoselectors-and-nesting). Taking this even further we can combine this with the responsive syntax:\n\n```jsx\n\n Hello world!\n
\n```\n\nNow when we hover on small screens the color is green, and on larger screens it is blue - no bulky CSS with media queries required and not a template literal in sight!\n\n## Installation\n\nInstall `html-styled` and its peer dependencies.\n\n```\nyarn add html-styled styled-system @styled-system/css styled-components\n```\n\nor\n\n```\nnpm install html-styled styled-system @styled-system/css styled-components\n```\n\n> ### What are peer dependencies?\n>\n> These are dependencies that we rely on, but instead of bundling them in our package we get you to install them separately. This keeps our package size down and allows you to install specific versions of each dependency if you need to.\n\n## FAQ\n\n### Why would I use this?\n\n- [x] You're hacking together a small app with React\n- [x] You're fine using HTML but also need a bit more to quickly prototype\n- [x] You like `styled-system`'s features like style props and reponsive props but can't be bothered setting it up\n\n### Is it good for bigger projects?\n\nProbably not, since it's essentially just inline css but easier and this isn't very scalable. However, you can make reusable components with them and make you're own mini design system if desired.\n\n### Why are the components in uppercase?\n\nBelieve it or not, HTML element names are case insensitive, so uppercase HTML elements are actually [valid syntax](https://developer.mozilla.org/en-US/docs/Web/HTML). However, since conventionally developers use lowercase element names you can easily spot which elements you write are standard HTML and which ones are from `html-styled`. React component names are [normally just capitalised](https://reactjs.org/docs/components-and-props.html) as well, so you can also distunguish between normal components and `html-styled` components.\n","readmeFilename":"README.md"}