Resize your brower's size and look how it reacting.
Make it more comfortable with space.
You can set a row like that :
<div class="row">
<div class="cl-X"></div>
</div>
Where X is a number between 0 and 12. 0 is for nothing, and 12 is for a 100% width column.
But row is, not really necessary, it’s just to be sure to set a width to 100% (row is only width: 100%)
How center a column?
You can center you column by adding .center, but it must have row as ancestor (but not necessarily direct parent!)
How to create an offset ?
cl-offset-X where X is a number between 1 and 12. 1 is for a little offset, and 6 is for the half of the available space offset.
Example : class="cl-offset-4"
You can set a cl-s-offset-X or a cl-xs-offset-X to handle responsivity.
For screen where width is under 780px : s
cl-s-X where X is a number between 0 and 12. Where 0 is for a display: none, to make it disapear, and 12 is for full width. Therefore, 6 is for 50% because 6 is 50% of 12.
Example : class="cl-s-8"
For screen where width is under 460px : xs
cl-xs-X where X is a number between 0 and 12. Where 0 is for a display: none, to make it disapear, and 12 is for full width. Therefore, 6 is for 50% because 6 is 50% of 12.
Example : class="cl-xs-8"
.box : make a box.danger : to show a danger message (red color). To add to .box.warning : to show an alert message (orange color). To add to .box.success : to show an success message (green color). To add to .box.inform : to show an inform message (grey color). To add to .box.inform-blue : to show an inform message (blue color). To add to .box.butt : to make quickly a button. To add to submit, button, or just a to make a button..butt-big : to make a button, but bigger..butt-blue : to make a button, but in blue. To add to .butt.butt-space : a little space, margin and padding, it’s can only be good..butt-space-margin : for margin space..butt-space-padding : for padding space.
<div class="box">Simple box</div>
<div class="box danger">Danger box !</div>
<div class="box warning">Warning box !</div>
<div class="box success">Succes box !</div>
<div class="box inform"> We want to inform you about... </div>
<div class="box inform-blue"> We don't know... </div>
<button> Sign in </button>
<button class="butt">Sign in</button>
<button class="butt butt-blue">Sign in</button>
<button class="butt-big">Sign in</button>
<button class="butt-big butt-blue">Sign in</button>
A list of available utilities and prewrited classes :
.fit : fit element to full size available. (width: 100%).clear : clear:both.clearfix : trivial.ma_space : create a outer space of 18px.ma_reset : Reset margin.pa_space : create a inner space of 18px.pa_reset : Reset padding.center : center a block.pointer : cursor to pointer.c_transparent : Make color transparent.bg_transparent : Make background-color transparent.bg_none : Make background-color as none.bo-c_transparent : Make border-color as transparent.p-improved : Maximum width, to improve readibility. (be care with this).o-ellipsis : text-overflow to ellipsis.word-wrap-break : word-wrap to break-work.t-small : a smaller text.t-big : a bigger text.italic : make text italic.bold : make text bold.bolder : make text bolder.light : make font-weight light.lighter : make font-weight lighter.underline : underline text.uppercase : uppercase text.lowercase : lowercase text.capitalize : capitalize text.visible : visibility to visible.hidden : visibility to hidden.round : border-radius to 12px.circle : Make a circle.fl_l : float left.fl_r : float right.fl_none : float none.d_block : display to block.d_inline-block : display to inline-block.d_none : display to none.d_inline : display to inline.d_flex : display to flex.d_inline-flex : display to inline-flex.t_l : align text to left.t_center : align text to center.t_r : align text to right.t_justify : justify your text.v_baseline : set vertical-align to baseline.v_top : set vertical-align to top.v_bottom : set vertical-align to bottom.v_middle : set vertical-align to middle.v_inherit : set vertical-align to inherit.o_auto : set overflow to auto.o_hidden : set overflow to hidden.o_inherit : set overflow to inherit.o_scroll : set overflow to scroll.o_visible : set overflow to visible.p_absolute : set position to absolute
.p_fixed : set position to fixed
.p_inherit : set position to inherit
.p_relative : set position to relative
.p_static : set position to static
.p_sticky : set position to sticky
.li-inline : set this to your ul and li element(s) will be inline.li-reset : set this to your ul and style of li element(s) will be reseted.li-tb-space : set this to your ul and li element(s) will breathe a little bit in top and bottom side.li-rl-space : set this to your ul and li element(s) will breathe a little bit in right and left side<a>.a_reset : reset your a default style. Color will be in black. It will also reset color for :visited and :link..a-underline_reset : reset only underline.a-c_reset : reset only color (color will be in black).a-c_black : color will be in black..a-c_white : color will be in white..serif : set font-family: serif.times : set font-family: times.times-new-roman : set font-family: "Times New Roman".georgia : set font-family: georgia.sans : set font-family: sans.arial : set font-family: Arial.helvetica : set font-family: Helvetica.helvetica-neue : set font-family: "Helvetica Neue"Kafka's writing has inspired the term "Kafkaesque", used to describe concepts and situations reminiscent of his work, particularly Der Process (The Trial) and "Die Verwandlung" (The Metamorphosis). Examples include instances in which bureaucracies overpower people, often in a surreal, nightmarish milieu which evokes feelings of senselessness, disorientation, and helplessness. Characters in a Kafkaesque setting often lack a clear course of action to escape a labyrinthine situation. Kafkaesque elements often appear in existential works, but the term has transcended the literary realm to apply to real-life occurrences and situations that are incomprehensibly complex, bizarre, or illogical.
<p class="p-improved center">
Kafka's writing has inspired the term <span class="bold">"Kafkaesque"</span>, used to describe concepts and situations reminiscent of his work, particularly Der Process (The Trial) and <span class="underline">"Die Verwandlung" (The Metamorphosis)</span>. <span class="t-big">Examples</span> include instances in which bureaucracies overpower people, often in a surreal, nightmarish milieu which evokes feelings of senselessness, disorientation, and <span class="ma_space">helplessness</span>. Characters in a Kafkaesque setting often lack a clear course of action to escape a <span class="t-small">labyrinthine situation</span>. Kafkaesque elements often appear in existential works, but the term has transcended the literary realm to apply to real-life occurrences and situations that are incomprehensibly complex, bizarre, or illogical.
</p>
ClaCss.js is a tool to write css directly in your HTML, if you wanna know more, check the dedicated website.
With ClaCss you can set color, background-color, height, width, etc... directly in your code.
When you use ClaCss.js you can have a lighter Carver. I don’t recommend to use ClaCss.js for big project.
.c_blue : set color to blue
.c_white : set color to white
.c_grey : set color to grey
.c_black : set color to black
.c_red : set color to red
.c_green : set color to green
.bg_white : set background-color to white
.bg_grey : set background-color to grey
.bg_black : set background-color to black
.f-weight_X : set font-weight. X can be 100, 200, 300, 400, 500, 600, 700.
.ma_0 : margin to 0.
.ma_X : set margin. X Can be 5, 10, 15, 20, 25.
.ma-l_X : set margin-left. X Can be 5, 10, 15, 20, 25.
.ma-r_X : set margin-right. X Can be 5, 10, 15, 20, 25.
.ma-t_X : set margin-top. X Can be 5, 10, 15, 20, 25.
.ma-b_X : set margin-bottom. X Can be 5, 10, 15, 20, 25.
.ma-rl_X : set margin-right and margin-left. X can be 5, 10, 15, 20, 25.
.ma-tb_X : set margin-top and margin-bottom. X Can be 5, 10, 15, 20, 25.
.pa_0 : set padding to 0.
.pa_X : set padding. X Can be 5, 10, 15, 20, 25.
.pa-l_X : set padding-left. X Can be 5, 10, 15, 20, 25.
.pa-r_X : set padding-right. X Can be 5, 10, 15, 20, 25.
.pa-t_X : set padding-top. X Can be 5, 10, 15, 20, 25.
.pa-b_X : set padding-bottom. X Can be 5, 10, 15, 20, 25.
.pa-rl_X : set padding-right and padding-left. X Can be 5, 10, 15, 20, 25.
.pa-tb_X : set padding-top and padding-bottom. X Can be 5, 10, 15, 20, 25.
Under MIT license.
What about pushing some improvement ? If you have an idea, or suggestion(s), check our Github