About PrimalCSS

PrimalCSS is a minimal and slim CSS framework...

PrimalCSS started as a codebase for my front-end projects (not a big fan of blob frameworks). The project provides the css for: typography, grids, layouts, buttons, utilities, and css resets. PrimalCSS comes in a small package (less bytes), that's all.

Specifications

SpecDescription
Versionv1.3
stylesCSS
preprocessorSASS
writing stylesmacss
size (uncompressed)~17kb
size (minified)~5kb1
size (minified) w/ vendors~8kb2
size GZIP~5kb
VCSGit
performanceLoad times vary dramatically from user to user, depending on their device capabilities and network conditions 3
RepoGitHub
LicensedMIT

References
1: Only PrimalCSS minify
2: Minify version includes normalize.css and reset.css
3: User-centric Performance Metrics

Getting Started

Try it out...

First, just download the zip version that fits your project. Ready, Go!

Get the compiled CSS. No source files are included.

Download CSS

If you are into SASS/SCSS I got you! get the source code and make something new!

Download Source code

You’re all set! Enjoy and don't forget to keep reading the rest of the documentation. Cheers!

Typography

Add rhythm to your typography

Modular scale with the Golden Ratio rhythm built-in. Check out the sass settings for more type ratios. Current project uses the system fonts but you may use your own typafeces. This theme is using Roboto and Roboto Mono.

About Roboto
Roboto has a dual nature. It has a mechanical skeleton and the forms are largely geometric. At the same time, the font features friendly and open curves. While some grotesks distort their letterforms to force a rigid rhythm, Roboto doesn’t compromise, allowing letters to be settled into their natural width. This makes for a more natural reading rhythm more commonly found in humanist and serif types.

Get Roboto from Google Fonts.

Heading levels h4 - h1

Roboto has a dual nature.

Roboto has a dual nature.

Roboto has a dual nature.

Roboto has a dual nature.

<p class="font-small">Small body text</p>
<p>Body text </p>
<h4>H4 Heading</h4>
<h3>H3 Heading</h3>
<h2>H2 Heading</h2>
<h1>H1 Heading</h1>

Grid

Grid is fluid and only has eight columns! What?!

The grid can be modified in the sass grid settings. Don't over think the grid, less is more!

HTML class :grid-8
HTML class :grid-1
HTML class :grid-7
HTML class :grid-2
HTML class :grid-6
HTML class :grid-3
HTML class :grid-5
HTML class :grid-4
HTML class :grid-4
<!-- Must use .group to wrap grid elements -->
<div class="group"> 
  <div class="grid-1">
    <!-- Content here... -->
  </div>
  <div class="grid-7">
    <!-- Content here... -->
  </div>
</div>

Grid Mobile Helpers

.grid-half usefull when want to keep content in half on small devices.

HTML class :grid-half
HTML class :grid-half
<div class="group"> 
  <div class="grid-half">
    <!-- Content here -->
  </div>
  <div class="grid-half">
    <!-- Content here -->
  </div>
</div>

Add .grid-mb to break content in full width on medium size breakpoints about 768px.

HTML class :grid-4 grid-mb
HTML class :grid-4 grid-mb
<div class="group"> 
  <div class=".grid-4 grid-mb">
    <!-- Content here -->
  </div>
  <div class=".grid-4 grid-mb">
    <!-- Content here -->
  </div>
</div>

Layouts

Semantic layouts for content, sidebars, features and more...

Setting a page layout is fast and easy to implement.

HTML class :l-feature
HTML class :l-feature
HTML class :l-feature
HTML class :l-content
<!-- Must use .layout to wrap layouts -->
<div class="layout">
<div class="l-content">
<!-- Main content here -->
</div>
<div class="l-sidebar">
<!-- Sidebar content here -->
</div>
</div>
<!-- Same-O wrap features with .layout -->
<div class="layout"> 
<div class="l-feature">
<!-- Feature content here -->
</div>
<div class="l-feature">
<!-- Feature content here -->
</div>
<div class="l-feature">
<!-- Feature content here -->
</div>
</div>

For single content page layout just add the content layout to the target element like so

HTML class :l-content l-centered
 <!-- METHOD 1: Using single content layout centered -->
<div class="layout">
  <div class="l-content l-centered">
    <!-- Main content here -->
  </div>
</div>
<!-- METHOD 2: content can be wrap by .container ONLY IF USING SINGLE LAYOUT! -->
<div class="container">
  <div class="l-content l-centered">
    <!-- Main content here  -->
  </div>
</div>  

Buttons

Every CSS framework should have buttons, right!

Primary buttons



Secondary buttons



 <button class="button-primary">Primary Buttons</button>
<button class="button-secondary">Secondary button</button>
<button class="button-primary button-round">Rounded button</button>
<button class="button-secondary font-small">Small button</button>

Want more buttons, I got it!

Just inherit the styles from Primary and Secondary buttons and change styles accordingly color, border, background, and hover state.

<button class="button-primary button-success">Success Button</button>
 .button-success {
  background-color: #4ca14c;
}

.button-success:hover {
  background-color: #5cb85c;
}