간편하게 코딩한다면 역시 Bootstrap보다 TACHYONS이구나

2110 단어 TACHYONSBootstrapCS
우선 생 🍺 같은 정도로 Bootstrap을 사용할 기회가 있다고 생각합니다만, 개인적으로는 먼저 TACHYONS로부터 들어간 것으로, 알고 있다/사용하고 있는 사람이 전무이므로 소개하고 싶습니다

기억하는 작법은 하나



클래스 이름 끝에 다음 문자를 부여하여 장치 간 조정을 수행합니다.
  • "-ns"not-small의 약어. (min-width : 30em)
  • "-m"medium의 약어. (min-width: 30em) and (max-width: 60em)
  • "-l"large의 약어. screen and (min-width: 60em)

  • 아무것도 부여하지 않으면 어떤 크기에도 적용됩니다.
    사건에 따라 값을 변경하면 좋다고 생각합니다.

    파일 크기 가벼움



    v4.11.2에서 73kb라는 용량입니다.
    Bootstrap은 v4.3.1에서 156kb이므로 절반 이하의 용량입니다.

    문서 찾기 편의성




    자신이 사용하고 있는 Macbook Air 13inch의 1화면 범위 내에서도, 무엇에 대해 조사하고 싶은지 일목요연합니다
    TACHYONS/Docs

    샘플 가시성



    Bootstrap이라면 먼저 결과가 있고 그 아래에 코드와 같은 구성으로 스크롤하여 보게 됩니다.

    Bootstrap Flex 예제


    TACHYONS의 경우는 왼쪽에 코드, 오른쪽에 결과라는 구성으로 한 화면에 들어가 있기 때문에, Bootstrap과 비교했을 때, 매우 보기 쉽다고 생각합니다

    TACHYONS Flex의 예


    실제 원시 CSS가 어떻게 되는지



    모두가 모두 TACHYONS로 쓰는 것도 아니고, 스스로 CSS를 쓰는 것은 있을 것입니다
    그런 때, 어떤 프로퍼티·값을 사용하고 있는지 확인하고 싶어지는 일이 있다고 생각합니다
    일일이 CSS 파일을 연주해도, 문서 각 페이지의 하단에 원시의 CSS가 기술되고 있으므로, 그것을 확인하면 됩니다

    흥미로운 곳도 있습니다.



    table의 리셋트에 collapse가 맞지 않기 때문에, 일부러 table.collapse라고 하는 느낌에, 클래스를 부여해 줍니다
    또, 모바일 퍼스트인 디자인이므로, 스마트폰 사이즈에만 클래스를 맞추고 싶다! 라고 하는 경우는, 일일이 -m -l
    만약 좋을 것 같다고 느낀다면 꼭 안건에 따라 TACHYONS를 사용해 보세요!
    반드시 하나의 무기로 사용할 수 있다고 생각합니다.

    P.S.
    놀랍게도 TACHYONS 태그가 달린 기사가 전혀 없었습니다.

    좋은 웹페이지 즐겨찾기