We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
  • Ok. I'm going to really get this business figured out this time. And I want to use the MODX Cloud for it.

    I find tons and tons of documentation on this and that, but I'm having an awful time figuring out how to get started.

    Suppose I have a structure like this:

    assets/
    --components/
    ----mytheme/
    ------stylesheets/
    ------images/
    ------js/

    Now what am I suppose to do? I'm supposed to set up paths, but paths from where? Relative paths? Relative from what? What internal folders should I set up in the 'stylesheets' folder? Or do I just use that for the final output, and set up another folder altogether for my sass/scss/compass stuf? I've read a bunch of tutorials, and confusion is reigning. If anyone has links to a simple starting tutorial I would be most grateful. [ed. note: sottwell last edited this post 9 years, 3 months ago.]
      Studying MODX in the desert - http://sottwell.com
      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
      Join the Slack Community - http://modx.org
      • 42562
      • 1,145 Posts
      Are you asking how to process your Sass files and others into usable web browser formats using Compass? And with no relation to MODx Cloud?
        TinymceWrapper: Complete back/frontend content solution.
        Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
        5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
      • Well, the Cloud provides it now, so I'm using SSH and the command line to control it. I'm just having trouble understanding the directory structure and filenames. And why some of the files start with an underscore. And where to put the .scss files, and where the .css files will end up.

        I'll get it figured out eventually, I was just hoping somebody knew of a tutorial that was a bit more forthcoming to newbies. The tutorial article most commonly referred to seems to expect the viewer to already know a lot of stuff.
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
          • 42562
          • 1,145 Posts
          Okay, I know nothing of how the Cloud runs this, but I can share how I use Scss. I am guessing it should be similar.

          assets/
          --components/
          
          ----mytheme/
          ------config.rb
          
          ------sass/
          --------_base.scss
          --------_desktop.scss
          --------_mobile.scss
          --------styles.scss
          
          ------stylesheets/
          --------styles.css
          
          ------images/
          
          ------js/


          Files with underscore do not get to be outputted to a css file with corresponding filename.
          _base.scss will not be processed to become base.css, which file will be useless to you anyway, and do clutter your folder if outputted.
          These files are good for @media and what not.
          Sass can "include" them to make up your final useful css file, in this case styles.css
          Each time you edit an underscored (or any) file that is used in your main scss file, this main scss file gets reprocessed, and your styles.css gets regenerated consequently.

          Scss files go into a sass folder, same level as the stylesheets, js and images folders.
          The name of the folders and location can be set by you if you are using compass to watch and compile.
          If for some reason this structure fails and compass is screaming green murder, just recreate the structure with compass on command line and copy back your files to their respective folders.

          If using compass, you will need a config.rb file to tell compass where your source files are and where to output them.
          This rb file is to be placed in the root of your template folder (mytheme).

          A sample components/mytheme/config.rb for compass
          http_path = "/" //tells compass that this is the beginning of your theme, and to find your folders within
          sass_dir = "sass"
          css_dir = "stylesheets"
          images_dir = "images"
          javascripts_dir = "js"
          sourcemap = "true"
          output_style = :expanded
          # output_style = :compressed
          


          I hope this isn't what you weren't looking for.
            TinymceWrapper: Complete back/frontend content solution.
            Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
            5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
          • It confirms what I'm gradually learning. The MODX Cloud doesn't do anything per se, just gets Sass, Compass and optionally bourbon and neat installed. You have to log in via SSH and do the usual Compass stuff with the command line.

            Somebody reminded me of the A Book Apart book by Dan Cederholm, so I got it, and it's been extremely helpful.

            I'm already addicted, and have been pestering the MODX Cloud people to install it for my ever-changing multitude of dev clouds. I even got it set up and working on my local machine, and found a cute little application for it, Koala, which also does CoffeeScript. Interesting.
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 42562
              • 1,145 Posts
              Once I started with Sass, I never looked back.
              It was daunting at first, and second and third, since there are a billion names that pop up when this trade of pre/post processing is entered. I am sure some others find it disturbing.
              The trick is not to learn all of them, but to try some and stick with one or two. And find a good tool for compiling.

              So I stuck with Sass(scss) for Css and Jade for HTML.

              Finally! I never have to close those dumb html tags, or find the comment that says :
              </div>
               </div>
                 </div>
                    </div>
                       </div>//thus ends the div, goodnight thou sweet section


              As for compiling, I was using custom builds in SublimeText to compile with Ruby; well that became a waste of my time when I started working with different languages in the same project.
              Prepros to the rescue; it does everything for me. But I prefer Koala for compressing and concatenating my JSs, it makes them really smaller.
                TinymceWrapper: Complete back/frontend content solution.
                Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
                5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.