During this last sprint I spent my time working on two things, that of continuing to try to get the styles to work for the buttons on our program and our teams final presentation. In continuing with the styles of the buttons from the bottom navigation bar, I finally tried to create and apply a palette. Ignite UI uses a thing called palettes which is a built in feature that takes two colors as primary and secondary, as well as a few other built in color groups, to create a large “palette” of colors that you can reference. To do this you create an SCSS file, short for Sassy CSS, which is a super set of CSS allowing the programmer to create variables, nested rules, functions, etc.. When you create this SCSS file, you have to import the Ignite UI style index, as well as provide the primary and secondary colors. From here you can define a custom gray scale palette, or take the one automatically created which has a default color of black. Finally once the palettes have been set, this is where the SCSS comes in, by allowing you to create color variables which can be used over and over. To create these variables Ignite UI provides a function for creating these colors, with 3 inputs; palette, color, and variant. The palette is one that you have created, the color is one of the 8 available through Ignite UI, and then finally a number for the variant with the default being 500, lighter shades being 50-400, and darker shades from 600-900. An example of one of these color variables would be “$my-primary-600: igx-color($my-palette, ‘primary’, 600);” I did all of this trying to hopefully change the styles of the individual button elements of the bottom navigation bar, but instead it would apply to most or all of the document. Although I did not get what I had wanted working, I feel that I did learn a lot of the way that this Ignite UI worked during this sprint, having spent many hours trying several different possible solutions. I feel with more time I would have been able to figure out this problem but my team also had to start planning and creating our final presentation for the class. For this my portion of the presentation was to be on the Ignite UI as well as some of the style stuff involving SCSS. To help me with this I spent a long time reviewing the Ignite UI website which was very expansive and almost like a Wiki. On thing that was very helpful with there website was the inclusion of examples using Stack Blitz, which gave examples of how the code would be run, and which could also be changed. This sort of program example helped a lot in trying to understand how a certain element they have in the Ignite UI worked when compiled into code, and I would highly recommend a version of it being used in future classes.
From the blog CS@Worcester – James' Blog by jdenesha and used with permission of the author. All other rights reserved by the author.