There are 3 ways to get started with Vodka CSS. You can either install manually, from CDN or use package managers.
Download the compiled and minified Vodka CSS file (core ~7KB min + gzip).
Download VodkaInclude vodka.min.css located in /dist folder in your website or web app.
You can customize your version of Vodka CSS by editing sass files in /src/scss directory or removing unneeded components from .scss source files.
Vodka uses Parcel for compiling CSS.
First, you need to install NPM, which is used to manage scripts and other dependencies.
Then, you can build the CSS file from the command line:
npm install NPM will install all dev dependencies as listed in package.json.npm run build to compile SCSS to CSS and minify files.Other available NPM scripts:
npm run develop — Watch files for changes and re-compile CSS files.npm run build — Compile SCSS to CSS and minify files.It is recommended to customize Vodka by importing sass source files to your projects. In this way, you can keep Vodka up to date without conflicts, since Vodka code and your custom code are separate.
Alternatively, you can create custom _variables.scss and import it to project-name.scss.
Vodka uses Autoprefixer to make most styles compatible with earlier browsers and Normalize.css for CSS resets.
Vodka is designed for modern browsers. For best compatibility, these browsers are recommended:
Vodka CSS follows the BEM naming convention when authoring CSS and ITCSS architecture made by Harry Roberts. This two combination principle is also known as BEMIT.
Vodka is layer on top of Normalize.css to render all elements consistenly in different browsers.
Normalize.css is already added by default in generic.normalize.scss.
Box-sizing prevents unexpected layout issue. For more info about box-sizing read this article from CSS Tricks.
Reboot is a small style rule to reset margins and paddings to most common elements such as headings, paragraphs, etc.
Base is a style rule to scaffold document body by setting up the font-family, font-size, color, etc.
Your time is limited, so don't waste it living someone else's life.
- Steve Jobs
Hello World!.some-class {
font-size: 1rem;
}Containers provide media query screen widths. By default, container is 100% width with a margin auto.
Containers comes with different sizes base on the given screen breakpoints.
Containers can be instructed at different sizes base on the given breakpoint. Go resize your browser to test it yourself.
When creating forms make use of .o-form-element class to create consistent spacings to form elements.
The grid can also be based on 12-column grid much like on other frameworks such as Bootsrap.
To push a column horizontally across the grid use the .o-grid__col--offset-{xx} class modifier. Use in-conjunction with the remaining columns to perfectly align your grid.
A grid is essentially a row of columns. However columns can wrap onto the next line within the grid.
Here we have 2 columns, col--6 and col--8 but the grid can only accomodate 12 columns in total.
To solve this we can wrap the columns within the grid by adding the .o-grid--wrap modifier class.
You can nest grids inside columns with relative ease.
If one of your columns is tall you can apply a vertical alignment class modifier to the grid.
.o-grid--top , .o-grid--center , .o-grid--bottom are supported.You can override the vertical alignment of all the columns in the grid by specifying per column.
.o-grid__col--top , .o-grid__col--center , .o-grid__col--bottom are supported.Vodka's grid comes with a gutter around each grid column with some padding on either side.
Sometimes you want your columns to be coupled with each other. To turn off all gutters use .o-grid--no-gutter class modifier.
.o-grid__col--no-gutter .Grid columns can be instructed in different columns base on the given screen breakpoints with a mobile first approach. Go resize your browser to test it yourself.
It works also for hiding or showing columns base on the given breakpoints.
Image is 100% width and responsive.
To make a button add the .c-button class to buttons, inputs or links.
Buttons comes with different color states.
Adding a size utility class u-size-{xx} will change the size of the button.
Adding a .c-button--block class modifier will make the button full width.
Adding a .c-button--outline class modifier will make the button outline.
Adding a .c-button--link class modifier will make the button mimic like a link.
Add the disabled attribute to a button to make the button disabled.
From single input controls like text boxes to full form patterns.
Inputs comes with different color states.
Adding a size utility class u-size-{xx} will change the size of the input.
Add the disabled attribute to an input to make the input disabled.
Adding a class of .c-option and .c-option--checkbox class modifier will make a custom checkbox
.c-option--radio class modifier will also make a custom radiobuttonVodka comes with consistent styles for links. Add the c-link class and c-link--{xx} class modifier for different states
Un-ordered, Ordered, Unstyled, or Inline. Vodka got you covered when it comes to making lists.
Un-ordered list comes with a custom icon instead of a boring bullet point.
The .c-list--ordered modifier will apply correct numbering to ordered lists and nested lists.
Applying .c-list--unstyled to a list will remove the list icons with no styling.
To make your list items inline apply the .c-list--inline class modifier.
Tables are great for displaying tabular data.
| First Name | Last Name | Sex |
|---|---|---|
| John | Doe | Male |
| Jane | Doe | Female |
Applying .c-table--striped class modifier will make a striped rows in your table.
| First Name | Last Name | Sex |
|---|---|---|
| John | Doe | Male |
| Jane | Doe | Female |
| Mike | Doe | Male |
A set of text-colors and background-colors utility classes.
Text White
Text Black
Text Gray-100
Text Gray-200
Text Gray-300
Text Gray-400
Text Gray-500
Text Gray-600
Text Gray-700
Text Gray-900
Text Gray-900
Text Red-100
Text Red-200
Text Red-300
Text Red-400
Text Red-500
Text Red-600
Text Red-700
Text Red-900
Text Red-900
Text Green-100
Text Green-200
Text Green-300
Text Green-400
Text Green-500
Text Green-600
Text Green-700
Text Green-900
Text Green-900
Text Blue-100
Text Blue-200
Text Blue-300
Text Blue-400
Text Blue-500
Text Blue-600
Text Blue-700
Text Blue-900
Text Blue-900
Text Orange-100
Text Orange-200
Text Orange-300
Text Orange-400
Text Orange-500
Text Orange-600
Text Orange-700
Text Orange-900
Text Orange-900
A set of sizing utility classes that can be applied to any component with u-size-{xx}.
A set of spacing utility classes for margins and paddings supported in all sides.