locations signpost

Published by Darron Toy on


Now let’s add a signpost and
that will be placed beside our locations which are the times and the locations
for the runs and the meetups so again we’re going to reuse the section that we
created in the boiler plate earlier on and we’re going to add an article and an
aside and the difference here is one difference here is that the article is
going to appear before the aside because we’re looking for alternate and displays
so we want the first font I of the first icon to appear the heartbeat to appear
on the right in the first section and we want our signpost to appear on the left
in the next section and then we want to go back to the right again for our
checklist such as alternating just creating a bit
of M differentiation in terms of pattern which is which is more pleasing to the
eye okay so we’ve added a new icon here and the icon is called F a map signs
we’re using the icon large we’re reusing the icon large styling no this signpost
is going to be sitting on top of a background that has that orange color so
will disappear as it stands at the moment when we put the background image
in so what we want to do is we are going to refactor some styling and refactoring
just means returning to something you’ve created and reusing it again to either
optimize it or just just improve it in some way or repurpose it in some way so
we’re not going to call it I can’t large we are going to give it its own ID
because it’s this this style will only apply to the signpost whereas the class
of icon large will apply to both our icon I’m sorry our our heart icon and
also later on it will apply to it so it applies remember class applies to
a group and an ID applies to a single instance so reusing our style here so
now we’re applying the style to icon large and also the signpost icon and to
make it work we need to take the color property out of that because otherwise
it will apply to both the signposts and the heartbeat which is what we don’t
want so we refer to the icon large again and we specify the color and then we
will assign a color a unique color to this signpost icon ID I’m going to give
that a color of white which is all the else now when you are working with suav
if you’re working with a white background and you’re applying white
color to an element it’s very hard to see that you run it here now we don’t
know for sure whether that works now there are ways of looking that by going
to developer tools and so on checking that it’s in place but you
can’t you can’t eyeball that straightaway so a good trick when
working with color is deliberately work with bright or garish colors when you’re
testing especially if there’s a low contrast between the an element and its
background so I just chose green here and it’s obvious you can see that it’s
there and we can leave it there until we’ve put the background image and we’re
happy with it so there’s an example of bit of refactoring a while assigning a
new icon

Categories: ArticlesBlog

Leave a Reply

Your email address will not be published. Required fields are marked *