내가 왜 부르마를 사랑하는지

나는 지금까지 물건을 설계하는 것을 잘하지 못했다.나의 새 블로그는 아마도 증명일 것이다.😁 그러나 웹 사이트의 스타일을 디자인하는 것은 색 방안을 선택하는 것만은 아니다. 글씨체, 간격, 아이콘 등이다. 내가 진정으로 하고 싶은 것은 보기에 좋은 페이지를 만드는 것일 뿐이다. 고려해야 할 일이 많다.
저는 예전에 Bootstrap를 시도해 봤습니다. 이것은 여러 해 동안 인터넷의 주류였고 Tailwind는 지난 몇 년 동안 큰 흡인력을 얻었지만 제 CSS가 필요로 하는 go to library는 Bulma였습니다.
나는 트위터를 통해 부르마를 발견했다고 생각한다.나는 누군가가 트위터에 이 소식을 올렸다고 생각한다. 나는 그것을 주목할수록 더욱 흥미를 느낀다.내가 좋아하는 부르마에 대해 이야기하는 것만으로도 더 많은 흥미를 불러일으킬 수 있기를 바랍니다!

어셈블리/컴포넌트
Bulma에는 내장된 구성 요소가 많아서 설치하기 쉽고 좋은 문서 기록이 있습니다!Bulma가 내놓은 가장 큰 장점은 CSS 파일에 있다는 것이다.프로그래밍의 대세계에서, 당신은 항상 다른 CSS 파일 더미를 하나의 파일로 축소할 수 있다.이곳의 장점은 주로 Bulma에 자바스크립트 패키지가 없다는 것을 강조하는 것이다.
90퍼센트의 경우, 이것은 문제가 아닙니다. Bulma의 모든 구성 요소는 자바스크립트가 없는 상황에서 작업을 제공해야 합니다.그러나 이 규칙에는 예외가 하나 있는데 문서here에서 찾을 수 있다.
TL;DR: navbar 요소는 모바일 장치에서 적당히 접을 수 있도록 자바스크립트가 필요합니다.그들 사이트의 예에는 여러 개의 네비게이션 표시줄을 처리할 수 있는 상당히 광범위한 자바스크립트가 있다.일반적으로 레이아웃에 하나만 생성하므로 관심 요소에 ID만 추가할 수 있습니다.

<a id="burger" onClick={toggleStyles} role="button" 
  class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

<div class="navbar-menu" id="navbarmenu">
  <!-- other elements here -->
</div>

몇 개의 선택기를 사용하고 이 햄버거에 연결된 onClick 이벤트 전환 메뉴를 볼 수 있는지 여부는 간단합니다.

/*
* Added this to toggle the is-active class. See:
* 
* https://bulma.io/documentation/components/navbar/#navbar-menu
* https://github.com/jgthms/bulma/issues/856
*/
const toggleStyles = () => {
  document.querySelector('#burger').classList.toggle('is-active')
  document.querySelector('#navbarmenu').classList.toggle('is-active')
}

또 다른 빠른 팁: Microsoft Edge는 Bulma가 navbars를 어떻게 실현하는지에 문제가 있지만 CSS를 통해 해결할 수 있습니다.사용 상황에 따라 다양한 변통 방법을 찾을 수 있습니다here.

맞춤형 구성
Bulma는 변수에 매우 민감합니다.Bulma에서 기본값이 있는 거의 모든 물건을 맞춤형으로 만들 수 있습니다.색깔, 응답 단점, 글씨체, 네가 어떻게 말하든지, 무엇이든지 맞춤형으로 만들 수 있어!
네가 웹 사이트에 매우 특수한 배색 방안이 있을 때, 이것은 매우 편리할 것이다.변수를 하나만 설정하면 많은 요소의 색상과 크기를 사용자 정의할 수 있습니다.
전체 변수 목록here을 볼 수 있습니다.나는 가능한 한 CSS를 너무 많은 곳에 두지 않는 사람들 중의 하나이다.스타일을 선호하기 때문에, 나는 보통 HTML이나 JSX의 스타일을 좋아하지 않는다.일반적으로 Sass 파일을 작성하고 필요에 따라 Bulma 변수를 덮어쓰므로 사이트 전체에 적용할 수 있습니다.

$primary: #c01045
@import '~bulma/scss/bulma.scss'

내가 선택한 색상은 가능한 16진수 형식의 "색상"에 가깝지만, 이 예에서 Bulma의 $primary 색상을 변경하고 있습니다.Bulma에는 성공을 표시하거나 사용자가 주의해야 할 사항을 표시하는 등 다양한 기본 색상이 있습니다.$danger나 $warning와 같은 다른 색은 여러 구성 요소에 같은 색을 적용할 수 있도록 사용자 정의할 수 있습니다.

호응성
부르마의 반응은 매우 민감하다.Bulma는 요소가 표시될 때만 표시되는지 확인하기 위해 스타일과 함께 사용할 수 있는 많은 단점을 제공합니다.
Here는 전체 클래스 목록을 찾을 수 있는 곳입니다.sceen 크기에 따라 요소를 표시하거나 숨길 수 있습니다.예를 들어, 다음 요소는 화면 크기에 따라 다르게 표시됩니다.
제 블로그here의 예를 보십시오.이 블로그는 나의 블로그에서 유래한 것으로 삽입된 유래는 여기서 작용하지 않는다.
당신의 용례에 의하면 이것은 아마도 매우 교묘한 기교일 것입니다.

결론
나는 이 문장을 통해 부르마에 대해 약간의 흥미를 느꼈으면 한다.만약 네가 나에게 어떤 피드백이 있다면, 나는 너의 회답을 기꺼이 받을 것이다.