css-sets : Preview

Out of the box - plug and play css class sets (3.6kb gzip compressed)

Install

bower install css-sets

Or include sets.min.css file or via https://rawgit.com/thatisuday/css-sets/master/sets.min.css

How does it work?

You get easy classes to set Font color, Font color on hover, background color, font size, line height, letter, width, height etc.

All class sets have a prefix. For example, _color_ prefix for font color hence _color_000 means black font or font-color:#000

Style Sets

Color

_color_fff,_color_f5f5f5,_color_eee,_color_ddd,_color_ccc,_color_bbb,_color_aaa,_color_999,_color_888,_color_777,_color_666,_color_555,_color_444,_color_333,_color_222,_color_111,_color_000

Color on :Hover

_color_fff_hover,_color_f5f5f5_hover,_color_eee_hover,_color_ddd_hover,_color_ccc_hover,_color_bbb_hover,_color_aaa_hover,_color_999_hover,_color_888_hover,_color_777_hover,_color_666_hover,_color_555_hover,_color_444_hover,_color_333_hover,_color_222_hover,_color_111_hover,_color_000_hover

Background color

_bg_color_tr,_bg_color_fff,_bg_color_f2f2f2,_bg_color_fafafa,_bg_color_f5f5f5,_bg_color_eee,_bg_color_ddd,_bg_color_ccc,_bg_color_bbb,_bg_color_aaa,_bg_color_999,_bg_color_888,_bg_color_777,_bg_color_666,_bg_color_555,_bg_color_444,_bg_color_333,_bg_color_222,_bg_color_111,_bg_color_000

Font size

_fs_0,_fs_8,_fs_9,_fs_10,_fs_11,_fs_12,_fs_13,_fs_14,_fs_15,_fs_16,_fs_18,_fs_20,_fs_22,_fs_24,_fs_26,_fs_28,_fs_30,_fs_32,_fs_34,_fs_36,_fs_38,_fs_40,_fs_46,_fs_50,_fs_56,_fs_60,_fs_66,_fs_80,_fs_100,_fs_120

Font weight

_fw_100,_fw_200,_fw_300,_fw_400,_fw_500,_fw_600,_fw_700,_fw_800,_fw_900

Letter spacing

_ls_norm,_ls_1,_ls_2,_ls_3

Text transform

_txt_ucs,_txt_lcs,_txt_cpt

Line height

_lh_norm,_lh_0,_lh_10,_lh_11,_lh_12,_lh_13,_lh_14,_lh_15,_lh_16,_lh_18,_lh_20,_lh_22,_lh_24,_lh_26,_lh_28,_lh_30,_lh_32,_lh_34,_lh_36,_lh_38,_lh_40,_lh_46,_lh_50,_lh_56,_lh_60,_lh_66,_lh_80,_lh_100,_lh_120

Padding

_pa_0,_pt_0,_pt_1,_pt_2,_pt_3,_pt_4,_pt_5,_pt_6,_pt_7,_pt_8,_pt_9,_pt_10,_pt_15,_pt_20,_pt_25,_pt_30,_pt_35,_pt_40,_pt_50,_pb_0,_pb_1,_pb_2,_pb_3,_pb_4,_pb_5,_pb_6,_pb_7,_pb_8,_pb_9,_pb_10,_pb_15,_pb_20,_pb_25,_pb_30,_pb_35,_pb_40,_pb_50,_pl_0,_pl_1,_pl_2,_pl_3,_pl_4,_pl_5,_pl_10,_pl_15,_pl_20,_pl_25,_pl_30,_pl_35,_pl_40,_pl_50,_pr_0,_pr_1,_pr_2,_pr_3,_pr_4,_pr_5,_pr_10,_pr_15,_pr_20,_pr_25,_pr_30,_pr_35,_pr_40,_pr_50

Margin

_m_0_a,_ma_0,_mt_0,_mt_5,_mt_10,_mt_15,_mt_20,_mt_25,_mt_30,_mt_35,_mt_40,_mt_50,_mb_0,_mb_5,_mb_10,_mb_15,_mb_20,_mb_25,_mb_30,_mb_35,_mb_40,_mb_50,_ml_a,_ml_0,_ml_5,_ml_10,_ml_15,_ml_20,_ml_25,_ml_30,_ml_35,_ml_40,_ml_50,_mr_a,_mr_0,_mr_5,_mr_10,_mr_15,_mr_20,_mr_25,_mr_30,_mr_35,_mr_40,_mr_50

_m_0_a is for {margin:0 auto;}. Use to position element in the center.

Display

_disp_i,_disp_ib,_disp_b,_disp_n

Float

