Core CSS: A simple but powerful framework not trying to translate every css property into a utility, instead it is hard-core 🤘 design oriented approach to utility-based frameworks for coding modern digital layouts.
Interested in learning more about Core CCS?
https://coda.io/d/CORE-CSS_du6yeYakN3H
How to us it?
Include this link tag in your header:
https://bismuth-core-v4.now.sh/core.css-- If you want to use the unsupported but most recent version of Core you can include this link instead:
https://bismuth-core-live.now.sh/core.cssColor palette
Color palette inverted
Paddings
PADDING XS: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur tincidunt purus, eget scelerisque quam tincidunt non. Vestibulum eget massa aliquet, finibus enim et, feugiat velit. In porta lacus
nec risus iaculis, non consequat velit ultrices. Pellentesque et dolor et velit pulvinar convallis quis at nisl. Mauris sed diam porta, ornare massa ut, elementum nisl. Mauris quis elementum nisl. Sed ut purus vel metus finibus
vehicula. Maecenas porta lacus ut sapien hendrerit vestibulum. Etiam nec nibh quam. Nam vitae tempor tortor.
PADDING S: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur tincidunt purus, eget scelerisque quam tincidunt non. Vestibulum eget massa aliquet, finibus enim et, feugiat velit. In porta lacus
nec risus iaculis, non consequat velit ultrices. Pellentesque et dolor et velit pulvinar convallis quis at nisl. Mauris sed diam porta, ornare massa ut, elementum nisl. Mauris quis elementum nisl. Sed ut purus vel metus finibus
vehicula. Maecenas porta lacus ut sapien hendrerit vestibulum. Etiam nec nibh quam. Nam vitae tempor tortor.
PADDING M: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur tincidunt purus, In porta lacus nec elementum nisl. Mauris quis elementum nisl. risus iaculis, non consequat velit ultrices.
Pellentesque et dolor et velit pulvinar convallis quis at nisl. eget scelerisque quam tincidunt non. Vestibulum eget massa aliquet, finibus enim et, feugiat velit. In porta lacus nec risus iaculis, non consequat velit ultrices.
Pellentesque et dolor et velit pulvinar convallis quis at nisl. Mauris sed diam porta, ornare massa ut, elementum nisl. Mauris quis elementum nisl. Sed ut purus vel metus finibus vehicula. Maecenas porta lacus ut sapien hendrerit
vestibulum. Etiam nec nibh quam. Nam vitae tempor tortor.
PADDING L: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur tincidunt purus, eget scelerisque quam tincidunt non. Vestibulum eget massa aliquet, finibus enim et, feugiat velit. In porta lacus
nec risus iaculis, non consequat velit ultrices. Pellentesque et dolor et velit pulvinar convallis quis at nisl. Mauris sed diam porta, ornare massa ut, elementum nisl. Mauris quis elementum nisl. Sed ut purus vel metus finibus
vehicula. Maecenas porta lacus ut sapien hendrerit vestibulum. Etiam nec nibh quam. Nam vitae tempor tortor.
PADDING XL: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur tincidunt purus, eget scelerisque quam tincidunt non. Vestibulum eget massa aliquet, finibus enim et, feugiat velit. In porta lacus
nec risus iaculis, non consequat velit ultrices. Pellentesque et dolor et velit pulvinar convallis quis at nisl. Mauris sed diam porta, ornare massa ut, elementum nisl. Mauris quis elementum nisl. Sed ut purus vel metus finibus
vehicula. Maecenas porta lacus ut sapien hendrerit vestibulum. Etiam nec nibh quam. Nam vitae tempor tortor.
Hover to hide me!
Oh Hey you found me!
Hover above to show the hidden div.
You can combine hover-hide with transition exp: class="hover-show opacity-0"
Opacity
opacity-low
You can use .opacity-0 / .opacity-low / .opacity-medium ./ .opacity-high / .opacity-1"
.font-xl = 42px / 30px
.font-l = 28px / 20px
.font-m = 18px / 16px
.font-s = 14px / 14px
.font-xs = 10px / 10px
breakpoint
Small
0 - 688px
Medium
688 - 992px
Medium-up
688px +
Large
993 - 1530px
Large-up
993px +
Extra Large
1530px +
image-contain
image-cover
A regular responsive Image
Flexbox Helpers
- .flex-wrap
- .flex-row-reverse
- .flex-column-reverse
- .flex-2, .flex-3
- .flex-break-3
- .flex-gap-m
- .flex-min-50
- .flex-min-150
- .flex-min-500
General Helpers
- .border-top
- .border-left
- .transition
- .fixed
- .relative
- .cursor-point
- .underline
- .height-100
- .height-40
- .vph
- .shadow
- .round-corners
- .bold
.text-columns-4
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Massa placerat duis ultricies lacus sed. Vulputate odio ut enim blandit volutpat maecenas. Nisi scelerisque eu
ultrices vitae auctor. In arcu cursus euismod quis. Auctor neque vitae tempus quam pellentesque nec nam. Egestas fringilla phasellus faucibus scelerisque. Amet justo donec enim diam. Eget velit aliquet sagittis id consectetur. Ut tellus
elementum sagittis vitae.
Commodo sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Eget magna fermentum iaculis eu non diam. In arcu cursus euismod quis. Aliquam nulla facilisi cras fermentum odio eu feugiat. Cursus in hac habitasse platea
dictumst. Etiam erat velit scelerisque in dictum non consectetur. Amet massa vitae tortor condimentum lacinia quis vel. Sed faucibus turpis in eu mi bibendum neque egestas. Diam donec adipiscing tristique risus nec. Sapien pellentesque
habitant morbi tristique senectus. Tincidunt dui ut ornare lectus sit amet est placerat in. Quisque id diam vel quam elementum pulvinar etiam non. Pellentesque dignissim enim sit amet venenatis.
Velit euismod in pellentesque massa placerat duis ultricies lacus. Vel orci porta non pulvinar neque laoreet suspendisse interdum. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Egestas sed tempus urna et pharetra
pharetra massa. Morbi tristique senectus et netus et malesuada fames ac. Id leo in vitae turpis massa sed elementum. Donec massa sapien faucibus et molestie ac feugiat. Turpis tincidunt id aliquet risus. A iaculis at erat pellentesque
adipiscing commodo elit. Lectus arcu bibendum at varius. Aliquet nibh praesent tristique magna sit amet purus. In est ante in nibh mauris cursus mattis. Enim nulla aliquet porttitor lacus luctus accumsan tortor posuere ac. Pretium fusce id
velit ut tortor pretium. At in tellus integer feugiat.
width-100: 100%
width-max: 1530px
width-full: 1200px
width-content: 900px
width-text: 600px
Grids
.content-center
.content-center
.content-center
.content-center
.content-center
.content-center
.content-center
.content-center
.content-center
.content-center
.content-center
.content-center