Now that our “read more” link is styled like a button, it makes sense to have it on a separate line. Right? By default an <a> tag is an inline element. How can we make it a block element?
Labs
Labs are hands-on coding projects that you build along with Tonya as she explains the code, concepts, and thought processes behind it. You can use the labs to further your code knowledge or to use right in your projects. Each lab ties into the Docx to ensure you have the information you need.
Each lab is designed to further your understanding and mastery of code. You learn more about how to think about its construction, quality, maintainability, programmatic and logical thought, and problem-solving. While you may be building a specific thing, Tonya presents the why of it to make it adaptable far beyond that specific implementation, thereby giving you the means to make it your own, in any context.
Style It to Look Like a Button
Often times, we want our hyperlinks to stylistically look like a button. Many UI frameworks, including Foundation, Bootstrap, and UIKit, have button class attributes to handle this for you. Okay, how do you add a class attribute to the opening <a> tag of our “read more” link? Let’s use beans_add_attribute() function. We need to know: The ID of the opening tag. Which attribute we want to add something to. In our case, the ID is ‘beans_post_more_link’ and we want to add a class attribute. Depending upon your UI framework (or the styles you built), that class attribute will vary. Let’s […]
Strategy 1: Hide it with CSS
With CSS, you can visually hide certain elements in the DOM. CSS provides the display property, where you can set it’s value to none. What happens? It removes the HTML element from the visual representation for the web page. To accomplish this in Genesis, you will want to open up your editor and then do these steps: Open the style.css file Search for the .site-footer { section in the stylesheet Scroll down to the end of that section to place the code after these styles And then put in the following CSS declaration block Notice that we are targeting the […]
Git Commit and Congratulations
WooHoo! You are now done with converting the native CSS stylesheet over into modular Sass. I know that was a long process, but you only needed to do it once. Now you have a codebase that you can use on every single project and site that you build. Quick Summary of What You Learned: It’s Sass and not SASS. You have a modular codebase that you can use on every single project. Color changes are quicker as you change them in one spot and your entire stylesheet changes. Typography changes are quicker. Dimensions are customizable in one spot. It will […]
Main Styles
It’s time to check that we have all modules and sub-modules imported into their index files. And then we’ll make sure that everything is imported into the style.scss main style file. We’ll talk about the DocBlock too.
Neat Breakpoints
There are various strategies available to you for handling the media query breakpoints including these options, which all do the same thing: The advantage to setting a new breakpoint in the _breakpoints.scss file is you make all changes to your breakpoints in one place. Now that we’ve integrated media queries into the styles at the component level, this technique means you are not searching through all of the partials to find where to change what you need. Therefore, using the Neat function new-breakpoint() allows you to be more efficient which will save you time in working with your new codebase. […]
Apply BEM to Screen Sizes Variables
For the screen sizes, let’s use this naming convention: $screen-size–smallest. The name is now more clear and it complies with BEM. Whew.
Apply BEM to Dimensions Variables
Let’s apply the BEM naming convention to the dimensions variables too.
Refactor Colors
Did you notice that we are repeating hex colors within the color variables file? Why? That’s not efficient and it’s redundant. Instead, let’s specify the colors at the top of the file and then use those variables within the configuration.
Apply BEM to Color Variables
Just as we did with the typography, let’s apply BEM naming convention to the color variables, e.g. $button–hover-background-color.