_fl_l,_fl_r,_fl_n

Text Align

_txta_c,_txta_l,_txta_r

Vertical Align

_va_m,_va_t,_va_b

Outline

_outl_n

Border

_ba_1_eee,_bt_1_eee,_bb_1_eee,_bl_1_eee,_br_1_eee,_ba_1_ddd,_bt_1_ddd,_bb_1_ddd,_bl_1_ddd,_br_1_ddd,_ba_n,_ba_n_lc,_bl_n,_bl_n_lc,_br_n,_br_n_lc,_bt_n,_bt_n_lc,_bb_n,_bb_n_lc

'_lc' suffix is for last-child element. Hence that class will only work if element is last immediate child to it's parent. Use it will any border class like _bb_1_eee _bb_n_lc, this will remove the border of element if it is the last child.

Border radius

_br_0,_br_1,_br_2,_br_3,_br_4,_br_5,_br_100

100 in _br_100 is 100%. This is useful to make circles.

Overflow

_ovrf_h,_ovrf_a,_ovrf_s,_ovrf_y_h,_ovrf_x_h,_ovrf_y_a,_ovrf_x_a

Position

_pos_r,_pos_a,_pos_f

Location (left, top, right, bottom properties)

_loc_lt,_loc_rt,_loc_lb,_loc_rb,_loc_ct,_loc_cc,_loc_cb,_loc_lc,_loc_rc,_loc_ct_nt,_loc_cc_nt,_loc_cb_nt,_loc_lc_nt,_loc_rc_nt

Use position class with location class. Ex. _pos_a _pos_lt will yield {position:absolute; left:0; top:0;}

Suffix _nt is for no translate. That mean element will not move to left, right, top or bottom to adjust it position. For example, _loc_cc will provide {top:50%; left:50%; transform:translate:50% 50%;} but _loc_cc_nt will provide only {top:50%; left:50%;}

Background size cover (with position)

_bsc_lt,_bsc_ltc,_bsc_lc,_bsc_lbc,_bsc_lb,_bsc_ct,_bsc_ctc,_bsc_cc,_bsc_cbc,_bsc_cb,_bsc_rt,_bsc_rtc,_bsc_rc,_bsc_rbc,_bsc_rb

White space

_ws_nw, _ws_nw_elp

_ws_nw_elp will add ellipsis for overflowed text

Cursor

_cur_p,_cur_d,_cur_zi,_cur_zo,_cur_gb,_cur_gbn

Text decoration

_txtd_n,_txtd_ul,_txtd_lt

Animate anchor links on :hover

_a_hover_ul, _a_hover_b

Resize

_resize_n,_resize_b,_resize_v,_resize_h

List style type

_lst_n

Width

_width_100,_width_95,_width_90,_width_85,_width_80,_width_75,_width_70,_width_65,_width_60,_width_55,_width_50,_width_45,_width_40,_width_35,_width_30,_width_25,_width_20,_width_15,_width_10,_width_5,_width_33,_width_66

Height

_height_100,_height_95,_height_90,_height_85,_height_80,_height_75,_height_70,_height_65,_height_60,_height_55,_height_50,_height_45,_height_40,_height_35,_height_30,_height_25,_height_20,_height_15,_height_10,_height_5,_height_33,_height_66

Utility sets

Clearfix

_clearfix

Black transparent overlay

_ovrlay

Black gradient transparent overlay

_ovrlay_grad_tb,_ovrlay_grad_bt

Safe Layer (For non selectable background content)

_safe_layer

This will add a layer over the top of element and will protect element content being selected or saved by the user.

Rectangle Boxes

_sqr_box > _box,_por_box > _box,_land_box > _box

Add _sqr_box for parent and _box for child element

Thumbnail boxes

_thmb_box_30,_thmb_box_35,_thmb_box_40,_thmb_box_45,_thmb_box_50,_thmb_box_55,_thmb_box_60,_thmb_box_65,_thmb_box_70,_thmb_box_90,_thmb_box_120,_thmb_box_150

Hover show container

_hov_show > _elem

Add _hov_show for parent and _elem for child element

Elements Gutter (Add a gap between elements) [vertical & horizontal]

_gutter_10,_gutter_v_10,_gutter_15,_gutter_v_15,_gutter_20,_gutter_v_20,_gutter_25,_gutter_v_25,_gutter_30,_gutter_v_30,_gutter_35,_gutter_v_35,_gutter_40,_gutter_v_40

Add this class to every element that need to be spaced.

Vertically align middle box

_va_m_box

_va_m_box is a helper class of parent container for inner content (ex. img) to align in middle using vertical-align:middle property or _va_m class on inner content.