Basic.css – Classless CSS Starter File

栏目: IT技术 · 发布时间: 4年前

内容简介:Classless CSS Starter FileBasic.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.

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/

This project uses the best elements from my previous projects:

You can change root css variables with your color palette:

:root{
--c1:#0074d9;
--c2:#eee;
--c3:#fff;
--c4:#000;
--c5:#fff;
}

Or adjust the round corners

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

:root{
--rc: 8px;
}

Override the colors in the dark mode:

@media (prefers-color-scheme: dark) {
	:root {
        --c2:#333;
        --c3:#1e1f20;
        --c4:#fff;
	}
}

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>

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>

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

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.


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

解放战争(上)(1945年8月—1948年9月)

解放战争(上)(1945年8月—1948年9月)

王树增 / 人民文学出版社 / 2009-8 / 60.00

《解放战争》为王树增非虚构文学著述中规模最大的作品。武器简陋、兵力不足的军队对抗拥有现代武器装备的兵力庞大的军队,数量不多、面积有限的解放区最终扩展成为九百六十万平方公里的共和国,解放战争在短短四年时间里演绎的是人类历史上的战争传奇。国际风云,政治智慧,时事洞察,军事谋略,军队意志,作战才能,作品具有宏阔的视角和入微的体察,包含着惊心动魄的人生沉浮和变幻莫测的战场胜负,尽展中国历史上规模最大的一场......一起来看看 《解放战争(上)(1945年8月—1948年9月)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器