CSS3 Handbook Launches

Today I released my first eBook which is called the CSS3 Handbook. It’s an introduction to CSS3, with everything you need to know to get started today. The eBook is setup here on cardeo.ca, or you can view the full landing page over at mattlambert.ca.

The eBook is available in a Complete Package which includes the source HTML & CSS files, along with the eBook. There is also a Basic Package that only includes the eBook in .PDF format.

If you’d like to try before you buy, there are 2 sample chapters available for download from the landing page. I’d love to hear any feedback you have on the book in the comments.

Creating a Long-Shadow Icon with CSS3

I recently published a new post at mattlambert.ca explaining how to Create a long-shadow icon with CSS3. If subscribe to the mattlambert.ca newsletter, you would’ve also received a promo code to pre-order the premium version of my first eBook, the CSS3 Handbook, for 50% off. I’ll be resending the promo code closer to launch, so please sign up if you’d like to take advantage of the special offer.

CSS3 Handbook Sample Chapter

The above blog post is a great sample of what you can expect from the eBook when it is released. However, there is also a sample chapter available from the eBook on using @font-face available now at my website. Below is the final chapter list for the eBook:

  1. Introduction
  2. Round Corners
  3. Opacity
  4. Text Stroke
  5. Text Shadow
  6. Box Shadow
  7. @font-face
  8. Transitions
  9. Animations
  10. Gradients
  11. Columns
  12. Pseudo Classes
  13. Transforms
  14. Box Sizing
  15. Additional Resources

Continue Reading

Sample Chapter from the CSS3 Handbook Available

I just released a sample chapter from the CSS3 Handbook tonight, over at mattlambert.ca. If you haven’t heard, my new website features eBooks, a newsletter, and a blog all focused on front end design and development. Cardeo.ca is a product of my knowledge, mattlambert.ca is my attempt at passing that knowledge onto anyone who is interested enough to follow along.

CSS3 Handbook Launch

The CSS3 Handbook launch is scheduled for early 2014. If you sign up for my newsletter, you can pick up a copy for free! There’s also a couple pre-orders available on the website. One for the deluxe version of the CSS3 Handbook, which includes the supporting HTML and CSS files. You can pick that one up for 50% off the regular price right now. There is also a second pre-order up for my next book, Mastering Twitter Bootstrap 3. You can pre-order that one for 20% off the regular price for a limited time.

I’d love to hear any feedback you have on the sample chapter. Feel free to leave a comment below.

I just launched mattlambert.ca

I’m happy to announce I’ve just launched my latest project at mattlambert.ca. Following up on my previous post, my new website focuses on everything front end. Currently I’m working on writing 2 books: one on CSS3 and the other on Twitter Bootstrap. I’ve also launched a new newsletter which fill feature my best front end design and development content. The final piece is a new blog on the same subject, however, it is not live yet.

I’d recommend checking out the books section, where you can learn more about my new books. There’s also a couple of special offers available if you’d like to pre-order either book. Make sure you sign up for the newsletter to get access to sample chapters and special offers as I get closer to the release dates.

Help me write a book on Twitter Bootstrap

I’ve begun the process of writing a book on how to easily create a theme for Twitter Bootstrap. In the past, I’ve tried my hand at writing by releasing the CSS3 Handbook iPhone app. However, for this new book I plan to do a deeper dive into a subject that is close to my coding heart. I use Bootstrap on a daily basis, whether it is for my day job or my own personal projects. From that experience, I know that creating a custom theme for Bootstrap can be a daunting task. My plan is to outline some of the techniques and best practices I have developed through my experiences and provide them to you in an easy to follow eBook manual.

How can you help?

As I was initially brainstorming content for my book, I was able to come up with a decent list of topics that I thought readers would find useful. However, I thought it might also be a good idea to ask my blog readers for feedback on what they would like to see in the book. What parts on Bootstrap confuse you the most? What are your stumbling blocks when trying to customize Bootstrap? How can we make this easier? Below is a rough list of topics I plan on covering. Please leave a comment letting me know what you think. If there are subjects you would like covered that aren’t listed, please feel free to suggest them.

Continue Reading

Vertical centring using CSS

Ahhh… the ever elusive vertical centring in CSS. This can be a major pain, it should be easy but often can cause many hours of hair pulling. I’ve come up with a simple snippet to allow you to easily achieve this formatting with a minimum of pounding of the head against the keyboard. First let’s setup the HTML markup:

<div class="parent">
 <div class="child">child</div>

Continue Reading

Cardeo 4.0 is Live!

Welcome to version 4.0 of Cardeo.ca! I’ve totally redesigned the website using a WordPress theme from themezilla.com. Why use a 3rd party theme? I’m simply to busy to build something this big without some help. I’d much rather spend my time developing free and premium templates and themes for you!

What’s New?

The web store has been expanded to include 30 products. The previous version of the website only had about 10 products available. If you’d like to purchase a premium product, you will be linked to either creativemarket.com or graphicriver.net. I’ve decided to handle the selling of all my files through these marketplaces, as it was taking up too much of my time to handle the hosting and delivery myself. If you’re looking for support on a file or purchase, feel free to contact me through the website, or you can contact me through the file marketplaces as well.

Continue Reading

CardeoStrap Bootstrap 3 Theme

I recently released a free theme for Twitter Bootstrap 3 called CardeoStrap. It’s a flat theme, fully skinned with all the Bootstrap components you’ve come to love. The colour palette is taken from flatuicolors.com and there’s a demo available at cardeostrap.cardeo.ca.

Component Library

The following components have been fully skinned: Typography, Tables, Forms, Buttons, Dropdowns, Tabs, Pills, Navbar, Breadcrumbs, Pagination, Pager, Labels, Badges, Jumbotron, Alerts, Progress Bars, Thumbnails, Media Object, List Groups, Panels, Wells, Modal, Tooltips, Icons, Collapse, and Carousel.

LESS Integration

Each component has been broken out into an individual LESS CSS file to allow for easy customization. There is also a lib.less file for configuring global variables like colors, fonts, margin, padding, as well as some mix-ins for CSS3 features like rounded corners. I hope you find the theme useful, comments are welcome.

Continue Reading

Boostrap Ghost Theme

The latest player in the blog CMS game is Ghost. It runs on node.js and features a minimal user experience, packed with features. I’ve put together a Ghost theme called BooStrap that integrates Twitter Bootstrap 3. If you’re familiar with WordPress starter themes like Starkers, this is similar but for Ghost with a Bootstrap integration.

Ghost Themes

Creating or customizing a Ghost theme is pretty easy. If you’re familiar with creating a custom WordPress theme, coding a Ghost one will be a breeze. Ghost templates use handlebars.js templates and you only need three templates to create a theme: index.hbs, default.hbs, and post.hbs (along with the regular css, fonts, and js assets).

Continue Reading

Adding a horizontal nav spacer with :before

I’m a huge fan of Twitter Bootstrap, however, I’m not crazy how they implement the link divider in the breadcrumb component. You have to include a <li> for each instance which seems a little clumsy. I wanted to see if I could figure out a way to do this using the :before psudeo class, and eliminate the extra <li> instances. For my example, I’m not using strict Bootstrap markup and class naming, I’ve simplified it down for learning purposes. Here’s our HTML markup:

<div id="nav">
  <li><a href="#">page</a></li>
  <li><a href="#">page</a></li>
  <li><a href="#">page</a></li>
  <li><a href="#">page</a></li>

Continue Reading