CSS 프레임워크가 당신을 제어하는 것이 아니라 당신에게 힘을 부여합니다

CSS 프레임워크 문제를 다루는 많은 글들은 논쟁을 하거나 잠재적인 모든 옵션의 함정을 깊이 파고든다.나의 경험을 보면 이보다 더 미세한 차이가 있다.CSS 프레임워크는 모든 유지하기 어려운 방대한 CSS 논리를 처리할 수 있는 명확한 위치를 가지고 있다. 예를 들어 접근성 문제, 패턴/팝업 가시성, 데스크톱과 이동 네비게이션 표시줄 등이다.
그러나 당신은 어디에 어떤 틀을 주입해야 하는지와 무엇을 맞춤형으로 만들어야 하는지의 경계를 분명히 했습니까?더 중요한 것은 프레임에 의해 통제되는 느낌을 어떻게 멈추고 당신이 하는 모든 것이 그렇게 특별한 촉감이 없게 하는가?

나의 철학

나는 최근에 조지아 이공대학에서 프로젝트 팀에 참가했을 때 이 문제를 만났다.🐝). 나는 현재 진행 중인 프로젝트를 계승했다. 큰 바람이 있어야 결승선에 도착할 수 있지만 작은 문제가 하나 있다. 이 사이트는 완전히 뿌리가 깊다Bootstrap.
저는 개인적으로 새로운 프로젝트를 위해 소형 디자인 시스템을 개발하는 것을 좋아해서 처음에는 CSS 프레임워크로 전환하는 것이 좀 번거롭습니다.그러나 나는 그것이 뚜렷한 실용성을 가지고 있다는 것을 발견했다. 예를 들어 배경이 점차적으로 변하는 Popover 모드를 포함하거나 적당한 단추와 밑에 있는 메뉴를 사용해서 옵션 카드의 초점을 걱정할 필요가 없다.이 점을 통해 저는 제 사용자 정의 세계와 제 팀의 레고 블록 방법을 조화롭게 하는 가장 좋은 방법은 프레임워크를 실용적인 도구로 보는 것입니다.
CSS 프레임워크는 요소의 외관과 감각 뒤에 구동력이 되어서는 안 되고 사이트가 서로 다른 화면 크기에서 유연성을 제어해서는 안 된다.반대로 맞춤형 솔루션이 의미를 잃을 때 자질구레한 부분을 잡아야 한다.나는 일부 사람들이 어제 완성한 홈페이지를 필요로 할 때 이런 이념이 정확하다는 것을 증명하기 어렵다는 것을 이해한다.그럼에도 불구하고 사용자 정의가 정지된 위치와 프레임워크 실용 프로그램이 시작하는 위치를 조금만 조정하면 어느 단계에서든 작업을 할 수 있다고 생각합니다.이런 것들이 있으면 다음은 내가 한층 더 논술하고 싶은 요점이다.

천편일률적인 배치에 의존하지 마라.

이것은 내가 본 상당히 큰 문제이다. 왜냐하면 프레임 구조 양식의 제약이 상당히 간단한 구조를 너무 복잡하게 만들었기 때문이다.최근의 노력Semantic UI이 접는 유연성을 높이는 데 더 잘하고 있지만 심각한 거친 가장자리가 존재하기 때문에 표지 작성에 걸리는 시간이 너무 길어질 수 있다.
나는 최근에 이런 예를 보았다. 당시 한 팀원이 우리의 응용 프로그램을 위해 매우 간단한 화면을 개발하고 있었다. 그것은 바로 신청인 정보 보기였다.이것은 단지 제목과 단락 목록으로 누군가의 이름, 이메일, 주소, 이력서 등을 설명하는 데 쓰인다.그러나 Bootstrap의 저주로 인해 문서는...이것

<Container>
  <Row>
    <Col>
      <Heading>{`${applicant.bio.first_name} ${applicant.bio.last_name}`}</Heading>
    </Col>
  </Row>
  <Row>
    <Col>
      <h5>
        <Label for="email">Email</Label>
      </h5>
      <p className="content">{applicant.bio.email}</p>
    </Col>
    <Col>
      <h5>
        <Label for="phoneNumber">Phone Number</Label>
      </h5>
      <p className="content">{applicant.bio.phone_number}</p>
    </Col>
    <Col>
      <h5>
        <Label for="birthDate">Birth Date</Label>
      </h5>
      <p className="content">{applicant.bio.date_of_birth}</p>
    </Col>
  </Row>
... a lot more row / columns

이것이 바로 내가 말한'전자표 지옥'이다. 여기서 페이지의 모든 내용은 사이트를 정의하는 어떤 큰 표의 한 줄이나 한 열처럼 보인다.고맙습니다. 이것은 유행하는 구성 요소 프레임워크인 React를 사용하기 때문에 표시된 모든 작업을 절약할 수 있습니다 <div class="col xs-4-72-57-sqrt(pi)">😉
네, 처음부터 용기를 만드는 것은 어려울 것 같습니다.하지만 Flexbox 또는 CSS grid 를 더 자주 사용하기 시작하면 CSS를 직접 작성하면 HTML 블록을 원하는 곳에 더 빨리 표시할 수 있습니다.
한 마디로 하면 비용을 줄이고 레이아웃을 잘 하기 위해 사용자 정의 스타일을 시도하고 프레임워크를 완성하십시오.

