CSS Development Workflow

  • I’m a Java developer new to WordPress theme development. I understand the Loop, can find my way around PHP fairly well, but where I’m stuck is at style.css. I was working with the twentyfourteen theme, trying to re-work the look-and-feel, as an exercise, but there are 4200 lines of code, hundreds of class entries! Help!! How does anyone get their head around all those classes? What is the typical workflow for producing a style-sheet like this. By hand with a text editor? Sass? Some kind of wysiwyg editor? What is the right path for this aspect of WP theme development??

    Thanks in advance!

    Jeff

Viewing 3 replies - 1 through 3 (of 3 total)
  • Harmony

    (@harmonywebworks)

    Well, there are a number of ways to go about doing that.

    If you are designing from absolute scratch, you could you could design first with the Adobe Suite (some use just PS, some use PS+AI, some may yes FW), first creating the wireframe then ending with the actual design, then extracting that into html/css/WP/PHP.

    However, many designers start with an existing theme or framework, then work from there.

    Some frameworks require minimal CSS knowledge and use drag/drop utility. Also, there are many plugins (most of them premium) that you can install on just about all themes (allowing you to start with a basic theme like twentyfourteen).

    Having at least a basic understanding of CSS is important, but level of importance really depends upon what your intention or purpose is for designing the new theme.

    I would link a number of frameworks and plugins that fit my description above, but I’m not sure what is and isn’t allowed to be posted yet (I’ll research that and get back to this thread if it is allowed to post to premium products – I suspect however, that it may be some forum violation to do so).

    To add on to Harmony Webworks’ good suggestions, learning a CSS preprocessor like Less or SASS will help a lot, too. Being able to use variables and functions (SASS calls them mixins; I’m not sure what the Less equivalent is) in your CSS can really reduce your workload.

    Thread Starter jeffkeith1

    (@jeffkeith1)

    Thanks!! Really appreciate your comments!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘CSS Development Workflow’ is closed to new replies.