Norvell's Public Machinations

    css-sets

    0.0.4 • Public • Published

    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.

    Keywords

    none

    Install

    npm i css-sets

    DownloadsWeekly Downloads

    3

    Version

    0.0.4

    License

    ISC

    Last publish

    Collaborators

    • thatisuday