느낌이 맞으면 경계 반지름을 조정합니다

CSS 프레임워크의 또 다른 문제는 어떻게 창 쇼핑을 장려하는가이다. 즉, 기본 구성 요소를 중심으로 웹 사이트를 설계하기 시작하는 것이다.이것은 빠른 시작과 운행에 도움이 되지만, 나는 네가 이미 무수한 감각이 너무 많은 사이트를 방문했다고 믿는다...bootstrap-y.
이것은 더욱 어려운 장애물로 틀에 특정할 수 있다.대부분의 사이트에서 색채와 글꼴을 덮어쓰는 테마 옵션을 제공하지만 그 외에는 거의 없다.그래서 나는 사이트의 어떤 구성 요소를 선택하면 더욱 독특한 느낌을 받을 수 있고 어떤 구성 요소를 프레임워크에 보존하는 것이 도움이 된다는 것을 발견했다.나는 이것이 상당히 자유로운 선택이라고 생각한다. 가장 좋은 것은 당신의 디자인 선호와 당신의 CSS 기술에 의해 결정되는 것이다.그러나 문양 배경을 추가하거나 극적인 그림자를 띠는'행동 호소'버튼을 누르면 사이트를 자신의 사이트처럼 느끼게 할 수 있다.
여기에는 우리 사이트에서 온 간단한 예가 하나 있다.우리는 방금 신청자 뷰어에 내용 검색 기능을 추가하여 모든 전단과 백엔드 논리를 연결하여 우리가 원하는 방식으로 일을 하도록 했다.그러나, 우리 고객에게 보여줄 때, 우리는 당신이 검색한 내용을 어떻게 바꾸는지 모르는 문제를 발견했다.이것은 우리가 밑에 있는 아이콘에 대해 기본 안내 단추를 사용했기 때문에 검색 상자와 어떻게 연결되었는지 잘 모르겠다.따라서 버튼의 배경색을 변경하고 입력 상자에 더 가까운 위치로 밀어 넣고 통일된 경계 반지름을 사용하는 맞춤형 CSS를 출시했습니다.최종 결과는 훨씬 깨끗해졌다!

프레임이 너의 기능을 결정하지 못하게 해라

이것은 가장 중요한 점입니다. 왜냐하면 CSS 프레임워크는 사이트의 모든 가능한 요소를 덮어쓰는 일이 매우 적기 때문입니다.
우리 팀은 관리자 대시보드를 구축할 때 일찌감치 이런 상황을 만났다.요컨대, 우리는 신청자 뷰어를 설계하고 있으며, 관리자는 지원자 신청 사이를 신속하게 전환하여 신청자 정보를 조회하고 승인 상태를 변경할 수 있다.토론을 통해 우리는 전자메일 패널과 유사한 것이 가장 효과적일 수 있다고 생각한다. 왼쪽은 신청자와 그 상태에 대한 개술이고, 오른쪽은 모든 완전한 신청 공간이다.
우리는 당연히 대량의 가이드 구성 요소를 통해 영감을 찾을 수 있다.그러나 이것은 우리가 선택할 수 있는 드롭다운 메뉴나 옵션 카드 보기로 안내할 수 있지만, 이 보기들은 목표에 완전히 맞지 않는다.이것은 나의 관점으로 거슬러 올라갈 수 있다. 즉, 프레임워크는 최종적으로 실용적인 도구이다.만약 그들이 너를 도울 수 없다면, 손을 뻗어 그들을 잡지 마라!

이것은 우리의 최종 관리자 계기판입니다. 매력적인 중복 가상 데이터를 포함합니다!

종합하여 서술하다.

사이트를 만드는 것은 매우 어렵다.아무도 놀라지 않을 거예요.CSS 프레임워크를 모든 것을 포괄하는 도구로 간주하기 쉬우며 경험이 필요하지 않은 상황에서 처음부터 사이트를 구축할 수 있지만 모두 자신의 함정과 제한이 있어 사이트의 질에 영향을 줄 수 있다.새 페이지에서 작업할 때 다음 사항을 고려하십시오.

뭘 시키고 싶어요?

어떤 내비게이션, 레이아웃, 버튼 등이 가장 도움이 됩니까?

CSS 프레임워크와 중첩됩니까?

그렇다면 디자인이 당신의 요구에 가장 적합하거나 사용할 수 있는지🌶 스위치 켜?

뭐 공부 해요?

반갑습니다.만약 당신이 놓쳤다면, 나는 my "web wizardry" newsletter 을 발표하여 더 많은 이런 지식의 보고를 탐색할 것이다!
이 일은 웹 개발 문제를 해결했다"first principles".다시 말하면 우리의 모든 웹 프로젝트를 돌아가는 서투른 브라우저 API, 구부러진 CSS 규칙, 반접근 가능한 HTML은 무엇입니까?만약 네가 틀을 뛰어넘고 싶다면, 이것은 너에게 주는 것이다, 사랑하는 인터넷 마법사🔮
Subscribe away right here . 나는 영원히 가르치고 스팸메일을 보내지 않겠다고 보증한다❤️