Unlock your potential with a Pro Membership
Here is where you propel your career forward. Come join us today. Learn more.
Add UIKit Button Attributes
Lab: Customizing the “Read More” Link in Beans
Video Runtime: 08:16
Let’s talk about UIKit. Right now in Beans 1.x, it’s baked into Beans. In Beans 2, we’ll provide it via a plugin. Let’s explore the button component and play around with different styling.
Before we do that though, I want to talk to you about developer costs and efficiency. I’ve become a UIKit advocate. Why? Because it’s an example of a third party dependency that delivers on:
- Reducing your time and costs.
- Lean – meaning it’s a small file to be downloaded to a person’s browser.
- Backed by a large FOSS community.
- The UIKit team keeps it up-to-date with the latest changes and innovations.
- The UIKit team tests it, fixes the bugs, and keeps it running smoothly. That means you don’t have to maintain that code. WooHoo!
- Scalable, fast, reusable, and mature.
As developers, we need to find 3rd party dependencies that add value, reduce our costs, and are fast, lean, scalable, and deliver results to our clients and projects. UIKit is one of those.
Code. Eat. Code. Sleep. Dream about Code. Code.
Total Lab Runtime: 02:21:26
- 1 Lab Introductionfree 17:36
- 2 Let's Look at the HTML Markupfree 09:16
- 3 Find Where Beans Renders the "Read More"pro 15:37
- 4 Remove the >> Iconfree 09:46
- 5 Change the "Continue reading" Textfree 08:03
- 6 Append "..." After the Textfree 06:06
- 7 Dive into Bean's beans_output()pro 15:46
- 8 Dive into Beans' beans_open_markup()pro 15:50
- 9 Dive into Beans' beans_close_markup()pro 03:04
- 10 Adding HTML Attributes using beans_add_attributes()pro 09:10
- 11 Style It to Look Like a Buttonfree 04:04
- 12 Add UIKit Button Attributespro 08:16
- 13 No More Inline. Put On A New Linepro 01:48
- 14 Wrap It in a Paragraphpro 05:11
- 15 Change the UIKit Iconpro 06:32
- 16 Wrap it Upfree 05:21