Designing apps with Calcite Maps/Bootstrap

thanks for coming to designing apps with Kelsey Matheson bootstrap like all my sessions here are the conference if you go to slides the comi a lot from was you can find all the slides and the links and everything that I'm showing you here so be sure to visit that site if you want to follow along or just refer to the resources afterwards so just a show of hands how many people here are familiar with Cal sitemaps and bootstrap maybe have worked on a project before some people okay very cool all right so we only have about 25 minutes here so I'm just gonna cover a few background detail items and then kind of move into a bunch of demos and show-and-tell so calcite is a it's a design system that was designed and implemented by ESRI there's different companies and that have different design systems that they use and that the foundation of the calcite project was was obviously the color model the UI elements and the user interactions the UX interactions so whatever this all boils down to is a bunch of really smart design people got together in room and came up with a model that we could use to build all of our software one of the first incarnations of that you've already seen maybe in that search is Pro the ArcGIS for j/s API also implements calcite design patterns and models so it's a whole bunch of things for us and I guess I got the core of it what's really important are the color scheme so this was something that was defined you may have something like this for your organization or you may have requirements from different customers to implement color scheme schemes in your application something that's interesting here is we need to lay out the colors and you look at the the capital a double-a on the side it kind of gives you a sense of how usable this is in different environments so this basically shows you what like the minimum contrast level is for usability testing into past usability testing okay so for example down in the right hand corner the gray has the capital of double a's and then as a contrast above it it has the other gray double a's and so you can see what would be usable on the web and would pass the usability test versus Yeller so this is kind of a handy thing to do and layout calcite web is basically the framework that ESRI built that's roughly equivalent to bootstrap in foundation and some of the other frameworks that are out there it's a Brian branding guideline we've been using it to build our websites we use it to build our chests for developers it's super lightweight and fast and responsive and if you want to see it and you want to take a look at how we're building out our website in with different resources you can go to the calcite web github repo and there's a few things like I like to point out to people here again this is a design model for the company to follow so we have things like you know what typeface should we use there's a custom grid system in here which is basically how you layout your web pages right so bootstrap has a grid system you can use grid you can use flex you know we use flex and columns here this is just basically how we space things out there are icons and actually I'll reference these because these are handy to include in your web applications so if you're building a web mapping application and you need something like a dashboard icon or something like that then you can just click on these and get the SVG's for any one of these alright so like I said you may or may not want to use this framework but I'm definitely gonna point out the resources that can be helpful to you we've gone through and provided gradient colors like for grayscale and different parts of the UI and then we have a whole bunch of different components let me just point out something here like things that you would suspect in any web framework like buttons and then like the behavior button clear as an example so you can go through these and these all have different use cases and so forth group buttons so this if you're familiar with bootstrap or any other framework this should look pretty familiar to you one that's really common to use obviously are our panels so we have different color panels and really strong contrasts for different things on the pattern side you know we try to help out one another by putting together patterns like development patterns that are useful like for example when you want to show a modal here's what our modal looks like so whenever you need a modal it should look and behave just like this one so you don't have to worry about the color of buttons what the cancel button should look like and so forth you can just go and grab this pattern and implement it on the south side you can go through and recompile the CSS yourself just by changing the sass variables and that will give you like a completely different look and feel an example of that is our dark theme moving to our like theme so the dark theme has basically been generated just by going through and replacing the CSS variables here with our dark variables so that's kind of handy other things you might be interested in some of the examples I won't go through all those but there are examples what I want to point out though is the guide if you're building a mapping system and you have a set of designers and developers it's really important to get to put together these style guides so here's an example of a very simple HTML style guide it shows you the formatting and the spacing that we use the class the attribute order how to you basically so everybody's doing it the same way on the CSS side again it's just you know how to stack CSS selectors really simple things but this is really important to have in place before you start projects so that you know your designer and your developer and everybody that's collaborating on a project can do things the same way and the same thing for JavaScript you know you know to two spaces for indentation new lines no trailing whitespace use semicolons all the time even though you don't need them in JavaScript so these are our guidelines so if you never use calcite web then at least what you might be able to do is just derive some ideas from those guidelines and those style guides that are in there okay and I think the fonts in the the the font symbols the oceany the icons can be helpful as well there's another project out there called calcite bootstrap again this is on github as well and there are a couple teams at ESRI that use calcite bootstrap like the the open data team and the hub team so they're using this and basically this is bootstrap with a calcite brand on top of it so you can see all the corners are square as an example if we go to the modal then this is what the model looks like see what else I mean it just has all of the calcite styles but in the bootstrap framework so there's a getting started page it shows you how to link up and bring in the components that you need to build out the CSS here are the calcite colors talks a little bit about type and the fact that we use a veneer next and there's a bunch of patterns in here that you can you can follow along and this is really neat things to like for example if you wanted a card that was a round card that's already implemented for you so you just basically say card base card shape and pull that in and you get your round image for the card so that's calcite bootstrap that's another project that you're gonna see out there in the wild I just kind of bring it to your attention so you kind of have a full idea of what's out there so finally calcite Maps so this is a project that I built a couple of years ago and it's basically bootstrap but it's only a couple pieces of bootstrap that are compiled down and the CSS is designed to build mapping applications it works for a number of different frameworks you can build desktop and mobile applications well hopefully very quickly if I've done it right so hopefully you're familiar with bootstrap I won't get into that we don't have a lot of time but I really only borrow three pieces from bootstrap and that is the navigation component and then the drop-down menu and then the panel but these have been pretty heavily customized from the generic bootstrap ones that you might be familiar with but that's basically it three pieces because at its most basic level that's all you need to build a mapping app really is some sort of panel to show a legend or some set of controls and then a drop-down menu so you can iterate and open those and then a navigation bar with a search component so what I'm gonna show you now well let me back up a little bit I'm just gonna go up to the github repo and on the repo there's a little web page here that basically just highlights and it shows you what kinds of things you can do with Cal site Maps so this is Cal site maps and I built this thing called style Explorer to kind of help explore the different styles that you could produce for example here's an example of bringing up the modal so this brings up your your modal dialog and it has a quit button on it as well and if I want to click on the menu then it's gonna bring up each panel that's associated with the menu and this stuff's really super easy to wire up for example all you do is you add a menu and then you reference the href to the panel in HTML and everything just works you don't have to wire up JavaScript or do anything like that it just kind of comes together but what I want to show you is go to the settings I can just do something like Springs map and just gonna apply like title over here to kind of brand this a little bit I guess another thing I should show too is you can just I use the navigation up here and I use the calcite top highlighting to highlight the navigation so you can move between views another thing is you can do search so this is the default search widget that from the jsapi but I've customized it to expand and contract on the title bar so I just put in Palm Springs here and we'll just kind of zoom into to an area okay so that's that you can bring in your own web map if you want to play around with it here again the whole idea here is just the test like different colors and themes let me go over to the calcite colors and I'll pick one of my favorite ones like dark blue so you here you can style your app now these panels will contract down to an icon size and they will expand the other thing that I always forget to show is let me just see here this is gonna reset our app but that's okay this will allow me to show you how this works in different mobile applications so the panel expands and it contracts the search will expand as well so I'll just put in Palm Springs again and we'll go over here and the cool thing is that when the pop-up is visible it's gonna auto hide whatever panel there is like for example if I open base Maps the pop-up appears and if I do the opposite then the pop-up will will subside so you can just see how this works in different frameworks and when I dock the pop-up you can see that it automatically synchronizes with the panel so it never leaves a panel on there because you may want the pop-up docked so that's a little bit of the JavaScript coding that I built in there just to kind of synchronize the UI components so yeah let's just jump back and see here let me go back to this guy okay I'm gonna go back to the themes so we can change the text the dark if you want we can do dark widgets as well and that's gonna pull in the dark styling which you can see better when I bring up the pop-up okay so now all the widgets are dark again these are just variations and that's it's a very flexible framework I guess in that regard so we'll just go back to the light theme and actually let me pick a color we can pick our own color if we want to or not just you know locked into the calcite color so we could pick whatever blue or whatever branding that you want to make this it's totally possible okay next I want to talk about the layouts that are possible so you can do top you can do bottom so that's basically gonna flip your app around so the navbar is at the bottom some people like this design more on mobile just because the the touch menus at the bottom so that's definitely an option and then there's other things to you like inline left so it's just a design that uses something change this it's a design that basically pushes the navbar over just a little bit you may like that design and basically what's happening is all that's going on here is if you watch this calcite zoom top left inline left those classes are being swapped out whenever we change the the design so we'll go back to top margin all as an example so you can see that that changed to calcite margin all so just to swap these designs around all you're doing is you're applying CSS classes to the elements there's no other coding than that it's really super simple okay last thing I want to show you I guess here was the panel so if we want we can yeah we can do this if we want height we can move the panel to the left can move the panel to the right just like simple little things that you might want to customize we can change the drop-down to a drawer so now it's more of a drawer style that kind of pops out so these are some of the basic features that are built in and again it's nothing more than adding CSS classes to elements that's causing this whole design to to a current in place so this is styler now style Explorer I should say so you can that's how you can basically simulate a design you can put in the design together then you can look at the CSS and HTML I'll just grab it and then paste it into your app and away you go let's see I also want to show you here if you're interested in getting started from scratch I'll just go back to the repo there's only a couple folders here like there's a Lib folder and I have the Jas the fonts and the sass which I won't get into but the dist file just has the output of those various things and let's see if you want to create your own application then what I do what I recommend to do is to grab the HTML from here and just go to like a Jess not just Ben go to code pin my one of my more favorite editors and I'll paste that in and I'll just minimize some of these guys and so there's just a basic application and all that's happening here is I'm loading in a portal this is actually a web map and again you get all that feature functionality I was showing you before when I minimize this will go into mobile view and then back to desktop view up at the top just so you can see the references there's there's three different CSS references there's one for a bootstrap and then there's one for the ArcGIS API so I actually have some extensions for the ArcGIS API and then there's the CSS which is the main CSS for the Forex API as well other than that that's about it the rest of this is just HTML like I said each HTML element is wired up to a panel you could just copy and paste chunks of the HTML here like for example here's the panel section you can grab the panels and you can start implementing and adding more panels now one part I will show you though is just kind of doing the CSS styling on the fly so what I can do is something like in my nav bar I can do calcite background color blue and that's how I get a blue nav bar if I want to grab that blue color and implement it down for the panel's I go down to the panels and let's see custom panels so I go do two things here I'm gonna do custom and do this and that's it so now I have a blue matching header in the panel but that's how easy it is just to kind of style this thing and kind of make things different okay and of course how do you know what styles are there to go down in the help you'll see all of the CSS styles are documented so things that you can put in the in the body tag things you can put in the nav bar Tagg things you can put in the drop-down and so forth so it's it's not just a mystery it is roughly loosely documented to help you along okay see here yeah I'm not going to get into the custom builds but you can do custom builds to reduce the size of it even more the last part I'll leave you with are some of the samples so again you go back to the github site there's like different samples and these are examples of the CSS implemented so this is actually with for the 3x API so the cool thing about Cal sitemaps is it doesn't care about what mapping framework you use you could use any mapping framework so here we use 3x and go back and here's an example using 4x and if you go to the info it tells you what classes were used so this is navbar top background color dark blue text light this is using a drawer so that's another example and even if you're building applications with ESRI leaflet the frameworks still gonna work with ESRI leaflet because it's just a framework right it doesn't care about the mapping thing that's in it yeah question yeah so the question was I was in the style editor and how do you get the source code it's it's a manual process so basically as you're styling your application you would have to inspect and then you'd have to grab the CSS that's in whatever element is there doing the styling at that point in time there's no way to kind of dump it out at this point okay so I'll leave you with that so that's Cal sitemaps and you can use that to build custom builds and to build custom applications and you don't have to recompile a CSS you can just use it and of course it's going to be updated for every JavaScript for build that occurs then the last thing I'm going to show you is kind of what you can do so I built this application template so if you've gone to the map viewer and you you know how you create a template from a web map if you've ever done that before there's a map template called styler and it's just built off of what we just looked at and it was actually really easy to build because I just use Cal sitemaps and all the styling so the cool thing is you can may just jump out here to a web map so I go out to a web map sign in here okay and I'll share this out create a web app I'll put in styler and there's the app template get through all the initialization boxes and now I can publish an application that looks very similar to the applications that I created before except I don't need to write any code I can just kind of use like whatever theme I want if I want dark or light again if I want custom colors and I'll just do a custom color here for the layout let's say I'll just leave all those checkboxes available and see [Applause] I'm actually going to move the title bar to the bottom for the search I'm just going to leave that and we'll leave the options the same so if I hit save it'll refresh and it's going to apply all of those Styles and basically you're seeing exactly what we looked at in Cal sitemaps except this is through an application template so you can download this application if you want but it's even a cooler thing you can do which I'll show you you can actually hit this app on Archie is calm and start actually building a web map on the command line without even coding so I'll show you don't talking about let's just do something like title equals Palm Springs all right so now I have a title what I can do now is do search text equals Springs California let's say I want to find I want to find places like restaurants around Palm Springs and I want the background color to be blue for the title bar and I want the active panel to be the about panel let's see how many of those parameters they got right all right so that's pretty cool so are things coming together I'm actually gonna do text color light and do something else three equals custom and so now this applications coming to life I'm actually styling it on the command line which is pretty cool so this has some neat built in features I built in this this functionality to be able to search for places so if you just do a long tap anywhere in the map anywhere at all you just hold your mouse for more than two seconds down it's gonna search for restaurants or coffee shops whatever you want so it's kind of a little bit of an easter egg but it's a nice piece of functionality that's built in and of course we can move we could find the address and get directions to it and so forth okay what else I want to show you about this okay so we can actually take this further and for the ones do layout equals bottom you know we can switch the layout around so all this is doing is its swapping it's inserting the CSS classes in different places so it was actually really easy to do we could actually put some text in the about button here too as well we could do about text equals how everyone so that's gonna add some text here so once this is all kind of said and done I also built this little share thing in here so you can select all you can copy that out you could paste that in a URL to your friend and you can say hey you know why don't we meet at you know one of these restaurants in downtown Palm Springs so it's actually hitting the end point and then styling the map on the fly so you can build these custom maps like pretty quickly just with the command line so I thought it was a pretty useful tool I had some some folks and different companies asked me if they could you know really do this on the fly the last part I'll show you is because it's built on the 4x API I can change the web seen equals default it's another parameter again all these parameters are documented and I'll show you in a second so now I can just turn this into a 3d app we still have all the same functionality we did just moments ago except now in 3d so it's kind of neat so it's a neat combination of calcite Maps which is the CSS framework right that allows this to work allows like the Expando search to work the way that it does and everything else and yeah it's you can either use it like this out of the box or you can build your own custom applications from it so where do you find the code for this well it's on calcite Maps styler map styler template and if you scroll down far enough you get to a table and the table has all the command line parameters I call the command line but the really URL line parameters that you can insert so you can use our template out-of-the-box from the map viewer or you can go and grab this code and use it to build applications or you can create maps on the fly and style them on the fly and that's why it's called styler because you can style it in many different ways so we looked at calcite as the design system that we use calcite Maps follows that design system stylers configurable app template and source code that's available for you if you want to build responsive applications on bootstrap so that's about all I have time for today I know I'm gonna get the question what about bootstrap 4 and I'm looking seriously at probably starting a new project just because bootstrap 4 is nothing like bootstrap 3 so there's no real worth in trying to upgrade with what I have but what I'd like to do is make even a faster smaller solution built on bootstrap 4 and I think that's gonna be my goal coming up pretty soon so without further adue slides comm again for my slides and please go ahead and take our survey let me know how we did today and I've got time for a few questions if there are any questions yep okay so a good question if you have a project that's in bootstrap and let's say you want to use calcite Maps or actually any other bootstrap thing and you want to bring them together the cool thing is you could just point it like go to my repo download it locally change the bootstrap version rebuild and then they'll work without conflict to see what I'm saying so the calcite map stuff I made sure did not augment and change any of the core fundamental bootstrap things so it'll just be those components only the elements that use calcite Maps - CSS class will be affected so I thought - what I would do I would do a build that matches the version of a bootstrap that you're deploying - and I've tried that a few times I have never seen an issue so that should work for you it's a good question anything else absolutely so the question was is yeah is the application responsive let me just do this for you here once again I'll let the computer do the talking so here are different this is actually in the bottom layout which works fine so yes I mean it's gonna be responsive when you work with the pop-up and so forth the pop-up will work with the nav setting so all the padding are set correctly around the map and yeah it works really well in mobile device I use it actually quite a bit for a few little apps that I've written so good question yes this is yeah you can use three so the question is is a JavaScript for three you could use whatever mapping framework you want in here it doesn't matter that the components are designed to work with four X just as well as three X just as well as as relief light so you can even put Google Maps in here and it would still work so yeah it's just a framework okay there are no other questions I think I wish you guys a good conference and I do have one more session on app design and layout that I'm going to give tomorrow so it's gonna go into a lot of details about how to use 4x for laying out different apps to kind of achieve what we're looking at here in some ways but not using the bootstrap framework just using pure JavaScript and the JavaScript API so that's coming up tomorrow if you're interested that's a good question what time I don't know yet I dunno it's tomorrow that's yeah the title is app layout and CSS design with the JavaScript for API something like that yeah 2:30 there we go right with that who created calcite yeah it was a set of designers at ESRI yeah I mean I built calcite Maps off of those design specs yeah what's that what's my email address where do you live it's a Laframboise at ESRI calm

Channel: Esri Events

Views: 880

Rating: 5 out of 5

Keywords: Esri, ArcGIS, GIS, Esri Events, Geographic Information System

Id: zOpNP3fMomg

Length: 33min 11sec (1991 seconds)

Published: Thu Apr 11 2019