
There is a little known selector in CSS, and it looks like this:
[id^='bacon'] {/*styling here*/}
bacon
. For example, it would style <div id="baconislife">
, <div id="bacon4evr">
, and <span id="baconisgood">
.You can see it in use below. Just switch through the HTML, CSS, and Result tabs.
[id^='button'] {
width: 250px !important;
height: 50px !important;
margin: 10px !important;
border-radius: 8px !important;
background-color: #3F3F3F !important;
}
#nope {
width: 250px;
height: 50px;
background: orange;
margin: 10px;
I'm sure you can now see just how useful this will be when styling multiple items in Hype. For all intents and purposes, you have classes!
Update: Hype 1.6 now supports the ability to edit the document <head> from within the program! See this for more information. The result: you don't have to export to add the code to the <head>.
Now, how to implement this:
1. Pick what you want to have common between all your id's.
2. In Hype's identity inspector, give each element you want to style an id that begins with what you decided on in step one (in the text area under Unique Element ID).
3. Export the file to a folder, making sure you have the "also save .html file" option checked.
4. Open that .html file in your favorite text editor (I use the free TextWrangler for this), and find the
<style>
tag. Just after that, insert your newly learned selector ([id^='bacon']
) with what you picked in step one replacing bacon.
5. Add your declarations.
6. Although I don't recommended this for most CSS coding, end all of your values with
!important
. This will ensure that Hype's styling does not override your custom styling.7. Test and deploy your project just as you always have.
Tada! You now have CSS classes (almost) in Hype!
No comments:
Post a Comment