hello
Jamie Oliver
Jamie OliverPukka Jubbly!
Hugh Laurie
SHARPY’S 30MINUTEPLUGIN PARTY
By using JIRA patterns
By using JIRA patternsAUI Components
By using JIRA patternsAUI ComponentsOrigin Namespacing
B.A.C.O.N
Venue
VenueLayout - AUI Groups & Items
VenueBar Tab(s)
VenueBar Tab(s)  • Horizontal
VenueBar Tab(s)  • Horizontal  • Vertical
VenueBar Tab(s)  • Horizontal  • Vertical  • Same Markup
VenueAUI Toolbar
VenueJIRA Module
VenueJIRA Module
VenueJIRA Module
Guests
GuestsJIRA Single Select
GuestsJIRA Single Select
GuestsJIRA Multi Select
GuestsJIRA Multi Select
GuestsJIRA Checkbox Select
GuestsJIRA Checkbox Select
GuestsAUI Messages
GuestsAUI Messages
GuestsAUI Messages
GuestsJIRA / AUI Dialog
GuestsJIRA / AUI Dialog
GuestsJIRA / AUI Dialog
Menu
MenuDropdowns
MenuDropdowns
Menuform(ulate) courses
MenuHit the button on the food processor
MenuHit the button on the food processor
MenuHit the button on the food processor
MenuCheck item details
MenuCheck item details
MenuCheck item details
MenuLay the table
MenuLay the table
The Party
The PartyShow/Hide
The PartyShow/Hide
The PartySpecial food requirements
The PartySpecial food requirements
The PartySpecial food requirements
The PartyMay have to hover over users
The PartyMay have to hover over users
The PartyMay have to hover over users
The PartyMay have to hover over users
The PartyFamous guests? Media Queries
The PartyPlace Names
The Party        Place Namespacing.your-plugin .jira-style { ... }
The Party  LESS is more.your-plugin {  .jira-style { ... }  }
The PartyLet’s mixin some variable ingredients
The PartyLet’s mixin some variable ingredients       @gutter: 16px;       .foo {       margin-bottom: @gutter * 2;       }
The PartyLet’s mixin some variable ingredients    .border-box () {        -moz-box-sizing: border-box;        -ms-box-sizi...
Clearing Up
Clearing UpThis is !important
Clearing UpThis is !importantPlease don’t use it
AUIdeveloper.atlassian.com/display/AUI/    Atlassian Design Guidlines  developer.atlassian.com/design/               @msharp
Taking the Look of Your JIRA Plugins from "Oh" to "Whoah!", AtlasCamp US 2012
Upcoming SlideShare
Loading in...5
×

Taking the Look of Your JIRA Plugins from "Oh" to "Whoah!", AtlasCamp US 2012

1,333

Published on

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

Published in: Technology, Business
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,333
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
16
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • 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
  • Taking the Look of Your JIRA Plugins from "Oh" to "Whoah!", AtlasCamp US 2012

    1. 1. hello
    2. 2. Jamie Oliver
    3. 3. Jamie OliverPukka Jubbly!
    4. 4. Hugh Laurie
    5. 5. SHARPY’S 30MINUTEPLUGIN PARTY
    6. 6. By using JIRA patterns
    7. 7. By using JIRA patternsAUI Components
    8. 8. By using JIRA patternsAUI ComponentsOrigin Namespacing
    9. 9. B.A.C.O.N
    10. 10. Venue
    11. 11. VenueLayout - AUI Groups & Items
    12. 12. VenueBar Tab(s)
    13. 13. VenueBar Tab(s) • Horizontal
    14. 14. VenueBar Tab(s) • Horizontal • Vertical
    15. 15. VenueBar Tab(s) • Horizontal • Vertical • Same Markup
    16. 16. VenueAUI Toolbar
    17. 17. VenueJIRA Module
    18. 18. VenueJIRA Module
    19. 19. VenueJIRA Module
    20. 20. Guests
    21. 21. GuestsJIRA Single Select
    22. 22. GuestsJIRA Single Select
    23. 23. GuestsJIRA Multi Select
    24. 24. GuestsJIRA Multi Select
    25. 25. GuestsJIRA Checkbox Select
    26. 26. GuestsJIRA Checkbox Select
    27. 27. GuestsAUI Messages
    28. 28. GuestsAUI Messages
    29. 29. GuestsAUI Messages
    30. 30. GuestsJIRA / AUI Dialog
    31. 31. GuestsJIRA / AUI Dialog
    32. 32. GuestsJIRA / AUI Dialog
    33. 33. Menu
    34. 34. MenuDropdowns
    35. 35. MenuDropdowns
    36. 36. Menuform(ulate) courses
    37. 37. MenuHit the button on the food processor
    38. 38. MenuHit the button on the food processor
    39. 39. MenuHit the button on the food processor
    40. 40. MenuCheck item details
    41. 41. MenuCheck item details
    42. 42. MenuCheck item details
    43. 43. MenuLay the table
    44. 44. MenuLay the table
    45. 45. The Party
    46. 46. The PartyShow/Hide
    47. 47. The PartyShow/Hide
    48. 48. The PartySpecial food requirements
    49. 49. The PartySpecial food requirements
    50. 50. The PartySpecial food requirements
    51. 51. The PartyMay have to hover over users
    52. 52. The PartyMay have to hover over users
    53. 53. The PartyMay have to hover over users
    54. 54. The PartyMay have to hover over users
    55. 55. The PartyFamous guests? Media Queries
    56. 56. The PartyPlace Names
    57. 57. The Party Place Namespacing.your-plugin .jira-style { ... }
    58. 58. The Party LESS is more.your-plugin { .jira-style { ... } }
    59. 59. The PartyLet’s mixin some variable ingredients
    60. 60. The PartyLet’s mixin some variable ingredients @gutter: 16px; .foo { margin-bottom: @gutter * 2; }
    61. 61. The PartyLet’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; }
    62. 62. Clearing Up
    63. 63. Clearing UpThis is !important
    64. 64. Clearing UpThis is !importantPlease don’t use it
    65. 65. AUIdeveloper.atlassian.com/display/AUI/ Atlassian Design Guidlines developer.atlassian.com/design/ @msharp
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×