Tag Archives: CSS

September Meeting Notes: CSS Pre-Processors

Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.

First, a word from our sponsor:

The winner of the drawing for a free personal license of PhpStorm was CK Kuebel.

Q & A

What are some good references for beginning plugin developers?

Professional WordPress Plugin Development by Brad Williams, Ozh Richard, and Justin Tadlock

WordPress Plugin Development (Beginner’s Guide) by Vladimir Prelovac

How do I stop people from sharing/downloading training videos?

Ultimately, you probably can’t, but here are a few tools that might make it more difficult for people who haven’t paid for access to get to the files:

What’s the difference between ems and rems?

Rems are inherited from the root (HTML) font size, and ems are not.

http://designshack.net/articles/typography/whats-the-deal-with-em-and-rem/

http://www.css3files.com/2012/10/11/relative-is-the-new-absolute-the-rem-unit/

Antonio’s Handouts

Pre-processor Resources

Demo SASS Project on GitHub

Notes and Links

Antonio used CodePen for part of his presentation.

Preparing to Use SASS

  1. Install Ruby
  2. Install SASS
  3. Install Compass

Compass puts a Ruby configuration file (config.rb) inside your project. This defines your http path, your CSS directory, your image directory, and your JavaScript directory. You also select your output style here: expanded, nested, compact, or compressed (minified). If you put a “!” after the “*” in your comments, they will remain in the minified CSS.

If you don’t like to work from the command line, you can use an app to manage your SASS files. (PhpStorm will do this if you have it installed.) The Compass.app is only $10, and there are some free ones as well. (See Antonio’s Pre-processor Resources page.) Antonio was working from the command line in his demo, however. The important commands are $compass watch and $compass compile.

Antonio uses Capistrano for deployment, and sets up a dev server, a deployment server, and a production server for his projects. He keeps his SASS files in an “assets” folder in the theme root. Antonio prefers to break his CSS into modules (e.g. “navigation” and “comments”) and make each module a separate .scss file. (Prefixing these file names with underscores keeps them from being compiled separately.)  The _core.scss file imports each module and outputs all of it to the style.css file in the WordPress Root. (See the GitHub project for examples.)

One reason for dividing your .scss into so many files is to make it easier for multiple developers to work on a project. Antonio doesn’t check in the CSS file, so anyone working on it has to be able to compile the project themselves. Instead, he uses Capistrano to upload the final style.css file after compiling. You don’t need to maintain or use version control on your CSS file, because all the information is contained in the SASS.

github-1

github-2

Check the SASS Reference for more details on variables, mixins, nesting, inheritance, placeholders, operations, and more.

Feb 2010 Meetup Notes: WP Q & A

Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.

Main Presentation Topic: Learning About WordPress

The presentation PDF is available on the WordPress Asylum website.

Questions

Q: Can WordPress read from a FileMaker database?

A: Anca says WordPress can only talk to MySQL; you can write script that would handle the import. (Well, Anca could.)

Q: When we’re talking about blogs are we using blogs and websites interchangeably?

A: When you install WordPress, it gives you a blog by default, and also inserts one static page, “About.” But you can build an extensive website in WordPress and hide the blog. When Sallie works with WordPress, she’s usually building whole websites, so she says “sites.” It’s the same WordPress software, though.

Q: We’re trying to have static pages for Margopedia that all newcomers will see and also show new posts for repeat visitors. Is that possible?

A: There are ways to do that, but your theme is currently set up to use categories to create pages from the top navigation menu. Doing what you want means tweaking the theme. (Follow-up note: after some back-and-forth, this was resolved by leaving the category pages as they were and creating a new “featured” section on the home page that showed excerpts of the posts with the introductory information.)

Q: I just learned about the concept of CSS. Does WordPress interoperate with CSS? Is there a menu of skills I need to know?

  • WordPress is built in PHP, it relies on CSS and HTML, you sometimes have to deal with MySQL, and Rocky kindly brought his favorite book on CSS. Almost everything about your design is contained in your CSS stylesheet, which is named style.css.
  • Donna Peck explains that CSS is like specifying typography for print.
  • Ann Zerega warns that not all browsers interpret CSS the same way.

While discussing CSS, Sallie happens to mention Artisteer, a software program for quick and easy theme design. The CSS it produces is somewhat less than ideal, but it has its advantages for people who are neither designers nor developers.

Q: What are the best practices for setting up a development environment for WordPress?

A: We were talking about covering it as a future Meetup session. Suggestion to talk to Anca or Lori about setting up XAMPP or MAMP.

People mention problems searching the WordPress Plugin Repository. WordPress has poor built-in search functionality. “I was trying to find out what WordPress could do by searching the plugins, but I couldn’t figure it out.” WordPress can do darn near anything, and there’s probably a plugin for it—but finding it might be difficult. You can also try searching Google for “x WordPress plugin”.

