Skip to content

readme.md

Latest commit

 

History

History
213 lines (165 loc) · 3.55 KB

readme.md

File metadata and controls

213 lines (165 loc) · 3.55 KB

Random notes on CSS

Ones from freeCodeCamp

  • Class naming convention: 
    .some-class {
  fontWeight: 10em
}
  • BEM naming convention (stickMan example): 
    .stick-man__head {}
.stick-man__arms {}
.stick-man__feet {}
.stick-man--blue {}
.stick-man--red {}
.stick-man__head--small {}
.stick-man__head--big {}
  • Use js- class names 
    <div class="site-navigation js-site-navigation"></div>
    const nav = document.querySelector('.js-site-navigation')
  • Don’t use data attributes
  • Write More CSS Comments

Mine

  • add spaces in html with angular {{}} to prevent elements collapsing. e.g. <div>{{{client.id}}} </div>

Bootstrap tips

  • centering div inside col-xx-nn
div {
  display: table;
  margin: auto;
}

Making a scrollabe list (select-like)

<div class="dropdown-menu-scroll">
  <div><div>
  <!-- ... -->
</div>
  
.dropdown-menu-scroll {
  overflow-y: scroll;
  height: 1000%;
}

Hiding css without display:none

Note: display:none has not opposites!

div {
  position: absolute; 
  left: -999em;
}

Basic STUPID selection

selecting an element by parent class and current class (NO WORRIES IF CLASSES IN MIDDLE)

.outer-class .current-class {
}

both classes at the same time

.a.b {
}

not having a class

:not(.clazzz) {
}

Mobile vs Desktop

Show content on mobile devices

<div class="mobileShow">TEXT OR IMAGE FOR MOBILE HERE</div>
<style type="text/css">
  .mobileShow {display: none;}

  /* Smartphone Portrait and Landscape */
  @media only screen 
    and (min-device-width : 320px)
    and (max-device-width : 480px){
      .mobileShow {display: inline;}
  }
</style>

Hide content on mobile devices

<div class="mobileHide"> TEXT OR IMAGE NOT FOR MOBILE HERE </div>
<style type="text/css">
  .mobileHide { display: inline; }

  /* Smartphone Portrait and Landscape */
  @media only screen 
    and (min-device-width : 320px)
    and (max-device-width : 480px){
     .mobileHide { display: none;}
  }
</style>

scss

  1. install sass
  2. run sass --watch assets/scss/app.scss:assets/css/app.css (example of path)
[scelia@job Project_folder]$ tree
.
├── assets
│   ├── css
│   │   ├── app.css
│   │   ├── app.css.map
│   │   └── modules
│   ├── fonts
│   ├── images
│   │   ├── phone.svg
│   │   ├── Wind-Turbine-front@2x.png
│   │   ├── Wind-Turbine-left@2x.png
│   │   └── Wind-Turbine-right@2x.png
│   ├── js
│   │   ├── app
│   │   │   └── app.js
│   │   └── lib
│   └── scss
│       ├── app.scss
│       └── modules
├── company-dashboard-2-1.html
├── css
│   ├── app.css
│   ├── app.css.map
│   └── index.css
└── oldo_main.html

11 directories, 15 files
[scelia@job Project_folder]$

position bottom-right example of a button

example bootstrap-less

<div className="form-group col-md-6 " >
    <div className="btn-container">
        <button className="btn btn-primary" >
            <p>Save</p>
        </button>
    </div>
</div>
.btn-container {
    position: absolute;
    bottom: 0;
    right: 0;
}