DEV Community

Cover image for Basic.css - Classless CSS Starter File
Vladimir Carrer
Vladimir Carrer

Posted on

Basic.css - Classless CSS Starter File

Basic.css gives you basic CSS formatting and ability to make basic grids with only HTML5 syntax. You can use this project to Set your default styling.

List of features

  • Lightweight 1kb minified and gzipped.
  • Basic typography.
  • Basic forms.
  • Custom colors.
  • Dark theme.
  • Round corners.
  • Flex Grid without classes.
  • Flex Grid cards.

Demo: https://vladocar.github.io/Basic.css/

You can change root css variables with your color palette:
:root {
  --c1:#0074d9;
  --c2:#eee;
  --c3:#fff;
  --c4:#000;
  --c5:#fff;
}
Enter fullscreen mode Exit fullscreen mode
Or adjust the round corners

By default are 8px, use --rc: 0px; if you don't like round corners.

:root {
  --rc: 8px;
}
Enter fullscreen mode Exit fullscreen mode
Override the colors in the dark mode:
@media (prefers-color-scheme: dark) {
    :root {
      --c2:#333;
      --c3:#1e1f20;
      --c4:#fff;
    }
}
Enter fullscreen mode Exit fullscreen mode
How you can use the infinity flex grid?

Use the HTML5 tags section and nested section to make flex grid.

<section>
    <section> 1 </section>
    <section> 2 </section>
    <section> 3 </section>
</section>
<section>
    <section> 1 </section>
    <section> 2 </section>
    <section> 3 </section>
    <section> 4 </section>
</section>
Enter fullscreen mode Exit fullscreen mode

Demo: https://vladocar.github.io/Basic.css/grid.html

Use the HTML5 tags selection and article to make cards.

<section>
    <article> 1 </article>
    <article> 2 </article>
    <article> 3 </article>
</section>
Enter fullscreen mode Exit fullscreen mode

Demo: https://vladocar.github.io/Basic.css/cards.html

How to use this project?

Simply download and personalize the basic.css file.

Or

npm i @vladocar/basic.css
Enter fullscreen mode Exit fullscreen mode

Why should you use this project?

Instead of using CSS Reset you could just Set the basic css formatting and styling. You could even make some grids with the HTML5 tags. Naturally if you want to build something more complex you should use CSS classes and this project works great in combination with other CSS frameworks.

Github: https://github.com/vladocar/Basic.css

Discussion (0)