Awesome Open Source
Awesome Open Source

SMACSS_IT

Cmdline tool that creates Sass/Scss folders and files structure for SMACSS.

This tool is great for adding order, structure and cleanliness to your web project. If you are using HTML & CSS inside of your project. Installing and creating boiler plates over smile and over ... and over...😕and over again makes me anger !

Dont't Get Mad no more... Just Smacss It !!!

WHAT IS SMACSS?

Smaccs_Image

Scalable and Modularclass Architecture for CSS

SMACSS (pronounced smacks) is more style guide than rigid framework. There is no library within here for you to download or install. There is no git repository for you to clone. SMACSS is a way to examine your design process and as a way to fit those rigid frameworks into a flexible thought process. It is an attempt to document a consistent approach to site development when using CSS. And really, who isnt building a site with CSS these days?!

Requirements

  • Requires python - python 3.5>= greater.

Getting Started

  • Open linux terminal.

  • Clone this repo using sudo git clone https://github.com/cbderoid/smacss_it.git

    sudo git clone https://github.com/cbderoid/smacss_it.git
    
  • Navigate to repo folder by typing cd "path-to-this-repo-folder"

    cd "path-to-this-repo-folder"
    
  • Move smacssit file to /usr/bin by typing sudo mv smacssit /usr/bin/

    sudo mv smacssit /usr/bin/
    
  • Make sure file is executable through system - sudo chmod +x /usr/bin/smacssit

    sudo chmod +x /usr/bin/smacssit
    

How To Use SmacssIt

Now that smacssit is installed , Lets go over how to use it! 👍

Right out the box, smacssit is configured to created the basic folders and filesystem.

Following SMACSS Guide Rules , SmacssIt will create the following folders and files.


To run smacssit, first cd to your project SASS's directory. cd "your-project-sass-folder"

cd "path-to-your-project-sass-folder"

Lastly, Let's create the SMACSS folder structure, now type sudo smacssit

sudo smacssit
usage: makesmacss [-h] [-l] [-m MODULAR [MODULAR ...]] [-s]
                  [-e EXCLUDE [EXCLUDE ...]]

        *********************************************************
        *             SMACSS BOILER PLATE                       *
        *                                                       *
        *      Create SASS/SCSS files and folders               *
        *-------------------------------------------------------*
        *                                                       *
        * A flexible guide to developing sites small and large. *
        *          Documentations:                              *
        *         ------------------                            *
        *     SMACSS: https://smacss.com                        *
        *     SASS:   https://sass-guidelin.es                  *
        *                                                       *
        *********************************************************

optional arguments:
  -h, --help            show this help message and exit
  -l, --list            list all smacss dirs
  -m MODULAR [MODULAR ...], --modular MODULAR [MODULAR ...]
                         Add additional smacss modulars.
					      * Modulars can be place in a specific order by
					         adding a number followed by a dash (-).
                          * Example:
	                         [number]-[name_of_modular] --> 6-icons
  -s, --scss            Use scss format ( default: .sass)
  -e EXCLUDE [EXCLUDE ...], --exclude EXCLUDE [EXCLUDE ...]
                        excludes creating a smacss dir folder

Congratulations.. The finally results should now look similiar to this structure ...

 0-plugins
    _plugin.sass
    _plugins-dir.sass
 1-bases
    _base.sass
    _bases-dir.sass
 2-layouts
    _layout.sass
    _layouts-dir.sass
 3-modules
    _module.sass
    _modules-dir.sass
 4-states
    _state.sass
    _states-dir.sass
 5-themes
    _theme.sass
    _themes-dir.sass
 _animations.sass
 app.sass
 _breakpoints.sass
 _mixins.sass
 _vars.sass
For more details on this file structure, visit: 
      BRAD HUSSEY - Sass Best Practices 

Thanks & Resources

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,049,824
Python (797,356
Html (237,920
Css (140,480
Django (34,911
Jquery (26,473
Flask (20,544
Scss (17,889
Sass (14,509
Structure (10,189
Boilerplate Template (577
Smacss (32