Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/cbedroid/smacss-it
Build SMACSS folders and files structure template for Sass/Scss/Css
https://github.com/cbedroid/smacss-it
boilerplate boilerplate-template css django flask html javascript jquery python sass scss smacss smacss-sass snippets
Last synced: 12 days ago
JSON representation
Build SMACSS folders and files structure template for Sass/Scss/Css
- Host: GitHub
- URL: https://github.com/cbedroid/smacss-it
- Owner: cbedroid
- Created: 2020-07-14T12:08:51.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2020-08-18T00:06:00.000Z (over 4 years ago)
- Last Synced: 2024-11-28T20:48:59.932Z (2 months ago)
- Topics: boilerplate, boilerplate-template, css, django, flask, html, javascript, jquery, python, sass, scss, smacss, smacss-sass, snippets
- Language: Python
- Homepage:
- Size: 14.6 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 
and over ...
and over...
and over again makes me 
! **Dont't Get Mad 
... Just Smacss It !!!**
# WHAT IS SMACSS?
### 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 isn’t building a site with CSS these days?!
- **For more information about SMACSS:** [SMACSS Documentation](http://smacss.com/)
## 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`**
```bash
sudo git clone https://github.com/cbderoid/smacss_it.git
```
- Navigate to repo folder by typing **`cd "path-to-this-repo-folder"`**
```bash
cd "path-to-this-repo-folder"
```
- Move **`smacssit`** file to **`/usr/bin`** by typing **`sudo mv smacssit /usr/bin/`**
```bash
sudo mv smacssit /usr/bin/
```
- Make sure file is executable through system - **`sudo chmod +x /usr/bin/smacssit`**
```bash
sudo chmod +x /usr/bin/smacssit
```
## How To Use SmacssIt
#### Now that smacssit is installed , Lets go over how to use it! :+1:
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"`**
```bash
cd "path-to-your-project-sass-folder"
```
Lastly, Let's create the SMACSS folder structure, now type **`sudo smacssit`**
```bash
sudo smacssit
```
```bash
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 ...
```bash
├── 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
- [Codes](https://github.com/cbedroid/Smacss-It)
- [SMACSS Documentation](http://smacss.com/)
- [Sass Documentation](https://sass-guidelin.es/)
- [Issues & Bugs](https://github.com/cbedroid/Smacss-It/issues)