Themesei styleguide

CSS styleguide contains utility classes that can be shared between projects. It's like a normalize with steroids. This works like a npm package that can be installed in every project.

Motivation

At Themesei we found that on every theme created were using the same classes and tricks to keep our CSS consistent. That's why we think about creating a foundation that keeps all of the utility classes that are using between projects and continue to evolve these and focus on the main work.

Features

• yarn Package manager
• np Useful tool that allow control each release.
• gulpjs Automate repetitive tasks.
• autoprefixer Add vendor prefixes to CSS code.
• semver Project versioning
• browser-sync Local auto reload server.
• sass Preprocessor for CSS.
• ITCSS Folder architecture to manage large CSS projects.
• BEM Methodology to create reusable components based on CSS classes.

How does work

styleguide/
├── img/                     All images that are used on html docs
├── src/                     Source code
│   ├── 0-settings/          Global variables
│   ├── 1-tools/             Mixins, functions...
│   ├── 2-generic/           General rules like normalize tags
│   ├── 3-elements/          Bare HTML elements like h1, p, a
│   ├── 4-objects/           It's not used yet
│   ├── 5-components/        Put all classes for every component
│   ├── 6-utilities/         Utility classes like margins, paddings, sizes...
│   └── main.scss           Main file where import all styles files
├── .browserslistrc         Browser support
├── .editorconfig           Mantain code style consistent
├── .gitignore              Ignore especific files and folder for git
├── gulpfile.js             Configuration file where hosts automate tasks
├── index.html              Contains live page docs
├── package.json            Info about project and host dependencies
├── README.md               Repository docs
├── themesei.css            Production CSS file used on other project
└── yarn.lock               Cache file to keep consistent on dependencies

How to use?

Installation

yarn

Run local server

gulp watch

Compile code

gulp build

Update and publish npm package

np

Steps to deploy

• Before generate the commit you should execute gulp build to update themesei.css file
• Create a commit with the current changes and push to repository
• After that execute np

Contributing

Keep in mind that if you want to add more development or automate process and want to install a new dependency this should live below devDependencies on package.json.