Q: I want people to be able search on multiple categories and subcategories in order to put menus together on a recipe site, and I found one plugin that said “multiple category search,” and that was it. (I think that’s the Multiple Category Selection Widget.)

  • The consensus of the room is that you probably need to get someone to develop that for you. “You hire someone to build it, and then it goes in that repository, and that’s how you pay back in for getting all this other functionality for free.”
  • If you hire a developer to make a plugin for you, will it still work with the next version of WordPress?
  • Probably. Automattic does let theme developers and plugin developers know about major changes that are coming up in new versions of WordPress, and plugin developers usually update their plugins.
  • Some developers stop supporting their plugins, but there’s usually another plugin that will do the same thing, so the worst thing that usually happens is that you have to get a different plugin because the one you have stops working.
  • If a plugin breaks, you can make a post in the WordPress forums about it.
  • If you get a custom-designed plugin, you might want to build upgrades for a certain period of time (say 6 months or a year) into the contract.
  • JD Lasica recommends hiring someone on oDesk to help you with plugin development and other nasty problems. (Sallie recommends hiring Lori Berkowitz or Anca Mosiou, or someone else from the WordPress Meetup community.)

Q: When do you make a plugin, and when do you put something into your theme?

A: If what you do is really specific to your own site, put it in the theme. If it’s something other people can use, make it a plugin. Also, some people try to keep function out of themes and in plugins.

Q: Where can I find tutorials and websites for WordPress end-users: things that will help my clients?

  • WordPress for Dummies is a handy resource. Even for smart people.
  • The best option, apart from recording your own screencasts, is searching YouTube for “WordPress tutorial.” Even older videos might be helpful; though a lot has changed about WordPress, a lot has stayed the same.
  • Someone (Greg?) recommends Lynda.com, and Lou Anne points out that they will give a discount for Meetup Groups, but these coupon codes are not for posting on the web.
  • You can charge your clients money for creating your own screencast with a tool like Camtasia or Jing.

Q: What do you mean when you talk about using WordPress as a CMS?

A: That means using WordPress to manage your whole website instead of just to blog with; choosing WordPress instead of something like Joomla or Drupal.

Q: So what is a CMS, anyway? Just the text portion of the website?

A: A Content Management System lets you assign different users different levels of access, so people without HTML, PHP, or CSS skills can still update their website content. Control of the content is separate from control of the design and the function.

Q: Are there advantages to using the LinkedIn discussion group for WordPress vs. the WordPress.org forums?

A: Sallie likes using the LinkedIn group partly because she uses LinkedIn a lot anyway. But the WordPress developers hang out on the forums. Try them both and see what works best for you.

Q: What percentage of people use WordPress versus Joomla and other CMSes?

A: (Information supplied after the fact.) Wikipedia says that there are more than 200 million WordPress sites. According to http://trends.builtwith.com/ (based on the QuantCast Top Million), 2.07% of websites run WordPress, about .21% of websites run Joomla and 1.64% run Drupal. Looks like WP has the edge there. (Note that they class WP under “blogs” and not “CMS,” and 77% of blogs are WordPress blogs.)

Q: Is the built-in editor in WordPress satisfactory?

A: Sallie usually uses Windows Live Writer to write posts and pages offline, but the WordPress TinyMCE editor is better than the one in Joomla. (Okay, that’s not saying much.) You can paste from Word into Live Writer and it will take out the horrible gibberish that Word puts into your HTML. (There’s now a “paste from Word” button in the WordPress visual editor, but some of us never quite trust those.)

Q: When WordPress 3.0 comes out, what happens to all these themes?

A: Some theme developers will upgrade the themes; some won’t. Most themes will keep working, but some may need some tweaking to take advantage of new features. When WordPress 2.9 came out, you had to add a few lines of code to your theme files to make the post thumbnails feature work, for instance, but that didn’t require a theme designer’s help.

Note: WordCamp SF is May 1st this year.

The winner of the book giveaway for WordPress in Depth was JD Lasica. We’re all looking forward to reading the review on Amazon.com.

Themes Overview: April 2009

Things change rapidly in the WordPress world. The content in this post is more than a year old and may no longer represent best practices.

The WordPress.org list of recommended web hosting companies
Gallery of free themes at WordPress.org
WordPress Codex on using themes
Theme Forest (inexpensive WP themes)
StudioPress professional WP themes
Explanation of WordPress Widgets (and how to make a theme widget-ready)
Learning CSS (from the W3C site)
Artisteer theme design software
Windows Live Writer offline blog editor
Ecto offline blog editor (for Mac)
FileZilla free FTP client
FireFTP free FTP client
FireBug web development plugin for Firefox
MAMP for setting up a WordPress install on your Mac
XAMPP for doing the same thing on Windows
BeeDragon Web Services, Lori’s company, for expert development help
The Podcast Asylum