![]() ![]() In this case, this is the ‘button’ class. The gray indicator shows that the font size is tied to a class which is not selected. Styles set on IDs are more specific than classes - they apply to only a specific element - and will always prevail. The yellow indicator tells us that the font weight (bold) is set for this specific element only -on the ID. The text color has a blue indicator, showing that this was adjusted through a class (the ‘success’ class in the previous image). We already saw that pink is associated with style definitions for an element type. The image above shows 4 different colors on the style controls. To help you keep track of where style definitions come from - which selector the styles are associated with - Foundation Framer uses a color coding system. Additional classes create variations the class ‘alert’ makes the button red, the class ‘large’ increases the font-size, etc.Ĭlick here to view a larger version of the image. The blue button in the image above shows the default styles for the 'button' class. You can also find them in the foundation documents. ![]() They can be searched and selected from the Predefined dropdown. The Foundation framework provides a number of predefined classes that apply styles such as the red and green in the image. ![]() To apply styles to a combination, deselect the class(es) that are not part of the combination by clicking on their name(s), Then simply update the style settings as before. Therefore these styles will take precedence. A class combination is more specific than a single class. Styles can also be attached to class combinations. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |