Taking the Look of Your JIRA Plugins from "Oh" to "Whoah!", AtlasCamp US 2012
•Télécharger en tant que KEY, PDF•
3 j'aime•1,421 vues
Mike Sharp, Design Engineer You've built your plugin and it works great. But it just doesn't seem to look right. This talk will cover: * Some simple code structuring that will style your plugin to match JIRA * Using AUI for some core functionality (like messages) * Namespacing your CSS/LESS to prevent unfortunate side effects and some things to avoid, like !important (AKA don't make me break out the 'C'* word) If I have time I'll also delve into using LESS mixins for future-proofing the Look and Feel of your plugin.*Cascade
Recommandé
Contenu connexe
Tendances
Tendances (15)
En vedette
Plus de Atlassian
Plus de Atlassian (20)
Dernier
Dernier (20)
Taking the Look of Your JIRA Plugins from "Oh" to "Whoah!", AtlasCamp US 2012
- 1. hello
- 2. Jamie Oliver
- 4. Hugh Laurie
- 7. By using JIRA patterns
- 8. By using JIRA patterns AUI Components
- 9. By using JIRA patterns AUI Components Origin Namespacing
- 10. B.A.C.O.N
- 11. Venue
- 12. Venue Layout - AUI Groups & Items
- 13. Venue Bar Tab(s)
- 14. Venue Bar Tab(s) • Horizontal
- 15. Venue Bar Tab(s) • Horizontal • Vertical
- 16. Venue Bar Tab(s) • Horizontal • Vertical • Same Markup
- 21. Guests
- 31. Guests JIRA / AUI Dialog
- 32. Guests JIRA / AUI Dialog
- 33. Guests JIRA / AUI Dialog
- 34. Menu
- 35. Menu Dropdowns
- 36. Menu Dropdowns
- 38. Menu Hit the button on the food processor
- 39. Menu Hit the button on the food processor
- 40. Menu Hit the button on the food processor
- 46. The Party
- 49. The Party Special food requirements
- 50. The Party Special food requirements
- 51. The Party Special food requirements
- 52. The Party May have to hover over users
- 53. The Party May have to hover over users
- 54. The Party May have to hover over users
- 55. The Party May have to hover over users
- 56. The Party Famous guests? Media Queries
- 58. The Party Place Namespacing .your-plugin .jira-style { ... }
- 59. The Party LESS is more .your-plugin { .jira-style { ... } }
- 60. The Party Let’s mixin some variable ingredients
- 61. The Party Let’s mixin some variable ingredients @gutter: 16px; .foo { margin-bottom: @gutter * 2; }
- 62. The Party Let’s mixin some variable ingredients .border-box () { -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .foo { .border-box; padding:0 @gutter; width:200px; }
- 63. Clearing Up
- 64. Clearing Up This is !important
- 65. Clearing Up This is !important Please don’t use it
- 66. AUI developer.atlassian.com/display/AUI/ Atlassian Design Guidlines developer.atlassian.com/design/ @msharp
Notes de l'éditeur
- Im here to talk to you about how you can style up your (primarily) JIRA plugins to look and feel more like native Atlassian controls. There’ll be a few code examples, but this isn’t a technical talk, more just how you can get some quick wins with very little effort.\n\nSo lets get started... I’ve been compared to two people throughout my life...\n
- \n
- And...\n
- And Hugh Laurie, but not so much during the House days, more the...\n
- Prince Regent. As I can’t think of a way to connect Lupus with CSS & HTML we’ll run with the Jamie and have...\n
- How are we going to achieve this?\n
- Everything you see here can be used in JIRA 5.x, some in 4.4, 4.3, some even in 4.0\n
- AUI, the Bootstrap of Atlassian, has been around since 2008 and is used by all the core products. There are some very exciting things happening in AUI at the moment and it will pay to keep an eye on the documentation on Developers.atlassian.com - More about that later though.\n
- It’s good to know where you come from and where you are going.\n
- Who doesn’t love Bacon...\n
- We’re going to need somewhere to host this party.\n
- quick and easy grid layout. Adaptive for multiple columns and fixed widths\n
- Ok, you may have to set up a Tab for drinks - AUI, can be either vertical or horizontal\n
- Ok, you may have to set up a Tab for drinks - AUI, can be either vertical or horizontal\n
- Ok, you may have to set up a Tab for drinks - AUI, can be either vertical or horizontal\n
- Same basic markup for both, just change the class on aui-tabs.\n
- Make sure you have the right tools to do the job.\nCan split across the page if you like.\n
- JIRA has had a module pattern since 4.0 and can be either a basic construct which can have functionality added, like collapsing content and operation links\n
- JIRA has had a module pattern since 4.0 and can be either a basic construct which can have functionality added, like collapsing content and operation links\n
- JIRA has had a module pattern since 4.0 and can be either a basic construct which can have functionality added, like collapsing content and operation links\n
- We need to select guests. JIRA has two options\n
- If you’re planning an intimate dinner for two, the SingleSelect is what you’re after. \n
- has type ahead\n
- For Shindigs, Hootenannies and general shenanigans, MultiSelect is your friend (picker).\n
- Again, type ahead, fully navigable via the keyboard\n
- Very large list of people? Search and select individuals on a case by case basis.\n
- All use the same HTML, a standard select element, with the hidden class. As explained by JC yesterday.\n
- To get those RSVP’s out AUI provides a number of message options. These can be included statically or generated via js.\n
- To get those RSVP’s out AUI provides a number of message options. These can be included statically or generated via js.\n
- Same basic structure, just need to change the class on aui-message and update the icon-class.\n
- We all know what a dialog is...\n
- they command you to DO SOMETHING IN HERE!!\nThree main ways of communicating with your guests.\n\nJIRA Dialog opens a linked page, AUI Dialog is generated via JS and has internal navigation built in.\n
- There’s also the inline dialog for giving some context.\n
- OK. Now we have the invites out, we need some food.\n
- Two flavours to choose from.\nOriginal are a little beyond their use-by date\n“2” Have a nice fresh taste that works well with other ingredients\n
- Two flavours to choose from.\nOriginal are a little beyond their use-by date\n“2” Have a nice fresh taste that works well with other ingredients\n
- Sorry, they don’t get any better...\nForms have been part of AUI since it’s inception (I should know, I wrote them)\n
- Fancy button styling to give your pages a little bit of zest.\n
- Fancy button styling to give your pages a little bit of zest.\n
- Fancy button styling to give your pages a little bit of zest.\n
- For displaying small groups of information\n
- For displaying small groups of information\n
- For displaying small groups of information\n
- For larger sets of information.\n
- Just make sure you use the correct markup of th’s inside thead.\n\nThe headers attribute associates the cell with a header - accessibility.\n
- Now to add some finishing touches.\n
- The food’s hidden away in the oven and you want to check how it’s doing.\nUse JIRA’s show/hide ‘twixi’ to open the door and have a peek at the tasty treat inside.\nBe careful though. Using the oven door too much lets all the heat out and can leave your guests dissapointed.\n
- The food’s hidden away in the oven and you want to check how it’s doing.\nUse JIRA’s show/hide ‘twixi’ to open the door and have a peek at the tasty treat inside.\nBe careful though. Using the oven door too much lets all the heat out and can leave your guests dissapointed.\n
- There’s usually at lease one guest who needs something a little different...\n
- JIRA can target specific browsers via CSS. Not just IE. Using .webkit, .msie-8, .mozilla we can tweak our meal to be perfect for everyone.\n
- JIRA can target specific browsers via CSS. Not just IE. Using .webkit, .msie-8, .mozilla we can tweak our meal to be perfect for everyone.\n\nJust remember it needs to sit outside your namespace as the browser class is applied to the HTML element.\n
- To make sure everyone has a drink it may be necessary to hover over users to check their glass\n
- To make sure everyone has a drink it may be necessary to hover over users to check their glass\n
- To make sure everyone has a drink it may be necessary to hover over users to check their glass\n
- Just add the user hover class, a rel attribute to the user name and the path to the users profile page.\n
- Who’s familiar with media queries?\n\nJIRA is a banquet. There’s a lot of food to consume and it requires a large table. But what about the kids table, why should they loose out. Some subtle styling tweaks can give all your guests a pleasant experience. \n\n\n
- \n
- If there’s one take away from this - it’s namespace your CSS.\nBy adding a class (ID’s are a specificity nightmare) to your plugin’s container and prefixing your styles with it, you can prevent unwelcome side effects. Think also about your class names. Common words are just that and your styling could override core JIRA\nTry and make the class meaningful. .gh could be GreenHopper or GitHub...\n
- Who’s heard of LESS? CSS on Steroids\nMake sure you include the web resource for the LESS transformer\n\nNested Rules - makes Namespacing a doddle, even if you are more comfortable writing normal CSS, just wrap it in a class that encompasses your plugin.\n
- Variables - Specify once, re-use everywhere\n\n
- Variables - Specify once, re-use everywhere\n\nCould say @gutter * 2 = 32px\n
- Mixins - like a variable, but contains the properties of a whole class (rounded corners, vendor prefixing) can take arguments\n
- A nasty mess.\n
- \n
- Specificity trump card which can have unexpected consequences.\n\nThink about what you are trying to override and why. Namespacing could probably be enough to get a greater specificity for your styling. Your plugin class, in front of the stack of classes you are trying to override should be enough.\n\nSometimes you may be trying to override styling added via js, in which really make sure you have namespaced.\n\n\n\n
- With respect to our exciting new design language. A large proportion of the styling will be available from the next major release of AUI.\n\nBe Aware!! We are in flux at the moment. Be aware some patterns (like page tabs) are being deprecated in AUI.\n\nWe are also launching soy templates, which, if you choose, you can consume into your plugin. The big advantage of this is if we add features and improvements (as browsers become able to support them) the templates will handle those changes for you. Just update, test and away you go. \n