WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Bones Theme and LESS (23 posts)

  1. not1_name
    Member
    Posted 2 years ago #

    If there is anyone using Bones, could you outline the css workflow?

    I have tried a lot of the responsive framwork templates and like the Bones theme the most. The files are really well commented, but as I am just starting with LESS, I just can't get my head around which files to edit, and when they should be compiled into css. I'm on Windows, so have downloaded SimpLESS.

    The writer of the Bones theme has a lot of great documentation and videos, but there doesn't seem to be one for how the theme uses css, LESS ans SASS. Any help would be appreciated.

  2. ili
    Member
    Posted 2 years ago #

    I'm in the same boat! Been trying to figure this out myself.

  3. onyudo
    Member
    Posted 2 years ago #

    seriously! even a simple flowchart would be awesome!

  4. egado
    Member
    Posted 2 years ago #

    Hmm... hope I understand where the problem is...
    Maybe this could help you: http://coding.smashingmagazine.com/2010/12/06/using-the-less-css-preprocessor-for-smarter-style-sheets/

    Everytime you make a change to the less files, the compiler "creates" the new css file. So you don't have to edit the css files, they are "generated/compiled".

    There are a few ways to compile less to css, eg. the windows app or the client side javascript (not recommended).

  5. onyudo
    Member
    Posted 2 years ago #

    perfect. thanks!

    i got my hands on the LESS App for Mac and all is working like clockwork. the plugin i was using for Coda 2 wasn't making the magic happen.

    not1_name and ili: i installed the LESS App, went into Preferences, checked "Automatically set CSS output paths when possible," and dragged the entire LIBRARY folder into it.

    now when i change any of the LESS files and save them the CSS files are automatically generated and saved in the CSS folder of LIBRARY.

    sorry not1_name, sounds like you're on Windows, and you're using SimpleLESS. Maybe adding the entire LIBRARY folder will help out, if you haven't tried.

  6. ili
    Member
    Posted 2 years ago #

    Thanks for the input everyone. which LESS app are you talking about? Is it the CodeKit version? And is it uploaded as a plugin?

  7. ili
    Member
    Posted 2 years ago #

    Ok i found it! And downloaded it! Thanks. So LESS app is run locally. I'm using Bones already online - does this complicate anything?

  8. onyudo
    Member
    Posted 2 years ago #

    i've already made the jump from the LESSapp to Codekit... it's more robust and is working smoother for me.

    the creator of Bones doesn't recommend working with these files on a live site, and has many reasons why (check out his support forums on Github). i've only been working locally and it's all clockwork now.

  9. ili
    Member
    Posted 2 years ago #

    Ok great thanks yes I did read that too and I have been on his support forums on Github I probably should have instantly taken the creator's advice but in the past I've preferred to work live. I just set the theme up & WordPress locally, hopefully will have more luck, will trial Codekit today also. I'll probably pipe back up and let you know how I go! This helped initially for the local set up for future readers of this thread: http://wp.smashingmagazine.com/2011/09/28/developing-wordpress-locally-with-mamp/

  10. not1_name
    Member
    Posted 2 years ago #

    This post has come back to life! I thought it was a goner...

    I'll have another go at trying to work it out. Thanks Egado for the link.

  11. onyudo
    Member
    Posted 1 year ago #

    wp.tutsplus just started the first in a multi-part tutorial on making themes with Bones:

    http://wp.tutsplus.com/tutorials/theme-development/making-a-theme-with-bones-getting-started/

    i'm sure that they'll dive into the LESS/SASS aspects of it at some point...

  12. Lonnie
    Member
    Posted 1 year ago #

    I've search and read and need a little help if someone has time.

    I'm just trying to figure out how to compile these less files with bones. I have the less app installed, did everything listed above.

    I'm editing the less files with a sugar plugin for espresso 2, but when I save the file the less app tries to compile and I get an error message.

    For example, I'm just changing a color in the mixins.less file - save.

    Error: ParseErrorL Syntax Error on line 65 in mixins.less:65:0

    64
    65 @link-color: $bones-pink;
    66 @link-hover: darken($link-color, 9%)

    I can't find a step-by-step on how to get the compile step to work. Everyone says use a less app, edit and compile.

    I also noticed that when I edit a less file it is trying to make a css file with that same name instead of compiling them into the style.css file. What am I doing wrong?

  13. bennybmg
    Member
    Posted 1 year ago #

    @lonniehb

    I'm also using Bones and LESS for the first time as well.

    Your Less syntax does not look correct. A @variable should equal #fff and then u refer to it later on with @variable.

    I think a LESS file will usually compile into a CSS file of the same name unless u specifically have LESS files imported into a certain CSS file like the way Bones does.

    I am wondering about the CSS grid that Bones uses, seems to be bootstrap stripped right down with no push and pull type classes unless I am missing something.

  14. Lonnie
    Member
    Posted 1 year ago #

    Yeah, I've given up for the time being. I took the compiled stylesheet and reconfigured it into the traditional wordpress style.css in the bones theme. I'll dive more into LESS when I have more time.

    I've used bones for awhile now, but it was the older version (fixed width) and I replaced the grid system with one I preferred.

  15. thoughtwell
    Member
    Posted 1 year ago #

    @lonniehb, Are you compiling the styles.less file? If you're just compiling the file that you made the edits in, some of them will throw up errors because the variable is being defined in other mixins that aren't necessarily imported into the present stylesheet you are working in. Once you compile the styles.less/styles.scss file, it should compile correctly.

    You can save your less/scss files to keep the changes you have made, and if you try compiling some of them, they will compile if everything 'needed' is contained within that specific document, but this isn't really necessary because the styles.less/scss file will import the all of the mixins/'other less/scss files' under one file and output everything to styles.css.

    I use Crunch for my compiler b/c it's free and it's an adobe air app, which is really lightweight and works extremely well, but it only works for Less, not Sass. I use mac, but I believe the air apps work independently of OS.

  16. BenRacicot
    Member
    Posted 1 year ago #

    Yeah there is far too LESS resources online for learning how to use SASS for development. But it IS a better way to work.

    Here is what took me a week or two to figure out:

    For cygwin users (PC) you must run the setup again and install some ruby stuff. You'll have to Google a bit to get Compass (PAIN)

    Once you get Compass running open command prompt and *C*hange *D*irectory to your bones/library/scss folder.

    Make your CSS edits and type "compass compile" in the command prompt. It will compile the scss files and create usable .css files (or whatever your config.rb file tells it to do)

    This process would be easier with a Mac and the Compass app ($10)

    Note: I can't get the "compass watch style.scss" type commands to WATCH for a save and automatically compile...

    ANy workflow advice would be appreciated.

  17. dvieira
    Member
    Posted 1 year ago #

    I am also using Bones as a starter theme. I have a local environment set up and am using CodeKit to compile the LESS files. I really like this newer way of development.

    But my main questions is this...

    If I want to sell a theme that I developed using a LESS compiler, does that force whoever buys my theme and wants to edit the styles into having to use a LESS compiler as well? Or can they just start editing the style.css file if they choose?

    Any thoughts on this would be greatly appreciated! Thanks!

  18. not1_name
    Member
    Posted 1 year ago #

    Dvieira, I'd like to chime in here. BTW, I was the one who started this thread 9 months ago...

    You can sell a theme developed using LESS, by either just leaving the compiled CSS in the theme or including the uncompiled .less files. I would recommend leaving the LESS files as many people are now very used to using CSS pre-processors, and I would certainly no longer buy a theme that didn't allow for at least LESS or SASS.

  19. dvieira
    Member
    Posted 1 year ago #

    Thanks not1_name! Yeah...i wasn't sure if i should bundle the LESS files with the theme, but it's nice to know I can leave them there as an option for the end user, or they can just directly edit the CSS files if they'd like.

    I really dig using LESS, but I'm not so hot on having to work locally to use it, do you know if you can use a CSS compiler on a live server?

    Thanks again :)

  20. not1_name
    Member
    Posted 1 year ago #

    This is getting a bit off topic but...

    I've never done it, but I'm sure there is a way to compile on a live server. However, whether your using a pre-processor or not, I would strongly recommend you develop sites locally.

    The local workflow with LESS is easier than SASS, as you don't need to install Ruby or use Compass for your mixins. To get the hang of LESS and how all the files work together I really recommend you download and play with Twitter Bootstrap on your local machine. It is used on loads of sites and uses LESS for its pre-processor. As it is so widely used, there are loads of tutorials that will help you get going with it. It comes with a mixin.less file, so you don't have to use compass. I compile with winLess on a PC. It watches your main LESS file and comiles the css every save you make. Very easy to use and no messing with the command line/prompt.

    It's all a bit hard to wrap your head round at first, but once it clicks, you're life will be much easier!

  21. LucyRyder
    Member
    Posted 1 year ago #

    Hello, I am using Bones for the first time, and am i ok to delete the SASS and LESS folders and just edit / use the normal styles.css file, as this is all you re-upload when using LESS (which i have tried first) anyway? Thanks!

  22. esmi
    Forum Moderator
    Posted 1 year ago #

    @LucyRyder: As per the Forum Welcome, please post your own topic. Posting in an existing topic prevents us from being able to track issues by topic. Added to which, your problem - despite any similarity in symptoms - is likely to be completely different.

  23. not1_name
    Member
    Posted 1 year ago #

    Lucyrider, the answer is "yes".

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags