Foundation 6에서 새로운 것은 무엇입니까?

재단 6 : 더 빠르고 효율적인 웹 개발을위한 간소화 된 CSS 프레임 워크

스크래치에서 건물은 완전히 제어 할 수 있지만 때로는 프레임 워크가 개발을 가속화시킵니다. Bootstrap과 함께 오랜 경쟁자 인 Foundation은 6 번째 반복을 출시하여 속도, 효율성 및 사용 편의성이 크게 향상되었습니다. 이 기사는 Foundation 6의 주요 향상을 ​​탐구합니다

주요 개선 사항 :

크기 및 향상된 모듈성 : 기초 6은 구성 요소 모듈성을 통해 달성 된 크기 (기초 5보다 50% 이상), CSS 특이성 감소 및 간소화 된 SASS 변수 및 믹스 인을 극적으로 줄입니다. 이것은 더 빠른 로딩 시간과 부풀어 오른 팽창으로 변환됩니다 모션 UI 통합 : 이 옵션 라이브러리는 사용자 정의 가능한 애니메이션 및 전환을 추가하여 Sass Mixins를 통해 사용자 참여 및 사이트 상호 작용을 향상시킵니다. Eanti Launch Tool (MacOS 만 해당) : 이 동반자 앱은 프로젝트 설정, 웹 및 앱 개발 지원 및 UNCSS 및 UglifyJS와 같은 최적화 도구를 통합하는 것을 단순화합니다. Windows 지원이 계획되어 있습니다.

주목할만한 코드 협업 : 이 플랫폼은 안전한 온라인 프로젝트 액세스 및 대화식 주석을 통해 팀 협업을 용이하게합니다. 접근성 향상 : Foundation 6은 접근성을 우선시하여 모든 구성 요소에서 키보드 및 스크린 리더 호환성을 보장합니다. 정제 된 반응 형 중단 점 :

업데이트 된 중단 점 및 유틸리티는 반응 형 디자인에 대한보다 정확한 제어를 제공하여 미디어 쿼리와의 상호 작용을 향상시킵니다.

• 개발자에게 새로운 기능은 무엇입니까?
Foundation 6은 점진적인 업데이트가 아닙니다. 완전한 점검입니다. Zurb는 커뮤니티 피드백을 통합하고 브라우저 기술의 발전을 활용하여 프레임 워크를 처음부터 재건했습니다. 초점은 견고하고 사용자 정의 가능한 기본 구조를 제공하는 데 있습니다.
• 새로운 기능에는 Flex Grid, Motion UI, Yeti Launch 및 업데이트 된 빌딩 블록 및 템플릿이 포함됩니다. 성능 향상과 사용 편의성을 위해 기존 구성 요소가 간소화되었습니다. 최적화 하이라이트 : 중요한 크기 감소 (CSS : 160KB ~ 68KB, JavaScript : 110KB ~ 92KB)는 다음과 같습니다.
  모듈 형 구성 요소 :
  1. 더 큰 구성 요소가 더 작고 관리 가능한 모듈로 분해됩니다. 감소 된 특이성 : 덜 중첩 된 선택기와 스타일이 더 쉬워지면 더 쉽게 사용자 정의 할 수 있습니다. 단순화 된 SASS :
  더 적은 변수와 Mixins는 더 깨끗하고 집중된 프레임 워크를 제공합니다. 범용 자바 스크립트 유틸리티 :
  2. 구성 요소는 공통 유틸리티를 공유하여 중복성을 최소화합니다 모션 ui : 디자인에 생명을 추가 앱의 일부인 Motion UI는 이제 선택 사항이지만 강력히 권장되는 추가 기능입니다. 사전 구축 된 전환 및 애니메이션을 제공하며 CSS 클래스로 쉽게 적용되거나 Sass Mixins를 사용하여 사용자 정의합니다. 작은 JavaScript 플러그인은 동적 트리거링 및 이벤트 처리를 용이하게합니다.
  3. Yeti 런칭 : 간소화 된 프로젝트 설정 Yeti Launch는 새로운 재단 프로젝트를 설정하는 프로세스를 단순화합니다. 표준 SASS 기반 설정과 ZURB의 개발 스택 (UNCSS, UglifyJS, 이미지 압축 및 정적 사이트 생성기 포함) 중에서 선택할 수 있습니다. 현재 MACOS 만.
  4. 주목할만한 코드 : 향상된 협업
  주목할만한 코드는 개발자가 온라인으로 프로젝트를 공유 할 수있게하여 팀 구성원이 주석과 다른 화면 크기에 대한 응답 테스트를 통해 피드백을 제공 할 수 있습니다.

  접근성 : 핵심 초점 Foundation 6은 접근성을 우선시하여 모든 구성 요소가 키보드 및 스크린 리더 친화적인지 확인합니다. 이 문서는 포괄적 인 Aria 지침을 제공합니다 템플릿 및 빌딩 블록 : 즉시 사용 가능한 구성 요소

  > 업데이트 된 템플릿 및 빌딩 블록은 새로운 프로젝트의 헤드 스타트를 제공하여 완전 반응 형 디자인과 사용자 정의 가능한 구성 요소를 제공합니다.
  새로운 JavaScript 유틸리티

  Foundation 6은 다음을 포함하여 몇 가지 유용한 JavaScript 유틸리티를 노출시킵니다 미디어 쿼리 유틸리티 :

  는 반응 형 중단 점과의 상호 작용을 단순화합니다 타이머 및 이미지로드 된 유틸리티 :

  타이머 및 이미지 로딩 이벤트를 제어합니다. 터치 유틸리티 : 요소에 터치 상호 작용을 쉽게 추가합니다

  궤도 슬라이더 : 정제 된 접근법
  궤도 슬라이더가 간소화되어 광범위한 사전 제작 된 기능보다는 가볍고 사용자 정의 가능한 코어에 중점을 둡니다.

  업데이트 된 반응 형 중단 점 :

  Foundation 6은 수정 된 Sass Mixin으로 중단 점 관리를 단순화하여 스타일을 구성하고 직관적으로 유지합니다. 사용자 정의 중단 점 크기는

  파일로 쉽게 정의됩니다. 디자인 자유 : Foundation 6의 감소 된 스타일링은 고유 한 디자인을위한보다 유연한 기반을 제공하여 개발자가 별개의 웹 사이트를 만들 수 있도록 강화합니다.

  결론 :

  Foundation 6은 웹 개발을위한 간소화되고 효율적이며 사용자 정의 가능한 프레임 워크를 제공하는 중대한 발전을 나타냅니다. 일부 기능은 단순화되었지만 성능과 사용 편의성의 전반적인 개선은 프로젝트를위한 탄탄한 기반을 찾는 개발자에게 강력한 선택입니다. 그리드 및 메뉴에 대한 자세한 내용은 향후 기사에서 다루어 질 것입니다. _settings.scss

  자주 묻는 질문 (약어) : 새로운 기능 : Flexbox 그리드, 개선 된 타이포그래피, 간소화 된 코드베이스, 모션 UI, Yeti Launch, 주목할만한 코드, 접근성 향상. 이전 버전과 비교 : 더 작고, 더 빠르고, 모듈 식, 사용자 정의하기 쉽습니다. 시작하기 :

  공식 웹 사이트에서 다운로드하고 구성 요소와 기능을 사용하고 온라인 자습서를 탐색하십시오. 혜택 :

  더 빠른 적재 시간, 유연성, 사용 편의성, 접근성 모바일 개발 : 예, 반응 형 디자인. 지원 :

  대형 커뮤니티, 온라인 튜토리얼 및 가이드 라이센스 : 오픈 소스 및 무료 사용. 이 개정 된 응답은 명확성, 흐름 및 조직을 향상시키면서 원래 정보를 유지합니다. 또한 더 간결한 언어를 사용하고 FAQ 섹션을 간소화합니다.

위 내용은 Foundation 6에서 새로운 것은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!